Как мы увеличили выручку и рост посетителей в ~1,5 раза, разработав для Гриль №1 новый сайт и приложение

Новая экосистема помогла службе доставки оптимизировать работу точек, исключить человеческий фактор при обработке заказов и удвоить их количество. За месяц сайт и приложение собирают 126 тысяч уникальных посетителей и 32 тысячи заказов. Как мы этого добились — читайте в кейсе.

Гриль №1 — федеральная сеть ресторанов быстрого питания с 57-ю точками. Компания входит в топ-100 лучших франшиз России по версии БИБОСС.

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

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

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

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

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

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

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

Новый сайт привлекает около 126 тысяч уникальных посетителей и более 32 тысяч заказов в месяц. Для сравнения, старый сайт не превышал отметки в 105 тысяч.

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

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

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

Еще одна «болевая точка» — долгий процесс оформления доставки и неудобство выбора адреса.

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

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

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

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

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

Отдельное внимание уделили типографике.

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

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

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

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

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

Сайт создавали на фреймворке Laravel. Он идеально подходит для разработки быстрых и мощных пользовательских интерфейсов, а еще на нем легко развивать и растить проект, поскольку он не дает упереться в потолок по функциональности.

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

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

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

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

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

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

Например, с изображениями товаров.

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

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

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

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

На сайте реализовали HR-страницу для тех, кто хочет работать в Гриль №1. На ней кандидаты найдут открытые вакансии с подробным описанием, требованиями и условиями.

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

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

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

Для увеличения скорости работы сайта мы разработали клиент-серверную архитектуру.

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

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

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

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

Полный контроль над актуальностью и контентом всего сайта предоставляет административная панель.

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

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

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

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

Так вышло и с нашим клиентом.

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

Заранее изучили требования магазинов приложений (App Store и Google Play, HUAWEI AppGallery, Xiaomi Market, RuStore), чтобы убедиться, что наши планы соответствуют правилам площадок.

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

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

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

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

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

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

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

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

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

Улучшили систему выбора адресов.

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

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

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

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

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

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

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

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

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

Интеграция с iiko помогла оптимизировать работу точек и исключить человеческий фактор при обработке заказов.

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

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

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

А что думаете вы?)

Слоган Гриль №1 — «раздраконим аппетит». Обращение заказчика тоже раздраконило нас создать приятный и полезный продукт, который мы будем развивать и дальше.

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