Изображение взято с сайта заказчика italianpizza.ru 

Разработка сайта с web-витриной для франчайзинговой сети общепита, принимающей 10000 онлайн-заказов в сутки и увеличение трафика в 4,1 раза

 

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

 Особенности кейса: 

1. Создание системы, способной стабильно работать под высокой нагрузкой.
2. Веб-витрина, на которой франчайзи-партнеры легко могут изменять ассортимент в зависимости от ситуации в точке общественного питания.
3. Личные кабинеты партнеров. 
4. Интеграция с другим программным обеспечением и доработка отдельных процессов по автоматизации пиццерий.

Задача проекта: Разработка web-инфраструктуры, которая позволит: 

– принимать более десяти тысяч (!) заказов за сутки;    

– с легкостью подключать до 20 городов на протяжении месяца. 

Сайт проекта: italianpizza.ru 

Команда проекта: 

1. Со стороны «Сайтоника» в работе над новым сайтом, кроме менеджера проекта и web-разработчиков, участвовали специалист по SEO, маркетолог и UX/UI- дизайнер.

UX (User Experience) – пользовательский опыт.   UI (User interface) – пользовательский интерфейс. Оба понятия применяются в связи с оценкой удобства пользователя при работе с сайтом и впечатления, которое сайт производит на посетителя.

 

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

 

Информация о заказчике и предыстория проекта  

Заказчик проекта – сеть пиццерий «ИталианПицца». Компанию «Сайтоник» и заказчика связывают длительные партнерские отношения, в рамках которых «Сайтоник» оказывает услуги по интернет-маркетингу и web-разработке. Поэтому, когда во время весны 2020 года, собственники бизнеса решили расширить «ИталианПицца» за счет партнеров франчайзи и понадобился новый сайт, команда «Сайтоника» с ходу включилась в реализацию нового амбициозного проекта. 

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

– Этим предпринимателям принадлежит франчайзинговая сеть из пяти сотен пивных магазинов в 220 городах РФ и Казахстана.

– «ИталианПицца», до выхода на рынок франшиз, имела девять торговых точек в Екатеринбурге, а через два года в ней уже работает 50 пиццерий в 22-х городах шести регионов. 

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

 

Локальные задачи проекта по автоматизации и продвижению 

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

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

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

Чтобы успешно сопровождать проект в Интернете, разработчикам потребовалось решить несколько серьезных задач, которые были призваны по максимуму автоматизировать заказы и доставку, а также создать надежную базу для интернет-продвижения. Перечислим наиболее важные из них.

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

 Дело в том, что в нише “пицца/роллы с доставкой” очень высокая конкуренция. Проект с самого начала должен был соперничать за клиентов с такими федеральными гигантами как «Яндекс.Еда» и «Деливери Клаб». Вдобавок на рынке уже укрепились серьезные федеральные и региональные бренды – eda1.ru, dodopizza.ru, papajohns.ru и т.д.

2. Максимум автоматизации бизнес-процессов.

Нужно было уменьшить временные затраты колл-центра и пиццерий на отработку заказов. Идеальный вариант – автоматизировать все бизнес-процессы. 

3. Увеличить трафик на сайт с помощью SEO-оптимизации.

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

SEO (Search Engine Optimization) или поиско́вая оптимиза́ция — это совокупность действий по внутренней и внешней оптимизации сайта, выполняемых для повышения его позиции в списке результатов поисковых систем по определенным запросам, которые делают пользователи. Цель SEO – увеличение органического (бесплатного) трафика на сайт и привлечение большего количества потенциальных клиентов.

 

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

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

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

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

Заказчик использует производственную ERP-систему IIKO. На специалистов «Сайтоника» была возложена задача по обеспечению двусторонней интеграции web-сервисов заказчика с IIKO в онлайн-режиме. 

IIKO – это российская отраслевая система планирования ресурсов предприятия (ERP – Enterprise Resource Planning) для автоматизации учета в ресторанах, кафе, барах, службах доставки готовых блюд. Программный продукт включает автоматизацию кассы, склада, расчетов с персоналом, мотивации, кухни, финансов и отчетности.  Существует облачная и локальная версия IIKO. Программный продукт предназначен для управляющих и собственников бизнеса.

 

5. Поддержка скидок, акций и бонусной программы

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

6. Управление очередями и временем доставки в онлайне

 Заказы пиццы/роллов сильно подвержены “сезонным” колебаниям. Активность покупателей возрастает в обеденное время и незадолго до ужина. Намного больше заказов перед праздниками и в дни майских и январских выходных. 

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

7. Личные кабинеты для владельцев франшизы

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

8. Несложные инструменты для работы с контентом и настройками системы

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

 

Концепция для проектирования сайта

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

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

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

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

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

Увы, SPA является не очень хорошим вариантом со стороны SEO, поскольку не предусматривает страницы, оптимизированные для средне- и низкочастотных запросов.   

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

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

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

SEO-проектирование, обсуждение нужной функциональности с профильными специалистами заказчика и результаты изучения API IIKO Cloud, стали базой для создания технического задания (ТЗ) на разработку сайта. 

В ТЗ с подробностями была описана сущность каждого элемента сайта, в т.ч. его поведение и схема, по которой он будет интегрироваться с внешними системами. Например, с банковским эквайрингом, сервисами геолокации и SMS-информирования, экосистемой IIKO. 

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

В общей сложности, на этап проектирования ушло полтора месяца. 

 

Дизайн проекта, адаптивность и фирменный стиль

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

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

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

 

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

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

Таким образом, второй этап дизайна длился полтора месяца.  

Серия изображений предоставлена компанией «Сайтоник» с сайта https://siteonic.ru/

 

Стек технологий, задействованных в проекте

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

1. Система должна обладать высокой производительностью.

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

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

В результате всестороннего анализа в технологический стек были включены: 

– Монорепозиторий: NX, 

– Backend : nodejs, nestjs, graphql, rabbitMQ

– Frontend: nextJs, apollo

– База Данных: postgres, redis

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

 

Программирование первого релиза 

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

Чтобы ускорить запуск проекта, команда «Сайтоника» параллельно работала над несколькими модулями: 

1. Основной архитектурой проекта – бэкендом и базой данных. 
2. Сервисом интеграции с IIKO. 
3. Фронтендом web-сайта.
4. Главной страницей сайта.
5. Над категориями, подкатегориями и карточками товаров, т.е. внутренними страницами ресурса.
6. Корзиной и процессом, связанным с оформлением заказа. 
7. Прочими страницами проекта. 
8. Административной панелью сайта. 

Первоначально сложности возникли с обеспечением качественной интеграции web-витрины и IIKO. Однако разработчики с ними справились, рассказываем как. 

Проблема	Решение
IIKO не может обеспечить полную надежность процесса обработки входящих заявок. При пиковых нагрузках на сервер возможна потеря заказов.	Написание собственного сервиса очередей, который контролирует передачу заказа от сайта к ERP-системе.
Нестабильное время обработки запросов сайта со стороны IIKO. Информация по предоставлению скидок, бонусов и подарков может передаваться за доли секунды или задерживаться до 20 секунд. Это мешает оформлению заказов.	Дублирование основных расчетов по скидкам на самом сайте
Во время старта проекта IIKO Cloud был новым API. Он дорабатывался и менялся регулярно.	Многократное изменение уже готового кода, чтобы обеспечить его совместимость с отредактированным кодом API ERP-системы.

 

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

– Ассортимент зависит от пиццерии/адреса доставки.

– Необходимо учитывать наличие товара и во время оформления заказа регулярно проводить проверку: не попал ли товар в стоп-лист. 

– Время доставки рассчитывается с учетом нагрузки на пиццерию.

 – Происходит перераспределение заказов между точками продаж в результате смены дневной/ночной зон доставки.

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

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

– К продаже предлагаются сопутствующие товары.

– История заказов покупателей сохраняется. 

– Происходит начисление бонусных баллов. 

– Учитываются способы оплаты и доставки, которые доступны.

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

1. Дубли сходных товаров в разных пиццериях. У некоторых товаров были одинаковые названия, но они имели разные внутрисистемные артикулы. Если менялась точка продаж, возникала необходимость замены артикула на тот, который был доступен в новой точке. 
2. В зависимости от наличия товара, должны были “с ходу” обновляться страницы категорий и карточек товаров, а разработчикам необходимо было при этом обеспечить индексацию всех страниц сайта поисковиками. 

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

 

Проект продолжил развитие 

Еще во время разработки нового сайта, представители заказчика делились идеями и предложениями по развитию ресурса. Поэтому в последующие полгода был выполнен серьезный объем работ, на который команда «Сайтоника» потратила более тысячи (!) часов. За это время:

1. Была подключена онлайн-оплата;
2. Разработан собственный сервис кэширования для контента и переход между SSG и SSR;

SSG (Static Site Generator) или статический генератор сайтов – подход в веб-разработке, позволяющий создавать веб-сайты, страницы которых генерируются в статические файлы в момент сборки. SSR (Server Side Rendering) или рендеринг на сервере – технология, при которой браузер запрашивает у сервера, нужный для отображения HTML, сгенерированный именно на сервере, а затем отображает его в браузере.

 

3. Разработчики подключили расширенную аналитику поведения пользователей;
4. Реализовано изменение выбора для:

– для дополнительных сопутствующих и бесплатных товаров,

– для столовых приборов; 

5. Карточка товара подверглась частичному редизайну;
6. Создан отдельный микросервис, обрабатывающий условия доставки;
7. Реализован онлайн-расчет для планирования времени доставки;
8. Были внедрены персональные настройки, связанные с информированием об акциях и получением e-чеков;
9. Произошло изменение функционала: 

– в разделе “Бизнес-ланчи”,

– при выборе адреса для доставки и точки продаж по умолчанию в малых городах;

10. Внедрены:

– промо-стикеры, 

– уведомления для посетителей.

 Кроме того, команда «Сайтоника» оптимизировала работу сайта под пиковыми нагрузками и занималось другими важными вещами. 

 

Расширение возможностей IIKO за счет дополнительных сервисов 

 Специалисты «Сайтоника» говорят, что IIKO является хорошей ERP-системой для ниши фудтеха. Тем не менее есть ряд особенностей, ограничивающих ее применение. В частности, связанных с надежностью и производительностью. Кроме того, это сравнительно дорогой сервис, если смотреть с позиции владения и доработки.

В связи с этим, вдобавок к новому сайту, команда «Сайтоника» разработала для заказчика несколько внутренних сервисов, призванных автоматизировать основную часть бизнес-процессов. 

 

Автоматизация загрузки торговой точки 

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

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

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

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

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

 

Личный кабинет для партнеров 

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

– можно посмотреть количество заказов;

– проанализировать финансовые показатели ресторана; 

– контролировать, что происходит с оплатами;

– отслеживать попадание товаров в стоп-лист и т.д.

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

Личный кабинет интегрирован с уведомлениями через электронную почту и Телеграм-бота. 

 

Результаты работы над проектом

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

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

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

– Внедрение внутренних сервисов помогло повысить производительность труда операторов в колл-центре и менеджеров в ресторанах. 

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

– Удалось добиться роста трафика в 4,1 раза (по городам длительного присутствия – в 2,7 раза). Это произошло благодаря увеличению числа посадочных страниц, а  также их оптимизации.