Ужин дома

Детальная аналитика и подготовка к проекту со стороны клиента

«Ужин дома» тщательно подготовились к разработке мобильного приложения. У них была готовая концепция, ТЗ и брендбук. Кроме того, компания очень внимательно относится к пользовательской аналитике и регулярно собирает обратную связь клиентов. На старте проекта они выдали нам целую «энциклопедию»: информацию о компании, ее ценности и принципы, аналитику за 2 года существования проекта, систематизированные таблицы со всеми отзывами клиентов. 

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

Прототип и дизайн

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

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

Универсальная логика

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

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

Главный экран

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

Сохранили все основные элементы, которые хотел заказчик, — боковое меню, крупные картинки с ужинами в верхней части экрана. Но на основе пользовательской аналитики существенно переработали логику. Клиентам не нравилось, что на главной странице размещены только основные блюда\ужины. Чтобы посмотреть ассортимент супов или десертов, нужно добавить в корзину минимальный заказ — 3 ужина. Это непонятно и заставляет тратить время на заказ, который, возможно, тебе не подойдет, потому что позже выяснится, что нет нужного супа или десерта. Кроме того, не видя весь ассортимент, сложно принять решение о заказе.

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

Чтобы логически отделить ужины от остальных блюд на главном экране мы предложили поменять визуальную концепцию. Для ужинов используется крупная карточка, а для остальных блюд — более маленькая. Такое решение очень понравилось «Ужину дома», и позже они стали использовать его и на своем сайте. 

Все блюда в «Ужине дома» делятся еще и по ценовым категориям — премиум, базовой и эконом. Этот момент также отразили в оформлении карточки. Для премиум используется другая форма карточки и добавляется графический элемент. 

В приложении реализовали возможность добавлять дополнительные категории меню, например, блюда к 14 февраля или блюда на гриле в летний период. Они дополнительно выделяются визуально иконкой и тегом. 

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

Карточка блюда

Данные в карточке блюда помогают клиенту сделать выбор. В карточке «Ужин дома» есть вся необходимая информация:

• калорийность и выход готового блюда;
• уровень сложности и время на его приготовление;
• список ингредиентов;
• посуда, которая нужна для приготовления;
• срок, в который следует приготовить блюдо.

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

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

Рецепты

«Ужин дома» предлагают своим клиентам приготовить дома блюда ресторанного уровня, рецепты — одно из их ноу-хау. На сайте рецепты представлены не были. Клиент получал бумажные рецепты с каждым заказом. Это было не очень удобно и неэкологично. 

Поэтому компания решила добавить рецепты в приложении. Они делятся на актуальные (рецепты текущей недели) и все — архив всех рецептов прошлых периодов. В архиве мы реализовали поиск. 

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

После приготовления блюда пользователь может нажать кнопку «Блюдо готово», после этого рецепт перемещается в раздел «Все». Если пользователь не нажмет кнопку, рецепт исчезнет из актуальных через 2 недели. 

Оформление заказа

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

У «Ужина дома» своя логика оформления заказа: пользователь может заказать суп или десерт только после того, как он сформирует минимальный заказ — положит в корзину 3 ужина. Такая схема не всегда понятна новому пользователю, поэтому в мобильном приложении мы реализовали множество подсказок, упрощающих процесс заказа. 

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

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

При переходе в корзину пользователь видит шкалу индикации, которая также показывает, сколько еще блюд нужно добавить для заказа. По мере добавления блюд шкала «синеет».

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

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

В приложении доступны несколько способов оплаты: банковской картой, наличными при получении, Apple или Google Pay. Также при оплате можно списать накопленные бонусные баллы или применить промокод. 

Сервис позволяет сделать заказ для другого человека — например, для родителей. Но в этом случае не доступна оплата курьеру наличными, только онлайн-предоплата. 

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

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

Кроме того, для оплаты заказов будущего периода не подходят Apple или Google Pay, так как оплата через них происходит сразу же. Поэтому кнопки этих форм оплаты для заказов на следующую неделю нужно в приложении убрать. 

Еще один юзкейс — заказ в другой город. Сервис работает в Москве, МО, Санкт-Петербурге и Ленинградской области. Для каждого города представлено свое меню. Если заказ сделан в Москве, а человек уехал в Питер, приложение проанализирует его геолокацию и пришлет уведомление, что у него теперь другое меню. Если адрес доставки не соответствует меню города, сервис предупредит клиента об этом.

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

Профиль

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

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

В раздел «Любимые блюда» можно добавить до 5 позиций. Сервис учитывает ваши предпочтения при составлении меню. А также делает на их основе индивидуальные промопредложения и скидки.

Программа лояльности

Наличие программы лояльности — один из must have для современного фудтех-сервиса. Она повышает лояльность клиентов и мотивирует обращаться к его услугам снова и снова. 

У «Ужина дома» развитая программа лояльности. Например, они дают подарки за определенное число заказов. Также к каждому заказу прилагается комплимент от компании — пакетик фирменного печенья. 

За приглашение друга или за ошибку сервиса клиенту начисляют бонусные баллы. 

В мобильном приложении пользователь может расплатиться бонусами или выбрать подарок.