Latte Art - base background

Латте-Арт - цифровая платформа для обучения бариста с игровыми механиками

Как мы превратили набор обучающих карточек по латте-арту в современный мобильный продукт с геймификацией, соревнованиями и системой развития пользователей

Мобильное приложение User Flow Геймификация Прототипирование UI/UX Дизайн

Латте-Арт

Цифровая платформа

Как мы превратили набор обучающих карточек по латте-арту в современный мобильный продукт с геймификацией, соревнованиями и системой развития пользователей

О проекте

К нам обратился заказчик, который уже обладал готовым образовательным продуктом - набором физических карточек для обучения латте-арту. Карточки успешно использовались в процессе обучения бариста и содержали пошаговые инструкции по созданию рисунков на молочной пене.

Основной задачей проекта стало создание мобильного приложения, которое позволило бы перенести существующую методику обучения в цифровую среду, сделать процесс более удобным, современным и вовлекающим.

Помимо простого просмотра карточек необходимо было реализовать игровые сценарии, систему прогресса, рейтинги пользователей и соревновательные режимы, способные повысить вовлеченность учеников и стимулировать регулярную практику.

Главной целью проекта стала разработка единой дизайн-концепции приложения, полностью готовой к последующей разработке мобильного продукта для iOS и Android.

Latte Art - about screens

Задача
проекта

Перед нашей командой стояла задача спроектировать интерфейс приложения, которое одновременно должно было выполнять сразу несколько функций:

Latte Art - task icon 1

Служить интерактивным учебником
по латте-арту

Latte Art - task icon 2

Обеспечивать быстрый доступ
к большому количеству обучающих карточек

Latte Art - task icon 3

Мотивировать пользователей регулярно возвращаться в приложение

Latte Art - task icon 4

Объединять обучение и игровые механики

Latte Art - task icon 5

Быть одинаково удобным как для начинающих бариста, так и для опытных специалистов

Особое внимание требовалось уделить масштабируемости интерфейса, поскольку в дальнейшем планировалось развитие проекта и расширение функциональности административной панели.

Наше
решение

Мы предложили не ограничиваться разработкой отдельных экранов приложения,
а построить полноценную дизайн-систему, которая станет фундаментом для
дальнейшего развития продукта.

В основу решения легли несколько
ключевых принципов:

1 Latte Art - solution icon 1

Единый
визуальный язык

2 Latte Art - solution icon 2

Понятная
навигация

3 Latte Art - solution icon 3

Высокая скорость
освоения интерфейса

4 Latte Art - solution icon 4

Максимальный акцент на
образовательном контенте

5 Latte Art - solution icon 5

Использование игровых механик
как инструмента повышения
вовлеченности

Такой подход позволил создать не просто красивый интерфейс,
а целостную цифровую экосистему обучения.

Проект
в цифрах

Все показатели основаны на техническом задании
и результатах выполненных работ.

160

Обучающих
карточек

Latte Art - stats 1
4

Полноценных
набора карточек

2

Игровых
режима

Latte Art - stats 2
До 4

участников
одновременно

5

Уровней
сложности рисунков

5

Уровней
развития пользователя

Более 10

ключевых
экранов приложения

Latte Art - stats 3
Latte Art - star

Единая
дизайн-система

Latte Art - star

Кликабельный
прототип

Latte Art - star

Подготовка полного комплекта
материалов для разработки

Готовый
продукт

После завершения проекта заказчик получил полностью подготовленный
комплект дизайн-материалов:

Latte Art - star blue

Дизайн-макеты экранов

Latte Art - star blue

Кликабельный прототип

Latte Art - star blue

Дизайн-систему

Latte Art - star blue

UI Kit

Latte Art - star blue

Описание пользовательской логики

Latte Art - star blue

Материалы для передачи в разработку

На момент завершения этапа выполнялась подготовка мобильного приложения
к дальнейшей разработке.