Trainee
Not yet working as a barista, or has little experience. Wants to learn the profession.
Latte Art - a digital platform for barista training with game mechanics
How we turned a set of latte-art training cards into a modern mobile product with gamification, competitions and a user growth system
Latte Art
Digital platform
How we turned a set of latte-art training cards into a modern mobile product with gamification, competitions and a user growth system
About the project
The client already had a finished educational product - a set of physical cards for teaching latte art. The cards were used in barista training and contained step-by-step instructions for patterns on milk foam.
The main task of the project was a mobile app that would move the existing training method into a digital environment and make the process more convenient, modern and engaging.
Beyond simply viewing cards we needed game scenarios, a progress system, user ratings and competitive modes that raise engagement and encourage regular practice.
The main goal was a single design concept for the app, fully ready for later iOS and Android development.
Task
of the project
Our team had to design an app interface that would serve several functions at once:
Serve as an interactive textbook
on latte art
Provide fast access
to a large set of training cards
Motivate users to come back to the app regularly
Combine learning and game mechanics
Be equally convenient for beginner baristas and experienced specialists
Special attention was required for interface scalability, because further growth and a wider admin panel were planned.
Our
solution
We proposed not to stop at individual app screens,
and to build a full design system that will become the foundation for
further product development.
The solution was based on several
key principles:
1
Single
visual language
2
Clear
navigation
3
High speed
learning the interface
4
Maximum focus on
educational content
5
Use of game mechanics
as a way to increase
engagement
This approach let us create not just a beautiful interface,
and a complete digital learning ecosystem.
Project
in figures
All figures are based on the brief
and the results of completed work.
160
Training
cards
4
Full
a card set
2
Game
mode
Up to
4
participants
at the same time
5
Levels
pattern difficulty
5
Levels
user progression
More than
10
key
app screens
Unified
design system
Clickable
prototype
Prepare a full set
materials for development
Ready
product
After the project the client received a fully prepared
a set of design materials:
Screen design mockups
Clickable prototype
Design system
UI Kit
Description of user logic
Materials for handover to development
At the end of the stage we were preparing the mobile app
for further development.
Delivery stages
Analytics
Work started with analysis of the existing educational product.
The team studied the card structure, how they are used and the specifics of latte-art training. Then we defined the main user scenarios for the app.
Based on the analysis we formed:
- User Flow
- Screen-to-screen transition logic
- Main user segments
- JTBD scenarios
- App navigation structure
Main user segments
Experienced barista
Already works in the industry, but wants to raise qualification.
Judge
An experienced barista who judges barista competitions in Battles.
JTBD
scenarios
Wants
Увидеть свою статистику
In order to
Знать насколько прокачался профиль
Wants
Посмотреть выученные карты
In order to
Повторить пройденный материал
Wants
Сразиться с игроками в «Баттле»
In order to
Прокачать навыки и выучить новое
Wants
Получить приглашение на судейство в баттле
In order to
Принять участие в баттле как судья
Prototyping
The next stage was an interactive prototype.
The main task was to check navigation and make sure a user can move between training, game modes, ratings and the personal cabinet without extra steps.
During design we built a clear app structure so users can find the right material quickly, regardless of experience.
After user scenarios were approved, a clickable Figma prototype was prepared.
