04 февраля 2022
Мобильное приложение для сервиса быстрой доставки «Все Прилавки»
Собрали прототип, а потом и дизайн мобильного приложения для доставки продуктов из магазинов «у дома».
ПАША, ПРИВЕТ! ЯБЛОЧКИ БРАТЬ БУДЕШЬ?
У каждого на районе есть местечковый несетевой магазин типа «Берёзка», «Андрей» или классический «Продукты». Обычно таким магазинам не страшно время, всех их знают и любят, а в самом магазине царит семейная атмосфера.

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

Обычно такие магазины далеки от прогресса и ни о какой доставке продуктов в них даже и не думают. Сервис «Все Прилавки» появился как раз для того, чтобы дать этим душевным магазинам много технологичности и организовать быструю доставку продуктов на дом.

Мы были счастливы сделать новый дизайн мобильного приложения для конечных пользователей. Теперь вы можете заказать продукты из «Марии» прямо домой. Одно только заказать нельзя — душевные разговоры с продавщицей. Вы уж проведывайте её время от времени, не забывайте.
КОНКУРЕНТОВ НУЖНО ЗНАТЬ В ЛИЦО
Работу начали с подробного изучения конкурентов. Мы об этом смело говорим, потому что конкурентов изучаем не для того, чтобы содрать всё под копирку. Изучая конкурентов, мы перевариваем мировой и локальный опыт, осознаём решения и понимаем, как будет работать наше приложение.

Изучать конкурентов — правильно и совсем не стыдно. Наоборот: будет очень странно, если кто-то возьмётся за такую работу и предварительно не изучит рынок.

Мы отобрали 15 приложений, которые занимаются доставкой и подробно их изучили. Сделали наборы скриншотов в Figma, чтобы время от времени смотреть на них.
ПИШЕМ СЦЕНАРИЙ
Ключевой задачей было сделать так, чтобы пользователь как можно проще сделал свой первый поиск и заказ. Мы не хотели прямо со старта мучить юзера заполнением платежной информации. Прежде всего — целевой поиск, а заполнение всех необходимых полей — уже в процессе заказа.

Составили несколько тематических блоков-сценариев того, как пользователь взаимодействует с приложением. А потом прорабатывали эти блоки каждый в отдельности.
1
Онбординг
Стартовые экраны, которые пользователь видит сразу после запуска приложения. Их цель — за несколько секунд рассказать юзеру о том, куда он попал.
2
Каталог прилавков
Сразу после онбординга приложение понимает локацию пользователя и находит магазины рядом. На этом этапе можно поиграть с поиском, фильтрами, посмотреть прилавки на карте. Задача этого сценария — перейти к заказу в конкретном магазине.
3
Каталог товаров
Пользователь изучает товары конкретного магазина. Ходит по категориям, ищет продукты, просматривает карточки товара и добавляет необходимые продукты в корзину. Цель — переход к оформлению покупки.
4
Оформление заказа
Можно посмотреть состав корзины, выбрать способ доставки и способ оплаты, совершить заказ и отслеживать статус заказа.
А ещё можно что-то дозаказать, если забыли изначально.
5
Профиль
Это уже косвенный сценарий, но раздел профиля тоже нужен :)
Здесь можно редактировать свой адрес доставки, изменять платёжную информацию, добавлять дисконтные карты, смотреть историю заказов и чатиться с саппортом.
ПРОЕКТИРУЕМ СЦЕНАРИИ ДРУГ ЗА ДРУГОМ
Сценарии готовы, а значит, пора их прорабатывать по отдельности и прототипировать конкретные экраны. На этом этапе мы совсем не думаем о красоте и дизайне, а только проектируем пользовательские сценарии. На первом месте — логика и удобство. Именно поэтому мы проектируем в чёрно-белых тонах, чтобы не отвлекаться на красивости.

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

Мы не будем описывать весь процесс проектирования каждого сценария, потому что это будет очень долго и скучно. Просто поверьте, что работы было сделано очень много. Запрототипировали все экраны, проработали состояния карточек, придумали фильтры, написали все тексты, сделали интерактивный прототип и ещё много чего. Некоторые прототипы экранов вы можете полистать в карусели.
Презентацию клиенту мы проводим либо созвоном, либо с помощью поясняющее видео, где рассказываем про все наши мысли и решения. Один из примеров презентации промежуточной работы — ниже.
СЦЕНАРИИ ГОТОВЫ — НАВОДИМ КРАСОТУ
Конечно же, очень и очень важно, чтобы такое приложение было не просто удобным, но ещё и красивым. Так что после этапа прототипирования наступает дизайн.

Задача эта была приятна тем, что у команды «Все прилавки» уже был готовый классный брендбук и даже свой персонаж, которого мы тоже с удовольствием использовали в дизайне.

Но, к слову говоря, если у вас нет брендбука — ничего страшного. Даже без него мы сделаем сочно :)

Так же, как и в проектировании, в дизайне всегда участвуют два человека. Один создаёт дизайн, а второй делает глубокое ревью работы первого.
Абсолютно для каждого интерфейса мы создаём UI-kit. Это набор элементов, который наводит порядочек и пригодится при работе с текущим дизайном, при разработке и добавлении новых экранов в приложение.

В нём: типографика, элементы и поля ввода в различных состояниях, цвета, иконки, различные функциональные элементы.
ПЕРЕДАËМ МАКЕТЫ В РАЗРАБОТКУ
У команды «Все прилавки» своя команда разработки, поэтому код для приложения они написали внутри проекта. Все наши макеты в Figma мы снабдили необходимыми комментариями и всегда были на связи с разработчиками. Если появлялись вопросы — быстренько отвечали.
1
16 НЕДЕЛЬ
от брифа до готового дизайна приложения
2
130 ЭКРАНОВ ПРОТОТИПОВ
и интерактивный работающий макет
3
150 ЭКРАНОВ С ДИЗАЙНОМ
и один полноценный UI-Kit
Паша Старожук
Главный по UX
Нужно больше классных доставок. Тем более, сама идея очень классная: дать небольшим магазинам возможность организовать технологичную и быструю доставку. Приятно приложить руку к такому правильному делу.

Я и сам постоянно заказываю продукты на дом, поэтому с удовольствием оказался с другой стороны и поработал над всеми пользовательскими сценариями.

Работа эта доставляет не только умственную радость, но и физическую: пока тестировали конкурентов, назаказывали себе кучу продуктов :)

Хотите так же круто?

Оставьте номер или email. Обсудим детали и сделаем, как для себя!