Доставка Япоки: как создать приложение для будущего энтерпрайза

Наш опыт разработки приложения для доставки с большими амбициями и сложной архитектурой. Все началось с мечты клиента – сделайте так, как у энтерпрайза (референс – «Додо пицца»). Она сбылась, но с большим количеством технических нюансов, которые нам в ходе проекта все-таки удалось решить. Кейс будет интересен и брендам, и разработчикам: он рассказывает, как не споткнуться о множество подводных камней, с которыми вы неизбежно столкнетесь в проектах такого масштаба.

Что хотел от приложения клиент?

• увеличить количество онлайн-заказов
• повысить средний чек и занять большую долю рынка
• выйти на уровень одного из крупнейших сервисов доставки еды в стране

Что сделали мы?

• приложение для доставки на React Native для iOS и Android с гибким управлением деталями заказа

Одно дело – создавать приложение, как дополнительный канал продаж в поддержку оффлайн-заведений. Совершенно другое – превратить продукт во флагманское направление, чтобы в перспективе составить конкуренцию самым крупным брендам в сегменте. И все это в условиях быстрого роста клиента.

Мы сделали ставку на максимальное удобство в оформлении заказов, из-за которого пользователям хотелось бы возвращаться в приложение снова и снова.

Клиент обратился к dev.family по рекомендации наших партнеров. Но забрать проект нам помогли большой опыт в foodtech и крутое портфолио в разработке на React Native.

На тот момент Япоки уже был опытным foodtech брендом с развитой сетью, в которой работали:

• 3 собственных ресторана.
• 2 партнёрских заведения.
• серия dark kitchen для быстрой доставки.

Заказы на доставку оформлялись через сайт, который давал сети следующие объемы:

Релиз мобильного приложения должен был усилить продажи в онлайне, что в дальнейшем и произошло.

Спойлер: было много челленджей

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

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

Как было и как стало можно посмотреть тут:

Пробежимся по приложению и расскажем о его классных фишках и деталях. А также, о сложностях и вызовах, с которыми мы столкнулись.

После авторизации пользователь может выбрать формат выдачи заказа и перейти к каталогу. Все позиции разбиты по категориям – «Роллы», «Пицца», «Закуски» и так далее. Специальный виджет также показывает среднее время доставки по указанному адресу, которое меняется в зависимости от уровня загрузки ближайшего ресторана. Фишкой главного экрана является онлайн-витрина – блок «Не нужно ждать». В него попадают уже приготовленные заказы, от которых в самый последний момент отказались. Здесь пользователи могут выбрать блюдо из этого раздела, если хотят более быструю доставку.

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

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

Поиск товаров по названию и описанию также выполнялся на стороне клиента. Мы настроили процесс так, что из всего массива продуктов в выдачу попадали только точные совпадения. Так система могла показывать нужные блюда по запросу без ошибок.

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

Для оплаты заказа можно использовать бонусы программы лояльности в двух вариантах – оплатить ими 100% или 50% общей стоимости заказа с учетом минимального лимита на бесплатную доставку. Другие интересные фишки и примеры геймификаций для программ лояльности вы найдете в этой статье.

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

Пользователь может выбрать время доставки, способ оплаты и формат выдачи заказа – по указанному адресу или с подачей на конкретный номер столика в ресторане. Если какое-то блюдо на момент оформления заказа отсутствует, появляется соответствующее уведомление.

Если вы планируете принимать заказы из других тайм-зон (вдруг кто-то захочет сделать сюрприз близкому человеку) обязательно предусмотрите это условие на бэкенде. Иначе при подтверждении заказа у пользователя будет возникать ошибка, что в данное время рестораны и dark kitchen не работают. Ее довольно легко исправить, чтобы сделать вашу доставку worldwide.

И сложности, которые они вызывали

Пользователь может не только пользоваться личными промокодами, но и получать скидку по реферальной системе. Для этого ему просто нужно скопировать ссылку и поделиться ей с друзьями. Решение работает по принципу universal link, где сразу после клика пользователь переходит на конкретную страницу, где автоматически выполняется конкретное действие. Например, если у вас нет приложения Япоки, то первым делом вы попадете в AppStore или Google Play для его загрузки. Но уже при повторном переходе по той же самой ссылке, промокод на скидку от друга будет применен автоматически.

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

После оформления заказа пользователь может увидеть его статус и в прямом эфире наблюдать за приготовлением. Да-да, как в Dodo 🍕

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

Часто в погоне за уникальностью предприниматели пытаются накрутить кучу лишних идей и фич. Но есть паттерны поведения, к которым пользователи привыкли. И игнорировать их, потому что: «О боже! Мы не хотим быть похожи на конкурентов!» – глупо. Если вы хотите, чтобы людям нравилось пользоваться вашим продуктом, позаботьтесь, чтобы там присутствовал привычный функционал.

Быстрое определение адреса, возможность гибко распоряжаться баллами в программе лояльности, применять личные промокоды и управлять составом блюд – это база. Даже если внутри заложена сложная логика, которая требует кастомной разработки.

А чтобы отличаться от других, дарите клиенту хороший сервис: дополнительные предложения, бонусы, промокоды – все, чтобы его опыт был лучше.