Кейс: как перевести интернет-магазин с CMS на фреймворк, повысив конверсию заказов в 3 раза и оптимизировав бизнес-процессы

Novex — первая в Сибирском федеральном округе и четвертая по размеру сеть дрогери формата в России (~300 магазинов). Предприятие занимается оптовой и розничной торговлей косметикой, парфюмерией, бытовой химией и хозяйственными товарами. 

Перед компанией встала задача масштабировать интернет-магазин на 1С-Битрикс: оптимизировать старые и внедрить новые процессы по заказам, доставке и учету остатков товаров на складах компании. Также ускорить работу сайта, интегрировать внутренние системы учета с интернет-магазином и сделать мобильное приложение. В статье эксперты Creonit рассказывают о том, как этого удалось достичь. 

На первом этапе было выявлено несколько проблем: 

1. Систему невозможно масштабировать для новых процессов из-за ограничений 1C-Битрикс. На сайте было много нестандартных коробочных компонентов, из-за которых логика реализации процессов на стороне Novex отличается от стандартной логики коробочных компонентов Битрикс. Внесение новых процессов повлияет на уже имеющиеся и вызовет проблемы. Это связано с тем, что при переписывании заложенной в коробке функциональности, модули перестают автоматически обновляться. Это значит, что нужно поддерживать все вручную, а где-то использовать костыли.

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

2. Сложные бизнес-процессы и интеграции с информационными системами. Каждый филиал магазина Novex является складом. То есть при внесении новых процессов нельзя ориентироваться на остатки только одного склада. Чтобы вносить изменения, нужно разбираться, как работает вся логистика и бизнес-процессы, чтобы все корректно работало. К тому же имели место сторонние системы учета, которые тоже нужно было подключать к новым процессам. 

Техническое решение

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

Разделим фронтенд и бэкенд: на фронтенде решили использовать фреймворк Vue.js с реактивным интерфейсом, поскольку не было смысла переделывать все с нуля. Ключевой проблемой на старте была медленная работа сайта, поэтому в смене всего интерфейса необходимости не было — просто взяли текущую верстку (сохранив дизайн) и натянули ее на реактивный фреймворк. 

Чтобы увеличить скорость загрузки сайта и расширить функциональность проекта и интеграций, на бэкенде перешли на фреймворк Symfony. Фреймворк открывает большие возможности для развития проекта. Впоследствии было реализовано RESTful API, а фронтенд переписан на веб-приложение, которое использует данное API. В итоге получилось единое API для веб- и мобильного приложений.

Аналитика и бизнес-процессы

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

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

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

• Управление кассами и мобильными терминалами (SetKit и SetCentrum).
• ERP-система и управление каталогом (SAP).
• CRM-система (RightWay).
• Управление складом (Infor).
• ART Trade (комплексная система управления товародвижением).

Проектирование

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

Административная панель

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

Чтобы зафиксировать, как работают бизнес-процессы по отдельности и как взаимодействуют друг с другом, составляли детальные блок-схемы для основных сценариев использования магазина (создание и согласование заказа, сборка и отгрузка товаров, изменение и отмена заказа и т.д.) и фиксировали работу бизнес-процессов по отдельности при этих операциях и во взаимодействии в Miro. Процессов было много.

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

Разработка

Был сохранен текущий дизайн интернет-магазина, написан API на Symfony и фронтенд на Vue, верстка взята с текущего сайта с учетом доработок. 

Оформление заказа

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

Параллельно с этими процессами Novex полностью изменили у себя фулфилмент, чтобы пользователь мог получить заказ как можно быстрее. В предыдущей версии сайта процесс доставки мог занимать 2 недели в пределах одного города. Сейчас для товаров под заказ клиент видит кратчайшие сроки доставки, когда товар поступит на выдачу, 1-3 дня. 

Склад и доставка

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

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

Интеграции

Осуществили интеграции с сервисом автоматизации маркетинга и маркетплейсами. 

Интеграция с сервисом автоматизации маркетинга

Сначала выгрузили из CRM данные: список клиентов, их историю заказов, различные справочники, товары. 

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

Выбранный сервис собирает информацию о пользовательском поведении через трекер, который ставится на сайт. Есть разные сценарии, вроде "просмотр товарной позиции клиентом" или "просмотр товарной категории клиентом". 

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

Теперь сервис получает: 

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

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

Интеграция с Ozon

Тестовая площадка Ozon периодически не отвечала на запросы или работала не так, как нам нужно. Из-за этого отмену, возврат и прогон заказа по основному сценарию было сложно тестировать и отлаживать. Также все данные, включая данные ПВЗ для карты, решили хранить на сервере Novex. Это помогло сократить время загрузки нескольких сотен ПВЗ в крупном городе для клиента и сделать процесс удобнее. Синхронизировались с Ozon, узнали, как часто они обновляют эти данные и забираем теперь к себе эти обновления по расписанию.

Интеграция с "Яндекс Доставкой"

Сложность была в тестировании некоторых заказов, поскольку для них нужно было подключать курьеров "Яндекс.Доставки". Проверяли, как происходит развоз нескольких заказов для разных клиентов в случае отмены или возврата части заказа. На тестовом контуре "Яндекса" это пока нельзя проверить для всех заказов, поэтому тратили тестовые вызовы реального курьера, объясняя по телефону весь порядок действий, который хотели проверить. 

Также доработали обработку документов, чтобы все формировалось так, как удобно Novex.

Тестирование

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

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

На проекте тестировали интеграцию с системами:

• Управление кассами и мобильными терминалами SetKit и SetCentrum;
• ERP-система и управление каталогом SAP;
• CRM-система RightWay;
• ART Trade (комплексная система управления товародвижением, масштабируемая и полнофункциональная, разработана на базе промышленных компонентов и предназначена для автоматизации процессов управления товародвижением, документооборота и хранения данных);
• Управление складом Infor.

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

Так как прямых доступов в системы SAP, Infor, SetKit, SetCentrum, RightWay нет, то тестирование производилось параллельно с разработчиками этих систем со стороны заказчика. Получилась такая совместная работа по обмену данными.

Запуск и результаты

Новый интернет-магазин был запущен в мае 2021 года. По графикам можно увидеть разницу в пользовательском поведении на сайте Novex до мая 2021 (запуск нового сайта) и после. Графики представлены с января 2021 по август. Абсолютные цифры скрыты, данная информация необходима для демонстрации динамики. 

Глубина просмотра. Рост по показателям почти в два раза.

Отказы. С двузначной цифры к однозначной, в среднем в 2,5-3 раза меньше отказов.

Время на сайте. Есть повышенный срок и на старой кодовой базе (февраль-март в период сезона подарков), но в остальных периодах в среднем на минуту больше пользователи стали находиться на сайте.

Успешное оформление заказа на сайте —  трехкратный рост конверсии.

Результаты: 

• Перезапустили интернет-магазин с 1С-Битрикса на Symfony, повысили конверсию заказов в 3 раза и ускорили работу сайта в 2 раза. 
• Разобрали и оптимизировали все внутренние бизнес-процессы компании и подготовили сервис к масштабированию бизнеса. Оставили текущую верстку, но переписали ее на реактивном фреймворке, а бэкенд перезапустили на Symfony. Это привело к увеличению скорости работы сайта, увеличился средний чек покупок (точные цифры под NDA). 
• Выполнили интеграции с системами учета и автоматизировали их работу: благодаря этому интернет-магазин сейчас берет все данные из множества разных сервисов (связанных с доставкой, оплатой, сборкой товара и т.д.) и объединяет их на бэкенде на уровне логики в единое целое, корректно выводя для конечного пользователя информацию на сайте. Покупатели теперь видят всю нужную информацию: не только сам товар, но и где и в какой срок его можно получить, даже не оформляя заказ на сайте. Это косвенно положительно влияет на продажи в самой сети. 
• Оптимизировали и улучшили внутренние процессы, что тоже привело к увеличению конверсии заказов и улучшению как бизнес-метрик работы с пользователями (конверсия и количество заказов), так и пользовательских (скорость работы сайта и удобство интернет-магазина).