Дизайн мобильного приложения «Ешь Деревенское»

Главное о кейсе

В итоге, мы нарисовали MVP версию за 1,5 месяца, сохранив самые важные функции с точки зрения бизнеса в первой версии. Это позволило выпустить продукт на рынок быстрее, а людям — комплексно пользоваться продуктами «Ешь Деревенское»!

Сейчас продолжаем заниматься дизайн-поддержкой приложения.

Как проект изменил жизнь пользователей

Благодаря обновлённому дизайну и удобному интерфейсу приложение помогает пользователям:
• Быстрее ориентироваться и находить нужные разделы;
• Заменять продукты, которых нет в нужную дату доставки;
• Удобно отслеживать историю заказов;
• С интересом зарабатывать баллы и получать подарки;
• Быть в курсе актуальных акций и новинок кофеен.

Бизнес-задача и ее решение

Задача была: задизайнить MVP нового, современного мобильного приложения в короткие сроки

Внутри студии ставили себе такие цели:
– сделать дизайн узнаваемым, комфортным для пользователей и удобным для мобильных устройств.
– привнести больше интересных визуальных приемов, отталкиваясь от брендбука.
– подтянуть все сценарии и микровзаимодействия до минимальной планки рынка с точки зрения ux.
– сделать лучше, чем была мобильная версия сайта

Как решали задачу:

1. Чтобы справиться быстро и качественно проговорили этапы работы с дизайнером + арт-директор контролировал качество всего проекта.

2. Составили роадмап (диаграмму Ганта) проекта в Notion и декомпозировали на задачи. Это позволило всем участникам проекта отслеживать прогресс в реальном времени.

3. Проанализировали прошлое PWA приложение, отрисовали быстрые прототипы и согласовали с клиентом карту кликов, отбросив лишние экраны и действия.

4. Постранично отрисовывали макеты экранов и итерационно отдавали их в разработку, чтобы запараллелить эти процессы.

5. Параллельно сделали дизайн-систему, что ускорило работу по сборке всех экранов— дизайнерам не приходилось заново отрисовывать повторяющиеся компоненты. Также, благодаря дизайн-системе некоторые экраны разработчики могли собирать сами «наживую», а нам достаточно было проконтролировать качество реализации.

Получилось современное мобильное приложение, отражающее новую стилистику бренда, при этом удобное.

Крафт (мастерство), реализация, технические детали

Взяв за основу пластику логотипа, принципы и приемы из брендбука — перенесли это в интерфейс:
• Иконки и иллюстрации в характерной пластике логотипа
• Пластика плашек — не всегда ровной, а более неряшливой формы
• Из необычного — добавили девайдеры с прерывистой линией. Т.к пунктир — один из визуальных приемов коммуникации бренда

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

Инсайты, гипотезы, процесс создания и взаимодействия с заказчиком

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

Чтобы все было как мы задумали — проводили ревью верстки и плотно взаимодействовали с разработчиками.

Прочая информация о кейсе

Ешь Деревенское — онлайн-сервис доставки натуральных фермерских продуктов на дом от локальных производителей. Доставляют ребята в Москве, Санкт-Петербурге, Дубне, Дмитрове, Твери, Нижнем Новгороде.

Долгое время у сервиса на мобильных устройствах было лишь простое PWA — то есть, дубликат мобильной версии сайта в приложении. Однако, в связи с ребрендигом и желанием расти потребовалось за короткий срок собрать, продумать и задизайнить полноценное приложение.

Ниже делимся, чего сделали и каких результатов достигли.

Скриншоты