Coffee Like. Проектирование и дизайн мобильного приложения

Coffee Like хотела дать клиентам возможность заказать и оплатить кофе заранее. Мы провели аналитику и спроектировали мобильное приложение для этой задачи. Заказчик получил готовые макеты для iOS и Android.

На старте проекта в 2018 году Coffee Like насчитывала 738 кофеен в России и СНГ. Сеть работала в формате «кофе с собой», а клиенты ценили возможность быстро купить напиток. При этом покупка в кофейне могла потребовать ожидания в очереди.

Coffee Like хотела привлекать новых клиентов и удерживать существующих. Приложение должно было перенести оформление и оплату заказа в телефон, а также наладить связь между брендом, отдельными кофейнями и покупателями. Для этого заказчик рассчитывал использовать сообщения об акциях и предложениях и программу лояльности. Нам предстояло спроектировать путь клиента от выбора кофейни до получения напитка, учитывая желание людей заказывать на определённое время и самим выбирать ингредиенты.

Заказчик передал нам подробную информацию о целях, задачах и пожеланиях. Мы начали с аналитики: проработали проектную документацию и пользовательские истории, которые стали основой дизайна. Перед работой над интерфейсами изучили сайт, руководство по фирменному стилю и визуальную концепцию Coffee Like. Затем подготовили руководство по стилю приложения: определили цветовую палитру, типографику и компоненты для iOS и Android. При проектировании сверялись с рекомендациями Apple и рекомендациями по дизайну Material Design.

В макетах покупка начинается с выбора кофейни на карте: клиент видит её расположение, удалённость и режим работы. Затем открывает меню с реальными изображениями продукции, стоимостью, составом и объёмом напитков и десертов. Пользователи хотели сами выбирать ингредиенты, и мы предусмотрели настройку напитка: количество сахара, температуру, сиропы и добавки. Для предзаказа человек указывает время и место получения кофе, затем переходит к оплате. Мы спроектировали оформление и оплату в пару нажатий, предусмотрели разные способы онлайн-оплаты и применение промокодов на дополнительные скидки.

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

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

Заказчик предложил сделать программу лояльности в игровой форме, а образцом для её визуального оформления стала игра Two Dots. Мы изучили логику и дизайн её экрана рейтинга, работая над этой частью приложения. В спроектированной программе за покупку или выполнение задания клиент получает внутреннюю валюту, «лайкерсы». По мере их накопления растёт уровень пользователя, а за достижение нового уровня начисляются бонусы и подарки в виде напитков или десертов. В интерфейсе человек может посмотреть свой уровень, доступные задания и награды.

Для знакомства с предложениями сети мы спроектировали ленту новостей: в ней клиент мог узнавать о новинках, акциях и мероприятиях. Рекомендации учитывали его прошлые заказы, а о специальных предложениях Coffee Like сообщали уведомления на телефоне. В макетах также предусмотрели личный кабинет и профиль клиента.

За месяц мы отрисовали более 100 экранов для iOS и Android. Coffee Like получила готовые макеты клиентского приложения: исходная задача предзаказа и оплаты кофе была проработана на уровне пользовательских сценариев и дизайна.