Стажер
Пока не работает баристой, либо имеет мало опыта. Хочет научиться этой профессии.
Латте-Арт - цифровая платформа для обучения бариста с игровыми механиками
Как мы превратили набор обучающих карточек по латте-арту в современный мобильный продукт с геймификацией, соревнованиями и системой развития пользователей
Латте-Арт
Цифровая платформа
Как мы превратили набор обучающих карточек по латте-арту в современный мобильный продукт с геймификацией, соревнованиями и системой развития пользователей
О проекте
К нам обратился заказчик, который уже обладал готовым образовательным продуктом - набором физических карточек для обучения латте-арту. Карточки успешно использовались в процессе обучения бариста и содержали пошаговые инструкции по созданию рисунков на молочной пене.
Основной задачей проекта стало создание мобильного приложения, которое позволило бы перенести существующую методику обучения в цифровую среду, сделать процесс более удобным, современным и вовлекающим.
Помимо простого просмотра карточек необходимо было реализовать игровые сценарии, систему прогресса, рейтинги пользователей и соревновательные режимы, способные повысить вовлеченность учеников и стимулировать регулярную практику.
Главной целью проекта стала разработка единой дизайн-концепции приложения, полностью готовой к последующей разработке мобильного продукта для iOS и Android.
Задача
проекта
Перед нашей командой стояла задача спроектировать интерфейс приложения, которое одновременно должно было выполнять сразу несколько функций:
Служить интерактивным учебником
по латте-арту
Обеспечивать быстрый доступ
к большому количеству обучающих карточек
Мотивировать пользователей регулярно возвращаться в приложение
Объединять обучение и игровые механики
Быть одинаково удобным как для начинающих бариста, так и для опытных специалистов
Особое внимание требовалось уделить масштабируемости интерфейса, поскольку в дальнейшем планировалось развитие проекта и расширение функциональности административной панели.
Наше
решение
Мы предложили не ограничиваться разработкой отдельных экранов приложения,
а построить полноценную дизайн-систему, которая станет фундаментом для
дальнейшего развития продукта.
В основу решения легли несколько
ключевых принципов:
1
Единый
визуальный язык
2
Понятная
навигация
3
Высокая скорость
освоения интерфейса
4
Максимальный акцент на
образовательном контенте
5
Использование игровых механик
как инструмента повышения
вовлеченности
Такой подход позволил создать не просто красивый интерфейс,
а целостную цифровую экосистему обучения.
Проект
в цифрах
Все показатели основаны на техническом задании
и результатах выполненных работ.
160
Обучающих
карточек
4
Полноценных
набора карточек
2
Игровых
режима
До
4
участников
одновременно
5
Уровней
сложности рисунков
5
Уровней
развития пользователя
Более
10
ключевых
экранов приложения
Единая
дизайн-система
Кликабельный
прототип
Подготовка полного комплекта
материалов для разработки
Готовый
продукт
После завершения проекта заказчик получил полностью подготовленный
комплект дизайн-материалов:
Дизайн-макеты экранов
Кликабельный прототип
Дизайн-систему
UI Kit
Описание пользовательской логики
Материалы для передачи в разработку
На момент завершения этапа выполнялась подготовка мобильного приложения
к дальнейшей разработке.
Этапы реализации
Аналитика
Работа началась с анализа существующего образовательного продукта.
Команда подробно изучила структуру карточек, способы их использования и особенности обучения латте-арту. После этого были определены основные пользовательские сценарии взаимодействия с приложением.
На основании проведенного анализа были сформированы:
- User Flow
- Логика переходов между экранами
- Основные пользовательские сегменты
- JTBD-сценарии
- Структура навигации приложения
Основные пользовательские сегменты
Опытный бариста
Уже работает в индустрии, но хочет повышения квалификации.
Судья
Опытный бариста, который судит соревнования барист в «Баттлах».
JTBD
сценарии
Хочет
Увидеть свою статистику
Чтобы
Знать насколько прокачался профиль
Хочет
Посмотреть выученные карты
Чтобы
Повторить пройденный материал
Хочет
Сразиться с игроками в «Баттле»
Чтобы
Прокачать навыки и выучить новое
Хочет
Получить приглашение на судейство в баттле
Чтобы
Принять участие в баттле как судья
Прототипирование
Следующим этапом стало создание интерактивного прототипа.
Главной задачей было проверить удобство навигации и убедиться, что пользователь сможет без лишних действий переходить между обучением, игровыми режимами, рейтингами и личным кабинетом.
В процессе проектирования была сформирована логичная структура приложения, позволяющая быстро находить необходимый материал независимо от опыта пользователя.
После согласования пользовательских сценариев был подготовлен кликабельный прототип в Figma.
