«Русский Аппетит»: купить нельзя — смотреть можно
Как мы обновляли сайт и мобильное приложение крупнейшей фастфуд-сети Черноземья, которая принимает заказы в офлайн-точках
«Русский Аппетит»: купить нельзя — смотреть можно
Как мы обновляли сайт и мобильное приложение крупнейшей фастфуд-сети Черноземья, которая принимает заказы в офлайн-точках
Каталог без возможности купить товар на сайте в наших проектах встречается нечасто. Обычно это какая-то B2B-история, где перед покупкой довольно сложного продукта требуется общение с менеджером, потому что самостоятельно пользователь вряд ли справится с выбором всех параметров. Иногда это может быть что-то специализированное, когда на сайт может зайти кто угодно, а вот купить товары из каталога — только зарегистрированный и подтвержденный пользователь (например, мастер или поставщик).
В сегодняшнем кейсе история ещё интереснее. В каталоге на сайте пользователь может лишь посмотреть ассортимент товаров. В связанном с сайтом мобильном приложении — вдобавок к этому воспользоваться программой лояльности. Но ни там, ни там оформить заказ нельзя — для этого нужно прийти в офлайн-точку. Почему всё так устроено и как мы это реализовали — рассказываем ниже.
В сегодняшнем кейсе история ещё интереснее. В каталоге на сайте пользователь может лишь посмотреть ассортимент товаров. В связанном с сайтом мобильном приложении — вдобавок к этому воспользоваться программой лояльности. Но ни там, ни там оформить заказ нельзя — для этого нужно прийти в офлайн-точку. Почему всё так устроено и как мы это реализовали — рассказываем ниже.
- «Русский Аппетит» — это крупная сеть киосков фастфуда и готовой еды в Центральном Черноземье. У компании — долгая история и собственное производство, где готовят полноценное меню для обедов без хлопот, а затем поставляют еду в 550+ торговых точек в 12 регионах России. В них покупатели могут найти и готовую еду, и бургеры, и десерты по очень привлекательным ценам.
Почему всё так устроено
Нам предстояло обновить корпоративный сайт и разработать мобильное приложение взамен уже имеющегося, но не закрывающего все бизнес-потребности заказчика.
Сайт на проекте носит больше информационную функцию: здесь можно посмотреть каталог, но заказать блюда не получится — для этого нужно прийти в киоск сети (либо сделать заказ через приложения подрядчиков — Яндекс. Еда или Маркет Деливери).
В мобильном приложении также можно просмотреть каталог, но пока тоже нельзя ничего заказать — для этого контура нужно серьёзно менять бизнес-процессы на стороне заказчика, чтобы перестроиться под логику электронной коммерции. А это — требует времени. Поэтому пока приложение отвечает за программу лояльности: при покупке в сети «Русский Аппетит» с его помощью можно копить баллы и списывать их при следующих покупках.
Сайт на проекте носит больше информационную функцию: здесь можно посмотреть каталог, но заказать блюда не получится — для этого нужно прийти в киоск сети (либо сделать заказ через приложения подрядчиков — Яндекс. Еда или Маркет Деливери).
В мобильном приложении также можно просмотреть каталог, но пока тоже нельзя ничего заказать — для этого контура нужно серьёзно менять бизнес-процессы на стороне заказчика, чтобы перестроиться под логику электронной коммерции. А это — требует времени. Поэтому пока приложение отвечает за программу лояльности: при покупке в сети «Русский Аппетит» с его помощью можно копить баллы и списывать их при следующих покупках.
Игорь
Руководитель проекта
— Основная задача приложения на данный момент — это программа лояльности. Регистрируешься в приложении — получаешь QR-код. Показываешь код на кассе и получаешь бонусные баллы, которыми в дальнейшем можно оплачивать заказы. Штука среди клиентов сети популярная — многие ей пользуются именно из-за бонусов.
Интеграции
Чтобы увязать сайт и приложение между собой, а заодно связать оба ресурса единым механизмом формирования акций, мы предусмотрели три интеграции:
1. Интеграция с 1С — для сайта и для приложения используется одна админка на «Битриксе». Из 1С мы забираем товары и цены и храним всё это в собственной базе данных, которая обновляется раз в сутки.
2. Интеграция с Mindbox — внешней маркетинговой платформой, в которой хранятся пользователи. Она делит пользователей на сегменты и управляет маркетинговыми активностями: внутри настраиваются акции, цены и пуш-уведомления от приложения, которые пользователи видят у себя на мобильных устройствах.
3. Интеграция с Hotmaps — сервисом, который отдаёт в приложение данные о всех торговых точках сети.
1. Интеграция с 1С — для сайта и для приложения используется одна админка на «Битриксе». Из 1С мы забираем товары и цены и храним всё это в собственной базе данных, которая обновляется раз в сутки.
2. Интеграция с Mindbox — внешней маркетинговой платформой, в которой хранятся пользователи. Она делит пользователей на сегменты и управляет маркетинговыми активностями: внутри настраиваются акции, цены и пуш-уведомления от приложения, которые пользователи видят у себя на мобильных устройствах.
3. Интеграция с Hotmaps — сервисом, который отдаёт в приложение данные о всех торговых точках сети.
Сайт
Как мы шутили в студии, вспоминая известный мем про рыбов, сайт «Русского аппетита» имеет каталог блюд с ценами, но на продаёт их — а только показывает.
Почему так? У компании средний чек за счёт демократичной цены блюд очень небольшой — а значит, доставка получается неоправданной, поэтому на сайте нельзя ничего купить. Вместо этого можно определиться с выбором в каталоге на сайте, прийти в ближайшую из 570 торговых точек и оформить заказ (либо заказать еду через подрядчиков: Яндекс. Едой и Маркет Деливери).
Поэтому основная задача сайта — показать пользователю каталог на большом экране и информировать об акциях сети. Кроме того, сайт решает бизнес-задачи компании: здесь можно размещать вакансии по всем городам и подробно рассказывать о франшизе.
Почему так? У компании средний чек за счёт демократичной цены блюд очень небольшой — а значит, доставка получается неоправданной, поэтому на сайте нельзя ничего купить. Вместо этого можно определиться с выбором в каталоге на сайте, прийти в ближайшую из 570 торговых точек и оформить заказ (либо заказать еду через подрядчиков: Яндекс. Едой и Маркет Деливери).
Поэтому основная задача сайта — показать пользователю каталог на большом экране и информировать об акциях сети. Кроме того, сайт решает бизнес-задачи компании: здесь можно размещать вакансии по всем городам и подробно рассказывать о франшизе.
Несмотря на то, что на сайте ничего нельзя заказать, тут есть личный кабинет. Авторизованным пользователям доступны персональные акции и бонусная система: можно посмотреть количество начисленных бонусов, которые можно потратить при покупке в любой точке сети. Также в личном кабинете можно посмотреть историю заказов.
Цены на продукцию зависят от города, который можно выбрать в шапке сайта или вручную задать в профиле пользователя: это повлияет на отображение цен и акций.
Мобильное приложение
Мобильное приложение создавалось под обновленный брендбук компании: сочные и яркие цвета подчеркивают направленность приложения на заказ еды. Изначально предполагалось, что через приложение можно будет сделать заказ с возможностью оплаты картой или на кассе в киоске по предъявлению QR-кода. Но пока не реализована бизнес-логика по передаче заказов из точек в 1С заказчика, в приложении доступна лишь часть функций.
При этом уже при первой сборке новое, хоть и пока неполное, приложение умело больше, чем прежнее приложение «Выгода» от заказчика.
При этом уже при первой сборке новое, хоть и пока неполное, приложение умело больше, чем прежнее приложение «Выгода» от заказчика.
Игорь
Руководитель проекта
— В первом спринте новое приложение уже показывало каталог с товарами, бонусный баланс, отдавало бонусную карту в виде QR и показывало торговые киоски на карте. Для тестов даже пришлось «открыть» пару киосков в Барнауле — без всякой франшизы :)
После нескольких спринтов в приложении уже можно было посмотреть:
- каталог товаров, актуальный для каждого города;
- сторисы с актуальными акциями и специальными приложениями;
- расположение торговых точек сети и время их работы;
- историю своих заказов и начисления бонусных баллов, баланс бонусов;
- QR-код участника бонусной программы.
~80 тысяч человек
в AppStore и примерно столько же — в Google Play установили приложение спустя неделю после релиза. Это 70% активных пользователей сети «Русский аппетит».
QR-код — одна из самых главных возможностей приложения: его нужно показывать при покупке товаров в киосках, чтобы начислялись бонусные баллы, которыми можно оплатить до 30% чека, и получать специальные предложения.
Бонусная программа — важная часть бизнес-логики заказчика, которая имеет большое значение в удержании и привлечении новых клиентов. Кроме покупок, бонусные баллы можно заработать в приложении, если оценивать товары из своих заказов: за каждую оценку пользователь получает от 2 до 5 баллов.
Оценка разделена не только по товарам и торговым точкам, но и по логике: товары «живут» в 1С, а их оценки и торговые точки — в Mindbox, а выводится всё на одном экране. За оценки пользователь получает бонусы из Mindbox, которыми частично можно расплачиваться за бургеры и другую еду.
Бонусная программа — важная часть бизнес-логики заказчика, которая имеет большое значение в удержании и привлечении новых клиентов. Кроме покупок, бонусные баллы можно заработать в приложении, если оценивать товары из своих заказов: за каждую оценку пользователь получает от 2 до 5 баллов.
Оценка разделена не только по товарам и торговым точкам, но и по логике: товары «живут» в 1С, а их оценки и торговые точки — в Mindbox, а выводится всё на одном экране. За оценки пользователь получает бонусы из Mindbox, которыми частично можно расплачиваться за бургеры и другую еду.
Тонкости разработки приложения
Приложение собирали на React Native, что позволило сделать его кроссплатформенным: оно доступно для Android, iOS и Huawei. Кроме того, при разработке мы использовали готовые компоненты, что позволило значительно снизить затраты на создание приложения.
Дополнительно мы провели оптимизацию: облегчили вес приложения на устройствах при установке и ускорили производительность. Для этого мы проверяли работу API под нагрузкой и тестировали приложение в эмуляторе и на реальных устройствах.
Также мы добавили системы аналитики: Firebase и App metrica, с которыми заказчик сможет:
Дополнительно мы провели оптимизацию: облегчили вес приложения на устройствах при установке и ускорили производительность. Для этого мы проверяли работу API под нагрузкой и тестировали приложение в эмуляторе и на реальных устройствах.
Также мы добавили системы аналитики: Firebase и App metrica, с которыми заказчик сможет:
- получать статистику по приложению в режиме реального времени;
- видеть проблемы и некорректную работу приложения на разных устройствах;
- отправлять пуш-сообщения, сгенерированные в Mindbox, на устройства пользователей.
Дмитрий
Разработчик
— Установить App metrica для сбора статистики в приложении оказалось сложнее, чем мы думали: оказалось, что «Яндекс» уже три года не поддерживает модуль для React Native. Пришлось искать варианты: от «использовать чьи-то форки», до «написать своё». В итоге пришли к гибридному решению.
Акции
На главной странице приложения пользователя встречают сторисы с актуальными акциями и специальными приложениями. Акции также можно посмотреть на отдельном экране.
Казалось бы, что сложного в том, чтобы вывести акции? Но на этом проекте за счёт связки сайта, приложения и сервиса Mindbox, стратегия их работы менялась по ходу пьесы несколько раз.
На старте мы выяснили вместе с представителями Mindbox, как сделать так, чтобы на сайте и в приложении были единые акции и чтобы при этом разные пользователи также могли видеть свои персональные предложения, да ещё чтобы это выглядело красиво и удобно. Загвоздка была в том, что для вывода данных, как нам нужно, на стороне Mindbox требовалось продумать механику и там же её реализовать — а представителями сервиса это делается не так быстро, как хотелось бы.
На старте мы выяснили вместе с представителями Mindbox, как сделать так, чтобы на сайте и в приложении были единые акции и чтобы при этом разные пользователи также могли видеть свои персональные предложения, да ещё чтобы это выглядело красиво и удобно. Загвоздка была в том, что для вывода данных, как нам нужно, на стороне Mindbox требовалось продумать механику и там же её реализовать — а представителями сервиса это делается не так быстро, как хотелось бы.
Дмитрий
Разработчик
— За время спринта по реализации акций мы раза 3 «переобувались», как это сделать. В итоге остановились на том, что акции мы всё-таки получаем из Mindbox, хотя изначально были варианты с Битриксом: они отпали, когда выяснилось, что у каждого пользователя могут быть свои акции, а какие — знает только Mindbox.
Благодаря интеграции мы сильно сократили объём работы контент-менеджеру: акции создаются в Майндбоксе и уже оттуда выводятся и на сайте, и в приложении. Эти же акции заведены в бизнес-логику кассовых аппаратов в точках продаж.
Благодаря интеграции мы сильно сократили объём работы контент-менеджеру: акции создаются в Майндбоксе и уже оттуда выводятся и на сайте, и в приложении. Эти же акции заведены в бизнес-логику кассовых аппаратов в точках продаж.
Среди акций есть динамические: например, «6-ой кофе за 1 рубль» — приложение учитывает каждую купленную пользователем чашку и сообщает, когда можно выпить бонусный кофе за символическую цену.
Игорь
Руководитель проекта
— Дополнительные сложности были с динамическим контентом в акциях от Mindbox. Чтобы всё работало, как задумано, на стороне сервиса нужны были доработки. Поэтому мы работали в тесной связке со специалистами сервиса, совместно продумывая эту механику на их стороне.
Ольга
QA-менеджер
— Настройка акций производится полностью в Mindbox. При этом одни и те же акции выводятся и на сайте, и в мобильном приложении, где совершенно другие требования к контенту карточек акций.
Кстати, чтобы чётче сформулировать требования к контенту, мы отрисовали два вида баннеров и сторис для акций. Радует, что заказчик ими активно пользуется и размещает контент, не противоречащий дизайн-концепции.
Сложность была и в самих настройках акций: поскольку тестовые акции настраивались и создавались практически там же, где хранились уже действующие акции заказчика — важно было ничего не сломать.
Кстати, чтобы чётче сформулировать требования к контенту, мы отрисовали два вида баннеров и сторис для акций. Радует, что заказчик ими активно пользуется и размещает контент, не противоречащий дизайн-концепции.
Сложность была и в самих настройках акций: поскольку тестовые акции настраивались и создавались практически там же, где хранились уже действующие акции заказчика — важно было ничего не сломать.
Времени и сил потратили много, но результат — огонь: акции подтягиваются с Майндбокса, причём, даже хитрые акции с контентом, который меняется в зависимости от пользовательских данных. Заказчик первое время не мог привыкнуть, что за счёт единого API для сайта и приложения все акции задаются в одном месте — просто и удобно :)
Что дальше
В мае 2024 заказчик решил провести большой розыгрыш призов и разыграть среди участников поездки в Сочи, Калининград и на Северный Кавказ и 300+ других подарков. Для этого мы заранее:
- собрали отдельную посадочную страницу на сайте;
- добавили к приложению дополнительные метрики;
- сделали настраиваемое меню в приложении: теперь при добавлении новой строки в «бургере» не нужно обновлять всё приложение — можно управлять этим через админ-панель.
Несколько розыгрышей уже состоялись. А впереди — высокий летний сезон бургеров и фастфудных «разносолов». Это хорошее время для продвижения приложения, а для проекта это значит лишь одно: будет много микроулучшений в лучших традициях гибких методологий разработки.