Building a step-by-step guide to my espresso setup
for someone with no experience
Building a step-by-step guide to
my espresso setup for
someone with no experience
Building a step-by-step guide to
my espresso setup for
someone with no experience
Role
Role
Designer & Builder
Designer & Builder
Skills
Skills
AI Prototyping
Mobile Web App
Conversation Design
Interaction Design
AI Prototyping
Mobile Web App
Conversation Design
Interaction Design
Duration
Duration
1 month
1 month
Project Context
Project Context
My wife wanted to make coffee for me, but she didn’t know how. Learning to make espresso is a skill on its own and using a particular setup (machine, grinder, equipment) is almost always a different experience.
I had the idea to build a simple mobile app for her or guests to use my setup without any prior experience. The app is built with AI (Claude Design & Claude Code), has a built-in AI chat assistant (Gemini), and is hosted on Vercel.
My wife wanted to make coffee for me, but she didn’t know how. Learning to make espresso is a skill on its own and using a particular setup (machine, grinder, equipment) is almost always a different experience.
I had the idea to build a simple mobile app for her or guests to use my setup without any prior experience. The app is built with AI (Claude Design & Claude Code), has a built-in AI chat assistant (Gemini), and is hosted on Vercel.
Impact
Impact
My wife made her first espresso drink on her own, start to finish, without needing me nearby, and became confident in her ability to do it again, with the app for reference.
The full mobile web app is live (and embedded below on desktop). It includes real photos of my setup, plus Luna, an AI assistant that answers questions specifically referencing the existing tools and recipe.
My wife made her first espresso drink on her own, start to finish, without needing me nearby, and became confident in her ability to do it again, with the app for reference.
The full mobile web app is live (and embedded below on desktop). It includes real photos of my setup, plus Luna, an AI assistant that answers questions specifically referencing the existing tools and recipe.
For those where generic espresso guides are not specific enough.
For those where generic espresso guides are not specific enough.
The challenge isn't knowing how to make espresso alone, but knowing how to navigate a particular machine and setup.
The challenge isn't knowing how to make espresso alone, but knowing how to navigate a particular machine and setup.
A generic espresso guide teaches pulling a shot in theory, but will always miss details about specific equipment.
For example, my scale has 2 buttons that have the exact same label on left & right for different functions.
A generic espresso guide teaches pulling a shot in theory, but will always miss details about specific equipment.
For example, my scale has 2 buttons that have the exact same label on left & right for different functions.
I laid out my drink making process to ideate on paper.
I laid out my drink making process to ideate on paper.
Starting with a paper prototype allowed me to get an idea of what I wanted before handing off to Claude and becoming biased by it's generic output.
Starting with a paper prototype allowed me to get an idea of what I wanted before handing off to Claude and becoming biased by it's generic output.
I used my paper prototype, flow, and a detailed product requirements document to have Claude turn it into my initial prompt for Claude Design.
I used my paper prototype, flow, and a detailed product requirements document to have Claude turn it into my initial prompt for Claude Design.
I brought Claude's output to life with 110+ version updates.
I brought Claude's output to life with 110+ version updates.
Early versions were generic and buggy. I tested the live app over and over to find new issues and find ways to iterate for a better experience.
Early versions were generic and buggy. I tested the live app over and over to find new issues and find ways to iterate for a better experience.
Adjusting from my initial flow
Adjusting from my initial flow
Ingredients and equipment began as two separate screens, and the preheat step asked for button presses before the app had shown the machine.
I merged the lists into one 'Gather your gear' checklist, and moved the button legend onto the preheat screen instead of pushing preheat later, since it takes ~20 minutes.
Ingredients and equipment began as two separate screens, and the preheat step asked for button presses before the app had shown the machine.
I merged the lists into one 'Gather your gear' checklist, and moved the button legend onto the preheat screen instead of pushing preheat later, since it takes ~20 minutes.
Checking patterns with the Mobbin MCP
Checking patterns with the Mobbin MCP
Once I had my V0, I moved from Claude Design to Claude Code to access MCPs while designing. The Mobbin MCP let me see what popular apps do in particular situations, which led to the progress bar and button arrangement, for example.
Once I had my V0, I moved from Claude Design to Claude Code to access MCPs while designing. The Mobbin MCP let me see what popular apps do in particular situations, which led to the progress bar and button arrangement, for example.
Photography & References
Photography & References
Every piece of equipment is shown with my photos, so it's easy to know what an item is referring to.
Many steps also have actual reference photos as a visual guide,
Every piece of equipment is shown with my photos, so it's easy to know what an item is referring to.
Many steps also have actual reference photos as a visual guide,
AI Chat Assistant
AI Chat Assistant
Luna, the espresso dog, has all of the context to help the user. She also has a fun personality, just like the real Luna.
Opening the chat brings up three suggested questions that are specific to each active screen. These questions also have binned answers to increase response speed and reduce API usage.
Luna is powered by the Gemini API.
Luna, the espresso dog, has all of the context to help the user. She also has a fun personality, just like the real Luna.
Opening the chat brings up three suggested questions that are specific to each active screen. These questions also have binned answers to increase response speed and reduce API usage.
Luna is powered by the Gemini API.
Interactions
Interactions
Most notably, the steps don't require constant picking up of the phone.
Tapping a step marks it done and if you complete a step ahead, it will complete every step above it so you don't need to tap everything.
If you complete something near the bottom of the screen, it will automatically scroll to center the active step to reduce touches when your hands are busy.
Most notably, the steps don't require constant picking up of the phone.
Tapping a step marks it done and if you complete a step ahead, it will complete every step above it so you don't need to tap everything.
If you complete something near the bottom of the screen, it will automatically scroll to center the active step to reduce touches when your hands are busy.
Additional touches
Additional touches
I added a dark mode for users who prefer different contrast (espresso brown & baby pink), which can be toggled on the start screen.
The progress bar and step completions have smooth interactions to feel tactile rather than choppy.
There's also a fun completion screen at the end.
I added a dark mode for users who prefer different contrast (espresso brown & baby pink), which can be toggled on the start screen.
The progress bar and step completions have smooth interactions to feel tactile rather than choppy.
There's also a fun completion screen at the end.
A first run-through exposed a lack of specificity and cautions.
A first run-through exposed a lack of specificity and cautions.
I asked my wife to use the guide for her first time making an espresso drink. I didn't stand by so she could take her time and I asked for feedback afterwards.
I asked my wife to use the guide for her first time making an espresso drink. I didn't stand by so she could take her time and I asked for feedback afterwards.
Stopping at 36g
Stopping at 36g
She tried to stop the shot right when the scale hit 36g, which made her a little confused when it kept dripping until ~38g. When I am making espresso, I know to stop just before 36g without even thinking. My guide never accounted for that so I rewrote the step and added a note to confirm that some variation is fine.
She tried to stop the shot right when the scale hit 36g, which made her a little confused when it kept dripping until ~38g. When I am making espresso, I know to stop just before 36g without even thinking. My guide never accounted for that so I rewrote the step and added a note to confirm that some variation is fine.
Hot to touch!
Hot to touch!
My wife knew that some parts would be hot but wasn't sure where. I failed to include cautions in the guide when the user might be touching near hot parts.
This was another instance where I referenced popular apps via the Mobbin MCP to help decide where warnings should go.
My wife knew that some parts would be hot but wasn't sure where. I failed to include cautions in the guide when the user might be touching near hot parts.
This was another instance where I referenced popular apps via the Mobbin MCP to help decide where warnings should go.
What I learned
What I learned
Research while building
Research while building
The ability to do competitive analysis via the Mobbin MCP and Claude reading my designs saved a lot of time and allowed me to see more apps than I typically would with competitive analysis.
I was able to let Claude search for apps that do what I'm asking for. I was also able to ask for specific interactions like the automatic step mover which was inspired by map navigation rather than a recipe app.
The ability to do competitive analysis via the Mobbin MCP and Claude reading my designs saved a lot of time and allowed me to see more apps than I typically would with competitive analysis.
I was able to let Claude search for apps that do what I'm asking for. I was also able to ask for specific interactions like the automatic step mover which was inspired by map navigation rather than a recipe app.
AI drift and auditing
AI drift and auditing
Since I made so many updates and iterations in Claude, I was mindful of auditing often on two levels: 1. senior-level feedback on design and function and 2. inconsistencies across typography, colors, and spacing.
Even after clearly stating the exact text hierarchy and 8pt spacing intervals, Claude would make changes that led to introducing new sizes on its own.
Since I made so many updates and iterations in Claude, I was mindful of auditing often on two levels: 1. senior-level feedback on design and function and 2. inconsistencies across typography, colors, and spacing.
Even after clearly stating the exact text hierarchy and 8pt spacing intervals, Claude would make changes that led to introducing new sizes on its own.