Сегодня расскажем, как в сжатые сроки превратить 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
Наймите корректора, чтобы вычитывал ошибки в ваших текстах перед публикацией.
Не левые люди, а такое позволяете ((
"По мимо" прикольно же)
а зачем
Зачем?
Прежде всего непонятно ЧТО... А потом уже зачем.
Чтобы не есть пластмассовое из Пятёрочки, очевидно же.
Это очень актуальный вопрос. У людей с деревенской пищей ассоциируется здоровая еда. Но это ложная связь. Деревенская еда может быть более натуральной (и то не всегда). Но это не значит, что она полезная и вкусная.
Сколько стоит клиенту такая штука?
Или так: сколько в часах на ключевые этапы затрачено?
сложно сказать сколько стоит, но потратили 1,5 месяца в среднем. В команде был арт-дир, миддл и джуниор дизайнеры. В среднем ушло 280-300 часов +-
Фермерское - руками деланное?
Кто вам сказал, что "фермер - руками деланное"?
Фермер - это не тот, кто приусадебное хозяйство держит.
Это тот, что делает в мелких промышленных масштабах на своем оборудовании.
Фишка, которая сейчас продает фермерские продукты, - яйцо, мясо, овощи, фрукты без "химии".
Но как это проверить - покупатели в большинстве своем не знают. Но готовы платить 2-5Х от цены супермаркетов.
Я в своём роде тоже иногда фермер получается
не понял вопроса
Не слышала раньше про EД, но новый интерфейс оч наполнил Вкусвилл
не знаю, что тут ответить)
Интересный проект Ешь деревенское, общался с его создателем, даже сам открывал нечто подобное, так как вдохновился.
А по теме статьи, вышло неплохо, молодцы
спасибо огроменное!)
А можно было бы тоже самое сделать дешевле и быстрее, улучшив PWA-приложение?
Конечно можно сделать быстрее и дешевле если изначально закладывать при разработке, что будет pwa версия в виде мобильного приложения с другой бизнес логикой в отличии от мобильной версии.
Нет, потому что ребята пересаживались на flutter. А он в разы быстрее) глобально дизайн можно было переделать и на pwa, но тут глобально менялся фреймворк
Приложение красивое, но не очень рабочее. Если зайти в карточку товара из каталога, то назад в каталог уже не вернуться - не работает кнопка назад, не работает кнопка «каталог». Приложение обновлял, ios обновлял. Уже не раз на это натыкаюсь, и уже не раз это стало причиной, почему я так и не заказал (потому что выбесило).
Привет! Спасибо за фидбэк! Мы ребятам передавали эти штуки, должны пофиксить
1. Учитывая сжатые сроки, приложение получилось сырым, я правильно понимаю? Не лучше было бы протестировать его, чтобы баги не оттолкнули пользователей?
2. Ваша работа - это только дизайн макет? Кто писал само приложение в итоге?
3. Почему выбрали флаттер, а не нативную разработку?
4. Делали ли server driven ui?
1. Не сырым, а с ограниченным функционалом
2. Да. Писала команда разработчиков Ешь Деревенского.
3. Как минимум потому что приложение выглядит и работает одинаково на всех устройствах. Не приходилось бы рисовать 2 версии макетов и писать 2 версии приложений. Приоритет тут скорость и единые паттерны. А еще я эх, зачем а 2023 писать нативные приложения
4. Не уверен
фишка с корзиной и доставкой - огонь!
Можно так во все приложения ?
тогда надо чтобы весь фуд-тех у нас заказывал, ахахахаха)
Прикольно
спасибо)
Не краснеете из-за тухлой рыбы на макетах?
Неа)
Миленько получилось)
Спасибо!)
Один раз заказал это Ешь деревенское, второй раз не стал
окей)
илья аникиев лох какой то, надо де было такой бред высрать)
А тёмной темы не будет?)
Вы, вроде, дизайнеры, а сделали такую срань
проектировал подобное приложение недавно. В одиночку за 40 дней, не учитывая исследования. Забавно что результат у меня и у вас очень похож по многим решениям)