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

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

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

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

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

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

Какая задача стояла

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

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

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

Если кратко, что мы сделали

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Прежде чем погрузиться в разработку сайта

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

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

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

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

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

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

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

Повысили вовлеченность с помощью UX/UI

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

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

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

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

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

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

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

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

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

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

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

Как мы интегрировали сайт Гриль №1 с iiko

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Еще один важный шаг для улучшения взаимодействия

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

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

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

Кто всем этим управляет?

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

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

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

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

Чем приложение отличается от сайта?

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

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

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

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

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

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

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

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

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

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

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

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

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

Какой функционал доступен в приложении?

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

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

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

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

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

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

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

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

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

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

Что в результате?

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

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

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

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

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

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