10 тысяч заказов в день через сайт: как мы сделали веб-витрину для франчайзинговой сети пиццерий
Расскажу о нашем опыте создания нагруженной веб-системы для FoodTech-проекта, которая позволяет автоматизировать многие процессы обработки заказа и доставки.
Весной 2020 года один из наших клиентов, сеть пиццерий “ИталианПицца” приняли важное решение по дальнейшему развитию бизнеса - перейти к расширению сети за счет использования схемы франшизы.
У собственников уже был аналогичный опыт с другим направлением бизнеса - их франчайзинговая сеть магазинов пива включает в себя более 500 точек, работает в 220 городах в России и Казахстане, и “ИталианПицца” должна повторить этот успех.
На момент начала проекта в сети было 9 точек в г.Екатеринбург, спустя 2 года сеть работает в 6 регионах, 22 городах и имеет около 50 действующих точек, а также большие планы по дальнейшему расширению.
В таком бизнесе, как пиццерии, роль интернет-технологий очень высока, т.к. многие гости любят заказывать пиццу (а также суши и роллы, которые тоже есть в ассортименте сети) через Интернет. Важно, чтобы заказ и доставка были удобными, точными, не вызывали нареканий у гостей и не приводили к перегрузке или простою в работе пиццерии.
Клиент поставил задачу: веб-инфраструктура проекта должна позволять оформить свыше 10 000 заказов в сутки и обеспечить легкое подключение до 20 городов в месяц.
Мы, в "Сайтоник" к тому моменту уже сопровождали данный бизнес в вопросах веб-разработки и интернет-маркетинга и подключились к реализации нового масштабного проекта.
Работы от старта проекта до запуска первого релиза новой версии сайта заняли 8 месяцев и еще столько же мы на данный момент потратили на его дальнейшее развитие и расширение функционала. В этом кейсе я расскажу в основном о веб-витрине, которая составляла около 50% всего проекта и кратко опишу сопутствующие сервисы и модули.
Задачи проекта: автоматизация и продвижение
Компания уже имела веб-сайт, который умел передавать заказы в IIKO, но он имел устаревший дизайн, требовал ручного управления ассортиментом и ручной обработки заказов. Очевидно, такой сайт не соответствовал цели, которую поставили собственники.
Для успешного сопровождения проекта в Интернет, нам нужно было решить несколько важных задач, направленных на максимальную автоматизацию процесса заказа и его доставки, а также сделать надежную основу для продвижения проекта в Интернете. Самыми важными задачами были:
1. Удобная витрина для заказа пиццы и других блюд
Рынок доставки пиццы и роллов - очень конкурентный, уже на старте проекта конкурентами были лидеры российского рынка и сильные местные игроки (papajohns.ru, dodopizza.ru, eda1.ru), а также агрегаторы delivery-club.ru и eda.yandex. Новая версия сайта должна была быть конкурентоспособной по юзабилити с этими проектами, сделать заказ простым и удобным и повысить узнаваемость и репутацию бренда.
2. Максимальная автоматизация процессов
Необходимо было сократить время, которое тратят специалисты колл-центра и пиццерии на обработку заказа, в идеале — сделать все процессы автоматизированными.
3. Расширение трафика за счет SEO
Одна из ключевых компетенций нашей команды, которую мы использовали на этом проекте, - это опыт продвижения foodtech-проектов средствами SEO и контекстной рекламы. Новая версия сайта компании должна была соответствовать всем требованиям поисковых систем и способствовать сбору трафика по всем целевым запросам — высоко-, средне- и низкочастотным.
4. Online-информирование об актуальном ассортименте
Пицца, как и роллы - это продукт, который может включать в себя более 10 разных ингредиентов, они не всегда могут быть в наличии в конкретной точке (особенно в удаленных населенных пунктах), могут быть остановки в работе кухни, поэтому необходимо, чтобы веб-витрина сети показывала актуальный ассортимент по каждой розничной точке.
В ИталианПицца производственной ERP-системой является IIKO, и нашей задачей было — обеспечить двустороннюю интеграцию веб-сервисов компании и IIKO в режиме онлайн.
5. Учет бонусной программы, скидок и акций.
IIKO имеет мощный функционал бонусной программы и необходимо было реализовать его на сайте с учетом возможных скидок, бонусных баллов, подарочных товаров - с учетом всех возможных комбинаций бонусных механик и в привязке к городам и конкретным пиццериям.
6. Online-управление очередью заказов и сроками доставки
В заказе пиццы и роллов очень выражены суточные и сезонные колебания в заказах - обычно еду заказывают в обед и перед ужином, сильные всплески бывают накануне праздников и во время длинных каникул в январе и мае. В итоге, нагрузка на кухню и доставку может колебаться в несколько раз в течение дня. Веб-витрина сети должна отдавать клиентам корректную информацию о том, когда будет готов их заказ, а сотрудники пиццерии должны видеть очередь заказов, чтобы планировать нагрузку на кухню.
7. Личный кабинет владельца франшизы
Владелец франшизы (или менеджер зала) должен в режиме онлайн видеть показатели по заказам, выручке, оплатам, нагрузке на точку и иметь возможность оперативно управлять производительностью пиццерии (регулировать допустимое количество заказов в один слот времени в зависимости от количества сотрудников в смене и их опыта).
8. Простое управление контентом и настройками системы
Весь значимый контент и настройки сайта и внутренних сервисов должны редактироваться без привлечения программистов, в интуитивно-понятном интерфейсе.
Проектирование сайта: почему мы отказались от концепции SPA (сайта-одностраничника)
В работе над новым проектом были задействованы:
- менеджер проекта
- SEO-специалист
- маркетолог
- UX|UI-дизайнер
- веб-разработчики
а также целый ряд специалистов Заказчика:
- руководитель службы доставки
- главный технолог
- руководитель службы маркетинга
- специалисты IT-службы
- бренд-дизайнер.
Совместно нами были сформулированы требования к новому проекту, а также был проведен анализ конкурентов-лидеров рынка и составлен список требований и рекомендаций от SEO-специалиста по тому, каким должен быть новый сайт по структуре и содержанию, чтобы быть удобным для пользователей и нравиться поисковым системам.
Изначально клиент хотел делать SPA-сайт, где всё взаимодействие с посетителем идет в рамках одной страницы, куда динамически подгружается нужный контент (аналогично мобильному приложению). Однако, с точки зрения SEO, SPA — плохое решение, т.к. мы не имеем достаточно страниц, оптимизированных под средне- и низкочастотные запросы. В итоге, было принято решение делать сайт гибридным - главная страница работает как SPA, но она содержит ссылки на страницы категорий и подкатегорий, а также на страницы отдельных товаров. Все эти страницы доступны для поисковых систем и хорошо индексируются.
Для более легкого и быстрого индексирования сайта в городах присутствия, на сайте была реализована система поддоменов (отдельный поддомен для каждого города).
Первым этапом проектирования стало SEO-проектирование сайта, по итогам которого был получен 26-страничный документ с подробными рекомендациями по структуре сайта, составу и функциональности каждого типа страниц (с примерами и прототипами для каждого типа страниц).
На основе SEO-проектирования, изучения API IIKO (IIKO Cloud) и обсуждения необходимого функционала с профильными специалистами Заказчика было разработано Техническое Задание на разработку сайта, которое в развернутом виде содержало описание каждого элемента сайта, включая его поведение, схемы интеграции с внешними системами (Iiko, Iiko Card, SMS-информирование, банковский эквайринг, сервис геолокации). Приложением к ТЗ шли прототипы для каждого типа страниц сайта.
Всего этап проектирования занял 1,5 месяца.
Разработка дизайна - поиск вариантов, адаптивность и фирменный стиль
К началу проекта клиент уже имел новый фирменный стиль и брендбук, регламентирующий оформление точек продаж и рекламных материалов. Работы по дизайну сайта строились на основе этого фирменного стиля.
Поиск подходящего дизайнерского решения для шапки и главной страницы занял 3 недели, совместно с Заказчиком мы рассматривали различные варианты компоновки и оформления:
Итоговый вариант дизайна получился достаточно легкий, функциональный и ориентированный на оформление заказа.
еще 2 недели ушло на отрисовку внутренних страниц, согласования и корректировки заняли еще 2 недели. Итого этап дизайна занял 1,5 месяца.
Выбор стека технологий
При определении стека веб-технологий для реализации этого проекта нами совместно с Заказчиком был выработан ряд критериев:
- Высокая производительность системы
- Большое количество интерактивных элементов и обновление данных на странице без ее перезагрузки
- Устойчивость к нагрузкам и безопасность
- Возможность масштабирования системы по мере роста нагрузки и подключения новых точек продаж без существенного переделывания системы
- Использование популярных решений, которые имеют хорошее комьюнити и активно развиваются (для более простой технической поддержки проекта в дальнейшем).
В итоге, был выбран следующий стек технологий:
- Монорепозиторий: nx
- Бэкенд: nodejs, nestjs, graphql, rabbitMQ
- Фронт: nextJs, apollo
- База Данных: postgres, redis
Использование фреймворка nextJs (который основан на популярной библиотеке React) было обусловлено планами по дальнейшему созданию мобильного кроссплатформенного приложения на React Native — мы могли сэкономить как на разработке фронтенда, так и на использовании общего бэкенда.
Программирование первой версии
Сроки реализации новой версии веб-сайта были завязаны на реализацию планов сети по выходу в другие регионы и первая версия была запущена в октябре 2021 года, через 5 месяцев после утверждения дизайна.
Для ускорения проекта, параллельно шла разработка нескольких модулей:
- основная архитектура проекта (backend и база данных)
- сервис интеграции с IIKO через IIKO Cloud
- фронтенд сайта:
- главная страница (SPA)
- внутренние страницы (категории, подкатегории, карточки товара)
- корзина и оформление заказа
- прочие страницы сайта
- административная панель сайта
Изначальные сложности возникли при обеспечении качества интеграции веб-витрины и IIKO:
- IIKO не обеспечивает 100% надежность в обработке входящих заказов, при большой нагрузке на сервер заказы могут “теряться”. Данная проблема была решена за счет написания собственного сервиса очередей, который контролировал доставляемость заказа с сайта в ERP-систему
- Время обработки запросов от сайта к IIKO по применению скидок, бонусов и подарков может “скакать” от долей секунды до 15-20 секунд, что затрудняет оформление заказа. Проблема была решена за счет дублирования основных расчетов скидки на стороне сайта.
- IIKO Cloud на момент начала проекта был новым API и разработчики вносили в него регулярные изменения. В итоге, нам неоднократно приходилось вносить изменения в уже созданный код для обеспечения его совместимости с изменившимся API ERP-системы.
В итоге, все эти задачи были решены.
Особенность оформления заказа в сетевом фудтехе — это сложная логика обработки заказа. Всего одна страница оформления заказа содержит несколько десятков проверок и разветвлений алгоритма. Необходимо учитывать:
- Зависимость ассортимента от точки самовывоза/адреса доставки
- Необходимость регулярной проверки на попадание товара в стоп-лист в процессе оформления заказа (товар закончился)
- Расчет срока доставки в зависимости от нагрузки на точку продаж
- Перенос заказа между точками продаж при смене дневной/ночной зон доставки
- Учет минимальной стоимости заказа для разных зон доставки по каждой точке продаж
- Применение скидок/акций в зависимости от выбранного способа доставки/состава заказа/точки продаж
- Сопутствующие товары
- Сохраненную историю заказов покупателя
- Бонусные баллы
- Доступные методы оплаты и доставки и т.д.
Также сложными моментами на проекте были:
- дублирование похожих товаров в разных точках продаж (некоторые товары имели одинаковое название, но разные артикулы внутри системы, при смене точки продаж необходимо заменять артикул на аналогичный, доступный в новой точке)
- Обеспечение обновляемости данных на страницах категорий и карточек товаров по их наличию “на лету” и при этом обеспечение индексации всех страниц сайта поисковыми системами.
В октябре 2021 года новая версия сайта italianpizza.ru была запущена.
Дальнейшее развитие проекта
Уже в процессе разработки новой версии сайта у представителей клиента стали появляться новые пожелания и идеи по развитию сайта.
В итоге, за следующие полгода был проведен большой объем работ, совокупно составивший свыше 1000 человекочасов и который включал в себя:
- Подключение онлайн-оплаты
- Разработку собственного сервиса кэширования контента и переход с SSG обратно на SSR
- Подключение расширенной аналитики поведения пользователей
- Изменение выбора столовых приборов
- Изменение выбора бесплатных и дополнительных сопутствующих товаров
- Частичный редизайн карточки товара
- Создание отдельного микросервиса для обработки условий доставки
- Онлайн расчет планируемого времени доставки
- Внедрение персональных настроек по получению электронных чеков и акционных предложений
- Изменение функционала раздела “Бизнес-ланчи”
- Изменение функционала выбора адреса доставки и пиццерии по умолчанию для небольших городов
- Внедрение промо-стикеров
- Внедрение уведомлений для посетителей
- Оптимизация работы сайта в период пиковых нагрузок и т.д.
Дополнительные сервисы — расширяем возможности IIKO
IIKO — это хорошая ERP-система для foodTech-проектов, но она имеет ряд ограничений в части надежности и производительности, к тому же она довольно дорога во владении и доработке.
Поэтому вместе с новым Интернет-сайтом мы разработали ряд внутренних сервисов для компании, которые должны были автоматизировать основные бизнес-процессы.
Бланк загрузки
К началу проекта планирование загрузки кухни в ресторанах клиента осуществлялась в электронных таблицах. В полуручном режиме рассчитывалось, сколько заказов может обработать каждая пиццерия, с учетом того, сколько сотрудников есть в точке и какая у них производительность.
На основе требований клиента мы разработали сервис “Бланк загрузки”, который распределяет все заказы, поступающие в точку продаж по 15-минутным слотам.
Управляющий пиццерии может планировать производительность кухни по каждому типу блюд, при возникновении внештатных ситуаций или перегрузке кухни отдельные слоты можно блокировать и заказы на это время приниматься не будут.
Созданный сервис получает из IIKO список заказов, полученных не только с сайта, но также от операторов на телефоне и из зала и автоматически балансирует нагрузку на кухню, передвигая заказы между слотами.
В итоге, управляющий пиццерией может проще управлять ресурсами, планировать нагрузку на работников и необходимое количество людей в смене.
Данные бланка загрузки используются и при определении времени доставки - в зависимости от адреса доставки и времени готовности блюда, система в режиме онлайн рассчитывает, в какое время заказ будет доставлен клиенту и информирует его об этом при оформлении заказа на сайте.
Личный кабинет Франчайзи
Бланк загрузки - это только один из сервисов, которые используются в “Личном кабинете франчайзи”
Помимо этого, система содержит ряд отчетов: по количеству заказов, финансовым показателям пиццерии, по оплатам, по наличию товаров в стоп-листе и т.п.
Также в личном кабинете реализована возможность настройки производительности точек с использованием разных сценариев и система оповещения пользователей.
К личному кабинету подключены уведомления через e-mail и через telegram-бота.
Итоги проекта
Проект находится в стадии динамичного развития, но уже можно подвести итоги первых двух лет его существования.
- В соответствии с задачами, поставленными Заказчиком, был автоматизирован процесс оформления и обработки заказа, что позволило сократить количество задействованных операторов
- Заказчик получил удобный и легко масштабируемый инструмент развития бизнеса - добавление нового города или точки и старт продаж через Интернет осуществляется в течение 1 рабочего дня
- За счет внедрения внутренних сервисов повысилась производительность труда операторов колл-центра и менеджеров пиццерий
- Веб-сервисы без сбоев обслуживают работу сети пиццерий круглосуточно, включая периоды пиковой нагрузки в праздники
- Трафик из поисковых систем увеличился в 4,1 раза (по старым городам присутствия - в 2,7 раза) за счет расширения количества посадочных страниц и их оптимизации.
Если у Вас есть вопросы по этому проекту или Вас интересует разработка и продвижение проектов в сфере Foodtech (и не только), обращайтесь к нам, в "Сайтоник".