10 тысяч заказов в день через сайт: как мы сделали веб-витрину для франчайзинговой сети пиццерий

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

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

У собственников уже был аналогичный опыт с другим направлением бизнеса - их франчайзинговая сеть магазинов пива включает в себя более 500 точек, работает в 220 городах в России и Казахстане, и “ИталианПицца” должна повторить этот успех.

На момент начала проекта в сети было 9 точек в г.Екатеринбург, спустя 2 года сеть работает в 6 регионах, 22 городах и имеет около 50 действующих точек, а также большие планы по дальнейшему расширению.

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

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

Работы от старта проекта до запуска первого релиза новой версии сайта заняли 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. Простое управление контентом и настройками системы

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

В работе над новым проектом были задействованы:

• менеджер проекта
• 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 месяца.

При определении стека веб-технологий для реализации этого проекта нами совместно с Заказчиком был выработан ряд критериев:

1. Высокая производительность системы
2. Большое количество интерактивных элементов и обновление данных на странице без ее перезагрузки
3. Устойчивость к нагрузкам и безопасность
4. Возможность масштабирования системы по мере роста нагрузки и подключения новых точек продаж без существенного переделывания системы
5. Использование популярных решений, которые имеют хорошее комьюнити и активно развиваются (для более простой технической поддержки проекта в дальнейшем).

В итоге, был выбран следующий стек технологий:

• Монорепозиторий: nx
• Бэкенд: nodejs, nestjs, graphql, rabbitMQ
• Фронт: nextJs, apollo
• База Данных: postgres, redis

Использование фреймворка nextJs (который основан на популярной библиотеке React) было обусловлено планами по дальнейшему созданию мобильного кроссплатформенного приложения на React Native — мы могли сэкономить как на разработке фронтенда, так и на использовании общего бэкенда.

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

Для ускорения проекта, параллельно шла разработка нескольких модулей:

1. основная архитектура проекта (backend и база данных)
2. сервис интеграции с IIKO через IIKO Cloud
3. фронтенд сайта:
4. главная страница (SPA)
5. внутренние страницы (категории, подкатегории, карточки товара)
6. корзина и оформление заказа
7. прочие страницы сайта
8. административная панель сайта

Изначальные сложности возникли при обеспечении качества интеграции веб-витрины и IIKO:

• IIKO не обеспечивает 100% надежность в обработке входящих заказов, при большой нагрузке на сервер заказы могут “теряться”. Данная проблема была решена за счет написания собственного сервиса очередей, который контролировал доставляемость заказа с сайта в ERP-систему
• Время обработки запросов от сайта к IIKO по применению скидок, бонусов и подарков может “скакать” от долей секунды до 15-20 секунд, что затрудняет оформление заказа. Проблема была решена за счет дублирования основных расчетов скидки на стороне сайта.
• IIKO Cloud на момент начала проекта был новым API и разработчики вносили в него регулярные изменения. В итоге, нам неоднократно приходилось вносить изменения в уже созданный код для обеспечения его совместимости с изменившимся API ERP-системы.

В итоге, все эти задачи были решены.

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

• Зависимость ассортимента от точки самовывоза/адреса доставки
• Необходимость регулярной проверки на попадание товара в стоп-лист в процессе оформления заказа (товар закончился)
• Расчет срока доставки в зависимости от нагрузки на точку продаж
• Перенос заказа между точками продаж при смене дневной/ночной зон доставки
• Учет минимальной стоимости заказа для разных зон доставки по каждой точке продаж
• Применение скидок/акций в зависимости от выбранного способа доставки/состава заказа/точки продаж
• Сопутствующие товары
• Сохраненную историю заказов покупателя
• Бонусные баллы
• Доступные методы оплаты и доставки и т.д.

Также сложными моментами на проекте были:

• дублирование похожих товаров в разных точках продаж (некоторые товары имели одинаковое название, но разные артикулы внутри системы, при смене точки продаж необходимо заменять артикул на аналогичный, доступный в новой точке)
• Обеспечение обновляемости данных на страницах категорий и карточек товаров по их наличию “на лету” и при этом обеспечение индексации всех страниц сайта поисковыми системами.

В октябре 2021 года новая версия сайта italianpizza.ru была запущена.

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

В итоге, за следующие полгода был проведен большой объем работ, совокупно составивший свыше 1000 человекочасов и который включал в себя:

• Подключение онлайн-оплаты
• Разработку собственного сервиса кэширования контента и переход с SSG обратно на SSR
• Подключение расширенной аналитики поведения пользователей
• Изменение выбора столовых приборов
• Изменение выбора бесплатных и дополнительных сопутствующих товаров
• Частичный редизайн карточки товара
  
• Создание отдельного микросервиса для обработки условий доставки
• Онлайн расчет планируемого времени доставки
• Внедрение персональных настроек по получению электронных чеков и акционных предложений
• Изменение функционала раздела “Бизнес-ланчи”
• Изменение функционала выбора адреса доставки и пиццерии по умолчанию для небольших городов
• Внедрение промо-стикеров
• Внедрение уведомлений для посетителей
• Оптимизация работы сайта в период пиковых нагрузок и т.д.

IIKO — это хорошая ERP-система для foodTech-проектов, но она имеет ряд ограничений в части надежности и производительности, к тому же она довольно дорога во владении и доработке.

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

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

На основе требований клиента мы разработали сервис “Бланк загрузки”, который распределяет все заказы, поступающие в точку продаж по 15-минутным слотам.

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

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

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

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

Бланк загрузки - это только один из сервисов, которые используются в “Личном кабинете франчайзи”

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

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

К личному кабинету подключены уведомления через e-mail и через telegram-бота.

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

• В соответствии с задачами, поставленными Заказчиком, был автоматизирован процесс оформления и обработки заказа, что позволило сократить количество задействованных операторов
• Заказчик получил удобный и легко масштабируемый инструмент развития бизнеса - добавление нового города или точки и старт продаж через Интернет осуществляется в течение 1 рабочего дня
• За счет внедрения внутренних сервисов повысилась производительность труда операторов колл-центра и менеджеров пиццерий
• Веб-сервисы без сбоев обслуживают работу сети пиццерий круглосуточно, включая периоды пиковой нагрузки в праздники
• Трафик из поисковых систем увеличился в 4,1 раза (по старым городам присутствия - в 2,7 раза) за счет расширения количества посадочных страниц и их оптимизации.

Если у Вас есть вопросы по этому проекту или Вас интересует разработка и продвижение проектов в сфере Foodtech (и не только), обращайтесь к нам, в "Сайтоник".