Latte Art - цифровая платформа для обучения бариста с игровыми механиками
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:
Single
visual language
Clear
navigation
High speed
learning the interface
Maximum focus on
educational content
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.
Training
cards
Full
a card set
Game
mode
participants
at the same time
Levels
pattern difficulty
Levels
user progression
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.
ЭТАПЫ
РЕАЛИЗАЦИИ
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
Основные
пользовательские сегменты
Trainee
Пока не работает бариста, либо имеет мало опыта. Хочет научиться этой профессии.
Experienced barista
Already works in the industry, but wants to raise qualification.
Judge
Опытный бариста, который судит соревнования баристов в «Баттлах».
JTBD
scenarios
Увидеть свою статистику
Знать насколько прокачался профиль
Посмотреть выученные карты
Повторить пройденный материал
Сразиться с игроками в «Баттле»
Прокачать навыки и выучить новое
Получить приглашение на судейство в баттле
Принять участие в баттле как судья
Логика переходов
между экранами
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.
Design
При разработке визуальной концепции основное внимание уделялось современному минималистичному интерфейсу с высокой читаемостью.
За основу был выбран темный фон, позволяющий акцентировать внимание пользователя на обучающих карточках.
В качестве фирменного акцентного цвета использовался желтый, который был определен заказчиком как основной цвет бренда.
Для построения единой визуальной системы были разработаны:
- Типография
- Color palette
- Сетки
- Кнопки
- Карточки
- Бейджи
- Статусы пользователей
- Элементы рейтингов
- Компоненты достижений
Color palette
Типография
Aa
SF Pro
Основной шрифт
Карточки
Бейджи
Рамки бейджей
Кнопки
Список рекордов
Текстовые поля
Элементы UI
Отдельное внимание уделялось состояниям интерфейса:
- Loading
- Disabled
- Hover
- Сообщения об ошибках
- Успешные действия
- Модальные окна
- Пустые состояния
Такой подход позволил сделать интерфейс единообразным и значительно упростил дальнейшую разработку.
Home screen
Экран карточки
Экран баттла
Экран достижений
Профиль пользователя
Таблица лидеров
Игровые механики
Одной из главных особенностей проекта стала реализация
элементов геймификации.
Баттл
Игроки соревнуются между собой, случайным образом получают задания, выполняют рисунки и получают оценки, после чего определяется победитель.
Такой формат делает процесс обучения более эмоциональным и мотивирует пользователей совершенствовать навыки.
Последовательность действий
Во втором режиме пользователь должен правильно расположить этапы создания рисунка.
Это позволяет закреплять знания и лучше запоминать технику выполнения латте-арта.
Дополнительно была реализована система развития пользователя:
-
Уровни
-
Достижения
-
Лидерборды
-
Рейтинги
-
Статус аккредитованного судьи
Все игровые элементы направлены на повышение вовлеченности пользователей и стимулирование регулярной практики.
Подготовка к разработке
После завершения проектирования все материалы были
подготовлены для передачи разработчикам.
Заказчик получил:
Структурированный
Figma-проект
Интерактивный
prototype
Готовые
компоненты
Графические
ассеты
Описание
компонентов
Правила использования
дизайн-системы
Это значительно сокращает сроки последующей
реализации мобильного приложения.
Testing
На этапе проектирования проводилась проверка логики
пользовательских сценариев и согласованности интерфейсов.
Особое внимание уделялось:
Корректности пользовательских
переходов
Целостности
дизайн-системы
Единообразию
компонентов
Полноте
состояний экранов
Удобству
навигации
Перед передачей проекта была выполнена финальная проверка макетов
и согласованности всех экранов.
Передача проекта
После завершения работ заказчику был передан полный комплект материалов
для дальнейшей разработки мобильного приложения.
В состав переданных материалов вошли:
Макеты экранов
Интерактивный
prototype
Design system
UI Kit
Ассеты
Структура пользовательских
сценариев
Работы были выполнены в полном объеме и приняты заказчиком без замечаний.
Result
В результате проекта удалось создать полноценную основу будущего
мобильного приложения по обучению латте-арту.
Разработанная дизайн-система позволяет без существенных изменений масштабировать продукт, добавлять новые игровые режимы, обучающие материалы и функции административной панели.
Благодаря предварительной аналитике и проектированию удалось сформировать логичную структуру интерфейса, сократить потенциальные сложности на этапе разработки и обеспечить единый визуальный стиль всего продукта.
Review
the client
Если честно, сначала думала, что получится просто "красивый дизайн". В итоге ребята прям погрузились в саму идею продукта. Много моментов подсказали сами, продумали логику, о которой я даже не задумывалась.
Особенно понравилось, что все получилось цельно, а не просто набор экранов. Теперь есть понимание, как приложение должно работать дальше. Спасибо большое!
Комментарий
the manager
of the project
Artur Kherumov
Project manager
При работе над проектом нашей задачей было не просто перенести существующие карточки в цифровой формат. Мы стремились создать продукт, который будет мотивировать пользователей регулярно практиковаться, соревноваться и развивать свои навыки.
Именно поэтому большое внимание было уделено аналитике, пользовательским сценариям и созданию масштабируемой дизайн-системы, которая станет надежной основой для дальнейшего развития приложения.