Проектирование и создание макетов мобильного приложения для HoReCa
Дата
2024
Экспертизы
Аналитика
Проектирование
Дизайн
Тип продукта
Мобильные приложения
Интерфейсы и дашборды
Веб дизайн
Отрасль
HoReCa
Задача
Заказчик обратился к нам за дизайном экранов мобильного приложения для кофейни в Дубае.
В условиях высокой конкуренции нужно предложить покупателям удобный способ заказать и быстро забрать любимый напиток. Один из таких способов — заказ через мобильное приложение. Именно его решил использовать наш клиент.
Нас попросили создать приложение, в котором гость сможет выбрать продукт, указать предпочтения (объем и добавки) и оформить заказ онлайн. При этом оплата происходит на кассе во время получения напитка — картой или наличными. Так приложение помогает клиентам экономить время, а кофейне — выстраивать быстрый и удобный процесс взаимодействия с гостями.
Главная цель — создать комфортное пространство для заказа, чтобы пользователи могли легко взаимодействовать с кофейней. Приложение должно наладить прямую связь с гостями, обеспечить положительный опыт и вызвать желание вернуться.
Задачи:
- На основе концепции бренда спроектировать user flow и создать дизайн приложения.
- Сделать экран с онбордингом, чтобы познакомить пользователя с интерфейсом приложения.
- Добавить регистрацию по номеру телефона.
- Оформить каталог с продукцией кофейни и добавить возможность заказа.
- Разработать две версии приложения — на английском и арабском языках.
- Предложить варианты оформления акций для пользователей.
Решение
Мы разработали минималистичную концепцию на основе референсов заказчика и фирменного стиля кофейни, включая дизайн стаканчиков, а также уже существующих идей по продвижению продукта.
Интерфейс с узнаваемым фирменным стилем облегчает пользователям работу с приложением и поддерживает имидж бренда.
Интерфейс приложения
Также собрали UI kit с основными элементами приложения: цветовая гамма, шрифты, иконки, карточки товаров, лого и другие повторяющиеся блоки. Так как кофейня была стартапом, было важно учесть, что в будущем понадобятся доработки интерфейса. Эти артефакты нужно было передать заказчику.
В интерфейсе реализовали все функции и экраны, необходимые для пути клиента: от регистрации до оформления заказа и бонусной системы.
Приветственный экран
Первое, что видит пользователь — это загрузочный экран и приветствие. Сначала мы показали название кофейни и слоган компании. Затем видеоролик и краткое объяснение того, где найти кофейню и как получать награды.
Помимо приветствия есть краткий онбординг — как пользоваться приложением. Такой подход способствует успешной адаптации аудитории и снижает риск потери пользователей на этапе знакомства.
Приветственные экраны
Регистрация
Для прохождения регистрации пользователю нужно подтвердить свой номер телефона. Он может выбрать любую страну, заполнить данные, получить код верификации — и перейти к основному функционалу.
В кофейне действует акция «Приведи друга», поэтому в окне регистрации можно указать его или ее номер и получить напиток в подарок. Это не только мотивирует новую аудиторию к установке приложения, но и способствует органическому росту клиентской базы за счет рекомендаций от лояльных пользователей.
Экран регистрации в приложении
Меню с карточками товаров и оформление заказа
В меню даны карточки товаров с изображением продукта, названием, стоимостью и его весом и объемом.
Меню товаров в приложении
Когда пользователь открывает карточку — он выбирает объем напитка и добавки к нему: сиропы, сахар или мед, растительное или коровье молоко и так далее. Затем добавляет кофе и переходит в корзину. Клиент может сделать заказ, но оплата происходит непосредственно в кофейне во время выдачи товара.
Покупка отображается на домашнем экране — пользователь видит место, где забирать напиток. А если нажать на кнопку «Просмотр заказа» — можно получить полную информацию.
Гибкий интерфейс настроен с учетом специфики продукта: кофе — напиток, который требует индивидуальных опций, особенно для искушенной публики. Возможность выбора подчеркивает заботу о клиентах и высокий уровень сервиса.
Оформление заказа
После получения напитка на домашнем экране будет отображаться выполненный заказ и товары, которые в нем были. Для удобства мы добавили функцию повторения покупки.
Новые заказы отображаются сверху, а прошлые — под ними.
Бонусы и акции
На домашнем экране в начале показываются сезонные предложения и истории, а затем — бонусная программа и акции. Например, клиент может привести друга или набрать отметки за заказы — и получить напиток в подарок. Приложение дает возможность клиентам накапливать бонусы. Все привилегии хранятся в одном месте и под рукой. Подобное внимание к деталям подчеркивает клиентоориентированность кофейни.
Подарок находится в правом верхнем углу — пользователь видит, сколько бесплатных напитков он может выбрать в меню.
Акции на домашнем экране
Пользовательские настройки
В настройках пользователь может поменять свои данные, посмотреть историю заказов, выбрать параметры уведомлений, оценить приложение и обратиться в техподдержку. Простое управление и возможность быстро обратиться за помощью укрепляет доверие к бренду и показывает уровень сервиса.
Настройки приложения
Английская и арабская версии приложения
Приложением в Дубае будет пользоваться разная аудитория — сейчас город является точкой притяжения для людей со всего мира. Поэтому мы сделали две версии — английскую для иностранцев и арабскую для местных жителей.
Английская и арабская версии приложения
Результаты
У нас получился удобный интерфейс с минималистичным дизайном. Мы проработали пользовательский путь, что позволяет аудитории лучше ориентироваться в приложении и оформлять заказы всего за несколько кликов.
Итоги проекта:
- Улучшение пользовательского опыта. Минималистичный дизайн и интерактивный онбординг помогают пользователям быстро ознакомиться с приложением и начать с ним работать.
- Две версии приложения. Внедрение двух языков (английского и арабского) расширяет потенциальную аудиторию приложения, делая его доступным для разных групп пользователей в регионе.
- Повышение лояльности. Бонусные программы, акции и возможность быстро повторить заказ стимулируют частые визиты и участие пользователей. Это укрепляет лояльность к бренду.
- Взаимодействие с клиентом. Возможность регистрироваться по номеру телефона, а также выбирать точку выдачи и состав заказа значительно упрощает процесс взаимодействия с кофейней и способствует росту клиентской базы.
Простой функционал. Проработанная структура интерфейса, включающая интуитивно понятные карточки товаров и гибкость настроек, делает приложение удобным инструментом для заказа и навигации.
Услуги из кейса
