Вкусный редизайн: как мы сделали foodtech приложение «Ешь Деревенское» за 1,5 месяца

Сегодня расскажем, как в сжатые сроки превратить PWA в современное удобное приложение, отвечающее современным тенденциям. А еще подтянуть UX, сделать узнаваемый визуал и не продолбать сроки. На связи, к стати, снова я, Антон Кравченко — основатель дизайн-студии Crauch: —)

Это онлайн-агрегатор и сервис доставки фермерских продуктов. Поставщиками платформы являются малые и средние фермерские хозяйства, локальные семейные производители продуктов питания с чистым составом. Ребята доставляют fresh и ultra-fresh продукты в Москве, Санкт-Петербурге, Дубне, Дмитрове, Твери, Нижнем Новгороде.

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

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

• Добавить больше интересных визуальных приемов, отталкиваясь от брендбука
  
• Подтянуть все пользовательские сценарии и микровзаимодействия с точки зрения UX
• Сделать лучше мобильной версии сайта с точки зрения удобства и простоты использования

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

Сперва мы проанализировали PWA-шку, посмотрели что там не так, какие есть проблемы и затыки.

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

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

В итоге получилась карта кликов или бизнес-логика приложения:

Еще понадобился день, чтобы внести минимальные корректировки. Итак, согласовали с менеджером и поехали дальше.

С клиентом решили пойти по концепции: «запустить, а потом шлифовать». Поэтому, в первой версии опирались на накопленный опыт работы с клиентом и бенчмаркинг-анализ.

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

За базу взяли дизайн главной странички и каталога, оттолкнулись от прототипов и брендбука и сделали версию 2.0 приложения «Ешь Деревенское». Вот что вышло:

Получилась удобная для пользователя, визуально привлекательная MVP-шка, в которую добавили то, чего недоставало предыдущей версии.

Теперь разберу чуть подробнее детали

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

На главном экране упростили выбор типа доставки — вместо раскрывающегося списка теперь простой свитчер между экспресс- и обычной доставкой. Также, добавили очевидный поиск, который был скрыт в PWA.

С точки зрения структуры MVP главного экрана имел такие вот разделы:

• Подборки
• Промо-баннер
• Спец-предложения
• Карточки каталога
• Новинки
• Ответы на вопросы

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

Фильтры

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

Тут просто покажу немного красоты, поскольку кроме визуала тут почти ничего не изменилось

А вот личный кабинет изменился сильно :) Мы перепроектировали его так, что выносим самые нужные разделы в первый экран, а остальное прячем и снижаем акцент.

Можете сравнить

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

Добавили виджет статуса заказа на главный экран — максимальная наглядность и удобство

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

поигрались с авторизацией

Учли все состояния сниппетов товаров

Придумали, как не плодить этажи и показать, сколько осталось до минимальной доставки

и еще тонну мелочей, связанных с UX и UI :—)

Чтобы ускориться, упростить жизнь себе и другим, а еще, чтобы масштабировать приложение в будущем — одновременно пилили дизайн-систему. Это помогло создавать страницы быстрее.

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

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

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

Продолжаем поддерживать цифровые продукты ребят — отрисовываем интерфейсы для мобильного приложения и сайта, работаем над новыми лендингами, перерабатываем страницы, совершенствуем UX.

Скачать и протестировать приложение «Ешь Деревенское» можно в AppStore или GooglePlay.

А если вам интересно, как мы делаем такие сервисы, как заморачиваемся над деталями, какой у нас подход — подписывайтесь на наш телеграм-канал. Там я делюсь новостями студии, деталями проектов, кейсами и подходами. Залетайте → @crauchru