Milk & Motion
A guided mobile learning experience helping beginner baristas build confidence through structured latte art practice.
Timeline
6-week capstone project
Role: UX Designer
- Conducted user research and usability testing
- Synthesized insights and defined design direction
- Designed wireframes and high-fidelity prototype in Figma
- Iterated on designs based on usability feedback
Tools
Figma, FigJam, Usability Testing
Problem
Learning how to make drinks as a beginner barista is challenging because the process is physical and time-sensitive. Users are often multitasking and can't easily stop mid-way without affecting the result.
Most learning resources require switching between watching and doing, which disrupts the flow of practice. This leads to confusion, mistakes, and a lack of confidence.
User Research
I conducted live moderated usability tests with beginner and experienced baristas to understand how people learn latte art and where they experience friction.
These sessions revealed key challenges around multitasking, following instructions in real time, and maintaining confidence during early-stage learning.
Key Insights
- Users struggle to follow instructions while physically making drinks
- Users feel overwhelmed when too much information is shown at once
- Users need guidance during the process, not before or after
Designing the Solution
Milk & Motion is a guided mobile learning experience designed to help beginner and early-stage baristas build confidence through structured, step-by-step practice.
Based on research insights, I designed a guided Home → Practice → Reflection experience to support step-by-step learning during real-time practice. The experience breaks the process into focused actions, reducing cognitive load by simplifying instructions and limiting interaction during key moments.
- Step-by-step skill progression to reduce overwhelm during hands-on practice
- Focused, distraction-free lesson flows to support active learning
- Reflection prompts and supportive feedback to build confidence and reinforce progress
Key Design Decisions
1. Structuring the End-to-End Journey
To reduce confusion during practice, I designed a clear flow from onboarding to reflection. Breaking the experience into defined steps creates a more predictable and easy-to-follow process.
2. Reinforcing Progress and Motivation
To address uncertainty during learning, I introduced reflection and progress features. Simple prompts and supportive feedback help reinforce progress and build confidence over time.
3. Making Practice More Guided and Understandable
To support real-time learning, I designed a step-by-step practice flow with simplified instructions and visual support. This helps users stay focused on one step at a time without feeling overwhelmed.
Based on usability testing, I refined the experience to improve clarity, reduce cognitive load, and better support user confidence.
Iteration 1
Clarifying the Practice Flow
Users were unsure how to move through the practice experience due to unclear progression. I restructured the flow into a guided, step-by-step sequence with clearer actions and visual support.
This made each step easier to follow and reduced confusion during hands-on practice.
Before
Unstructured step with unclear progression
After
Guided step with clear actions and visual support
A clearer, guided sequence helped users stay oriented and follow each step more confidently.
Iteration 2
Reducing Cognitive Load During Practice
Users struggled to follow instructions while actively making drinks, especially when too much information was presented at once. I simplified instruction screens by breaking content into smaller sections and minimizing interaction during key moments.
This helped users stay focused on the current step and reduced overwhelm during hands-on practice.
Before
Dense, text-heavy instructions
After
Chunked content with progressive disclosure
Breaking content into smaller sections helped users focus on one step at a time during practice.
Iteration 3
Strengthening Progress and Confidence
Users lacked clear feedback during practice, making it difficult to understand their progress. I introduced reflection prompts and progress indicators to provide encouragement and reinforce learning.
This helped users recognize improvement, stay motivated, and feel more confident over time.
Before
Minimal feedback after completing a practice
After
Encouraging reflection with clear next steps
Reflection and clear next steps helped users recognize progress and stay motivated.
Key Takeaways
The final Milk & Motion experience delivers a guided, low-friction way to learn latte art through hands-on practice. By simplifying instructions, structuring the learning flow, and introducing moments of reflection, the design supports both skill development and user confidence.