A guided mobile learning experience helping beginner baristas build confidence through structured latte art practice.
Milk & Motion
Timeline
6-week capstone project
Role: UX Designer (End-to-End Product Design)
- 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
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.
The experience focuses on breaking down complex skills into simple, actionable steps that users can follow in real time, creating a more focused and supportive learning process.
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.
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
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. To stay focused on the MVP, I centered the design around the Practice flow, helping users stay on track and build confidence while making drinks.
Key Design Decisions
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.
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.
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
.png&w=1080&q=75)
AFTER: Guided step with clear actions and visual support
.png&w=1080&q=75)
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
.png&w=1080&q=75)
AFTER: Chunked content with progressive disclosure
.png&w=1080&q=75)
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
%20.png&w=1080&q=75)
AFTER: Encouraging reflection with clear next steps
.png&w=1080&q=75)
Reflection and clear next steps helped users recognize progress and stay motivated.
Final Outcome
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.