Сегодня расскажем, как в сжатые сроки превратить PWA в современное удобное приложение, отвечающее современным тенденциям. А еще подтянуть UX, сделать узнаваемый визуал и не продолбать сроки. На связи, к стати, снова я, Антон Кравченко — основатель дизайн-студии Crauch: —)
Ешь Деревенское
Это онлайн-агрегатор и сервис доставки фермерских продуктов. Поставщиками платформы являются малые и средние фермерские хозяйства, локальные семейные производители продуктов питания с чистым составом. Ребята доставляют fresh и ultra-fresh продукты в Москве, Санкт-Петербурге, Дубне, Дмитрове, Твери, Нижнем Новгороде.
История
У ребят уже вовсю работал сайт (который, кстати, мы и дизайнили), а вот на телефонах было лишь простое PWA — дубликат мобильной версии сайта в приложении. Но настало время расти, случился ребрендинг сервиса, поэтому потребовалось за короткий срок продумать и создать полноценное приложение в новом дизайне, современное и удобное.
С дизайн-студией Crauch мы уже работали: ребята закрыли проект с полным ребрендингом сайта, хорошо себя показали. Поэтому мы решили продолжать работу над приложением вместе.
Какую планку ставили себе
По мимо бизнес-задачи — сделать приложение, внутри студии тоже забились на определенные цели в проекте:
- Добавить больше интересных визуальных приемов, отталкиваясь от брендбука
- Подтянуть все пользовательские сценарии и микровзаимодействия с точки зрения UX
- Сделать лучше мобильной версии сайта с точки зрения удобства и простоты использования
Вначале был роадмап
На созвоне с клиентом (менеджером проекта и разработкой) обсудили план работ, новые функциональности, определились со стеком — приложение будет на флаттере, и сроками — полтора месяца. Чтобы ускорить процесс, договорились работать итерациями — отдавать макеты в разработку по частям и параллельно с разработкой. Мы составили в Notion роадмап, согласовали, поэтому весь процесс был прозрачным. Можно было посмотреть в любой момент, на каком этапе мы находимся.
От бенчмаркинга к быстрым прототипам
Сперва мы проанализировали PWA-шку, посмотрели что там не так, какие есть проблемы и затыки.
После, провели бенчмаркинг — изучили приложения конкурентов. Прошли их основные сценарии, определили паттерны, собрали полезные механики. В итоге мы взяли только лучшие практики конкурентов, но учли специфику нашего сервиса. Результатом стала улучшенная логика приложения, по сравнению с предыдущей версией.
Оперативно нарисовали прототипы. Посмотрели на них с клиентом свежим взглядом. Отсекли ненужные функции и оставили только то, что нужно было в MVP. Что-то поменяли местами, какие-то блоки соединили. Посмотрели досконально на все мелочи и таким образом проапгрейдили PWA-шку.
В итоге получилась карта кликов или бизнес-логика приложения:
Еще понадобился день, чтобы внести минимальные корректировки. Итак, согласовали с менеджером и поехали дальше.
Разработка дизайна началась с карты кликов. Ребята настояли ее сделать в самом начале процесса и это оказалось правильным — облегчило нам работу в будущем.
А тестировали ли?
С клиентом решили пойти по концепции: «запустить, а потом шлифовать». Поэтому, в первой версии опирались на накопленный опыт работы с клиентом и бенчмаркинг-анализ.
Так как изначально мы делали PWA, сам сайт сервиса, поддерживали его в течение 2-х лет, получали обратную связь — в целом понимали, какие моменты нужно подтянуть в новой версии приложения.
Дизайн-концепция
За базу взяли дизайн главной странички и каталога, оттолкнулись от прототипов и брендбука и сделали версию 2.0 приложения «Ешь Деревенское». Вот что вышло:
Получилась удобная для пользователя, визуально привлекательная MVP-шка, в которую добавили то, чего недоставало предыдущей версии.
Теперь разберу чуть подробнее детали
Выбор адреса
Теперь взаимодействие начинается с приложением начинается с простого онбординга и ведет на выбор адреса доставки.
Главный экран
На главном экране упростили выбор типа доставки — вместо раскрывающегося списка теперь простой свитчер между экспресс- и обычной доставкой. Также, добавили очевидный поиск, который был скрыт в PWA.
С точки зрения структуры MVP главного экрана имел такие вот разделы:
- Подборки
- Промо-баннер
- Спец-предложения
- Карточки каталога
- Новинки
- Ответы на вопросы
Каталог
Немного упростили навигацию — добавили вспомогательные кнопки в категории, чтобы быстро переключаться по нужным подкатегориям, а еще, в общем листинге теперь есть заголовки подкатегорий, чтобы не потеряться. Вот 2 флоу для сравнения:
Фильтры
Собрали элементы фильтров для всех случаев жизни. Теперь, категорийному отделу достаточно выбрать нужный тип фильтра в админке и заполнить его данными
Карточка товара
Тут просто покажу немного красоты, поскольку кроме визуала тут почти ничего не изменилось
Личный кабинет
А вот личный кабинет изменился сильно :) Мы перепроектировали его так, что выносим самые нужные разделы в первый экран, а остальное прячем и снижаем акцент.
Можете сравнить
Приходилось переключаться на каждый раздел, чтобы найти самое важное. Теперь же — главное на главном.
Мелочи
Добавили виджет статуса заказа на главный экран — максимальная наглядность и удобство
Еще, добавили историю заказов в карточку подборок. Она появляется, когда вы сделаете первый заказ
поигрались с авторизацией
Учли все состояния сниппетов товаров
Придумали, как не плодить этажи и показать, сколько осталось до минимальной доставки
и еще тонну мелочей, связанных с UX и UI :—)
Дизайн система
Чтобы ускориться, упростить жизнь себе и другим, а еще, чтобы масштабировать приложение в будущем — одновременно пилили дизайн-систему. Это помогло создавать страницы быстрее.
Приложение собирали как конструктор. Некоторые экраны разработчики могли сделать сами, а нам достаточно было проконтролировать качество реализации.
Сперва сверстали все элементы из UI-kit, а потом на их базе собирали новое приложение как конструктор. В моменте, при разработке с полного нуля, она послужила своевременным и нужным инструментом, с помощью которого ставились задачи на верстку, контролировался результат. Да и в целом дизайн-система позволила значительно ускорить разработку приложения: пока дизайнились экраны, параллельно верстались элементы.
Авторский надзор
Чтобы все было как мы задумали — проводили ревью верстки и плотно взаимодействовали с разработчиками
И в итоге
Уложились в срок и за полтора месяца задизайнили MVP современного мобильного приложения в стилистике бренда. Заморочились над деталями, сохранили важные функции с точки зрения бизнеса, добавили новые, дотюнили UX. Запустились в срок. Ура :)
Получилось современное и красивое приложение, которое соответствует всем трендам UX, полностью конкурентноспособное по отношению к другим игрокам рынка.
Продолжаем поддерживать цифровые продукты ребят — отрисовываем интерфейсы для мобильного приложения и сайта, работаем над новыми лендингами, перерабатываем страницы, совершенствуем UX.
Скачать и протестировать приложение «Ешь Деревенское» можно в AppStore или GooglePlay.
А если вам интересно, как мы делаем такие сервисы, как заморачиваемся над деталями, какой у нас подход — подписывайтесь на наш телеграм-канал. Там я делюсь новостями студии, деталями проектов, кейсами и подходами. Залетайте → @crauchru
Не слышала раньше про EД, но новый интерфейс оч наполнил Вкусвилл
не знаю, что тут ответить)