Кейс: Гриль № 1Сайт и мобильное приложение для доставки из сети ресторанов быстрого питания

Сайт и приложение позволяют в несколько кликов заказать доставку еды из «Гриль №1» на дом или оформить заказ в ресторане.

В федеральную сеть ресторанов быстрого питания приходит по 10-15 заказов в минуту, в пиковые нагрузки 100-200. С помощью сайта и приложения мы получаем заказ, отдаем его в ближайшую точку, по готовности он уходит курьеру. Весь процесс происходит без участия оператора.

Старый сайт и мобильное приложение имели свои недостатки, поскольку были кастомизированными «коробками». Сайт уже не выдерживал пятничного наплыва посетителей, интерфейс был неудобным, а логика взаимодействия оставляла желать лучшего. Мобильное приложение не давало возможность реализовать тот визуал и функционал, который хотелось клиенту.

И это только часть проблем. Все это означало одно — пора выходить за рамки стандартных решений.

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

Мобильное приложение должно не просто дублировать визуал и функционал сайта, а предлагать нечто большее. Например, персонализированные push-уведомления и управление программой лояльности через систему QR-кодов.

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

• Провели аналитику: собрали требования, проанализировали целевую аудиторию и конкурентов, составили структуру будущих продуктов, провели анализ сторов

• Подготовили ТЗ для разработки, описали их функционал и характеристики

• Разработали дизайн, сделали адаптивную верстку для смартфонов и планшетов

• Провели интеграцию с системой управления ресторанами iiko

• Настроили интеграцию с почтовым сервисом, Яндекс Картами, платежными системами и DaData

• Реализовали каталог с карточками товаров, поиск, фильтрацию и систему рекомендаций блюд

• Разработали страницу оформления заказа, подключили платежную систему Альфа-Банка

• Реализовали централизованную административную панель, из которой можно управлять сайтом и приложением: обновлять меню, контент, баннеры, промокоды

• Настроили обработку условий бонусной программы: акций, персональных скидок, промокодов

• Реализовали кастомные push-уведомления и их рассылку

• Проработали отказоустойчивость системы, провели рефакторинг и реализовали версионность

Просто копировать сильные стороны недостаточно. Нужно было добавить что-то уникальное.

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

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

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

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

Для повышения вовлеченности мы разработали микроанимации. При наведении на блюдо карточка будто высветляется — это делает взаимодействие более живым. То же самое мы проделали и с кнопкой добавления товара в корзину.

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

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

Отрисовали персонажа в личном кабинете и страницах ошибок 404 и 500.

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

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

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

Сеть из 57 ресторанов, где необходимо учитывать кассы, склады, персонал, мотивацию, кухню, финансы и отчетность, требовала системы, которая могла бы управлять всем этим объемом без сбоев.

Выбор пал на iiko — мощную платформу, которая оптимизирует каждый уголок ресторанного бизнеса.

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

Первым делом нужно было настроить номенклатуру и модификаторы. Если этого не сделать, система будет давать сбой. Столкнулись с тем, что модификаторы сайта не соответствовали тем, что были в iiko. Чтобы избежать ошибок при передаче заказа, мы настроили их так, чтобы каждый модификатор легко интегрировался в систему, минимизируя риски.

Другая важная деталь — изображения товаров. Поскольку iiko не хранит фото, мы реализовали их выгрузку через админ-панель, чтобы можно было быстро заменить изображения без обращения к сторонним системам. Админ-панель тоже разработана нами, но об этом позже.

Что делать, если у Гриль №1 несколько десятков ресторанов, а меню и акции должны синхронизироваться одновременно? Ручное управление таким объемом данных было бы неэффективным и трудоемким. Мы сделали так, что изменения в одном ресторане автоматически обновляются во всех точках. Система стала почти невидимой для персонала, но крайне мощной с точки зрения управления.

Разработали HR-страницу для тех, кто хочет работать в Гриль №1. На ней представлены открытые вакансии с подробным описанием, требованиями и условиями. Кандидаты могут просмотреть доступные позиции и отправить резюме. Мы уделили особое внимание тому, чтобы интерфейс создавал дружелюбную атмосферу и мотивировал работать в команде. Для улучшения взаимодействия с потенциальными кандидатами добавили кнопку обратной связи.

Бонусы и акции, казалось бы, должны быть стандартным функционалом, но не для iiko. Для автоматической работы с промокодами мы создали собственную функцию импорта акций через Excel-файлы. Теперь администратор может загружать коды в систему, не обращаясь за помощью к разработчикам — еще одно решение, которое сэкономило время и ресурсы.

Одной из ключевых задач при доставке еды стало корректное определение адреса пользователя. Чтобы избежать ошибок и ускорить процесс, мы реализовали интеграцию с сервисом DaData. Этот инструмент передает название адреса и уникальный ID улицы, который затем используется при оформлении заказа в iiko. Благодаря этому механизму система точно определяет местоположение, а курьеры уверены, что доставят заказ по адресу.

Но самая, пожалуй, важная задача — создать систему, устойчивую к сбоям. Риск, что технологии могут подвести, существует всегда, и порой по не зависящим от разработчиков причинам. Чтобы этого избежать, мы создали механизм, который позволит заказывать еду, даже если iiko выйдет из строя. В этом случае информация о заказах передается по электронной почте, а клиенты получают уведомления по СМС с рекомендацией обратиться в call-центр. Так мы защитили бизнес от непредвиденных ситуаций.

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

С помощью продуманной системы фильтров пользователь легко надет нужное блюдо на обед или ужин. Фильтровать еду можно по типу (шаурма/пицца/суп) и по свойствам (острое/новинка/хит).

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

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

Есть функция поиска и отслеживания заказов, что помогает персоналу быстрее реагировать на запросы клиентов.

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

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

Запуская Гриль №1 на смартфоне, пользователь с первых секунд должен считывать айдентику бренда. Мы добились этого эффекта за счет фирменных цветов и визуальных приемов, уже знакомых пользователям. Стилистику соблюдали строго, например, тот же дракончик должен всегда смотреть влево, его нельзя отзеркаливать. Чтобы сохранить легкость и позитив, отрисовали персонажа для нескольких ключевых экранов.

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

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

Чтобы дизайн выглядел свежо и актуально, мы использовали трендовые дизайнерские решения — бенто-сетки, параллакс, 3D-элементы и многослойность. Многослойность помогает пользователю лучше взаимодействовать с элементами интерфейса, разделяя их на интуитивно понятные уровни. Это не только улучшает юзабилити, но и визуально освежает приложение.

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

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

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

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

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

На сайте это реализовано через API Яндекс Карт, но в приложении мы использовали метод трассировки лучей (определение принадлежности точки к конкретной зоне в системе координат) из-за трудностей интеграции с Яндекс Картами в React Native. Но это пошло на пользу, поскольку метод трассировки лучей работает слаженнее.

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

Разработали кастомные пуш-уведомления о статусе заказа (создан, готовится, в пути). Авторизованные пользователи смогут получить уведомления через СМС, push или email, а неавторизованные только через SMS и push.

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

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

Запуск нового сайта и мобильного приложения превзошли все ожидания. Совокупная выручка компании составила более 25 млн рублей. Новый сайт собирает около 126 тысяч уникальных посетителей в месяц и больше 32 тысяч заказов ежемесячно. Старый сайт не превышал отметки в 105 тысяч пользователей.

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

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

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

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

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