Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

Мы — Creonit. Digital production. Разрабатываем цифровые сервисы. Специализируемся на веб и мобильной разработке, делаем бэкенд и интеграции любой сложности, проектируем архитектуру и управляем процессами.

На примере нашего клиента Novex хотим показать, как безболезненно перевести интернет-магазин с 1С-Битрикса на фреймворк и какую пользу это принесёт бизнесу и его клиентам.

Статья будет полезна для тех, кто хочет узнать, как:

  • Безгранично масштабировать интернет-магазин;
  • Увеличить конверсию заказов с сайта;
  • Оптимизировать внутренние бизнес-процессы;
  • Сэкономить на разработке мобильного приложения за счёт единого бэкенда.

О заказчике

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

Цели и проблемы

Клиент хотел:

  • Масштабировать интернет-магазин (оптимизировать старые и внедрить новые процессы по заказам, доставке и учёту остатков товаров на складах компании) и сделать его гибким для дальнейшего масштабирования;
  • Ускорить работу сайта;
  • Сделать мобильное приложение и интегрировать внутренние системы учёта с интернет-магазином.

Однако после первого общения мы выявили следующие проблемы:

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

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

2. Интернет-магазин работал медленно, были низкие показатели конверсии

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

3. Сложные бизнес-процессы и интеграции с несколькими информационными системами

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

Задачи

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

Решение

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

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

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

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

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

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

Этапы

  • Аналитика;
  • Проектирование;
  • Разработка;
  • Тестирование;
  • Запуск.

Аналитика

Мы всегда приступаем к работе над проектом с глубокого погружения в бизнес заказчика. Novex — офлайн-сеть. Это отличает проект от других интернет-магазинов, потому что каждый филиал сети — склад. Есть отдельный склад только для интернет-магазина. Значит, уже нельзя ориентироваться только на остатки одного склада. Нужно понимать, как устроена логистика компании, как она отражается в информационных системах. Какие бизнес-процессы уже существуют и как их можно оптимизировать, чтобы внедрить новые процессы по заказам, доставке, учёту остатков и улучшить старые.

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

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

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

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

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

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

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

Разработка

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

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

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

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

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

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

Единый бэкенд для сайта и мобильного приложения

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

Для того, чтобы не разрабатывать несколько приложений (отдельно под iOS и Android), выбрали для работы Flutter. Сделали кроссплатформенное приложение сразу под обе платформы, что позволило сократить стоимость разработки для заказчика и избавило его от необходимости поддерживать в актуальном состоянии два приложения.

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

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

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

Интегрировали интернет-магазин Novex с маркетплейсом OZON для расширения географии доставки Novex.

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

У OZON всегда должна быть актуальная информация о количестве доступных товаров Novex. Для этого мы синхронизировали данные магазина и OZON с помощью CMS, которая выступает в качестве сервиса агрегации товарных данных и обработки заказов. Novex использует несколько сервисов:

  • SAP (управление товарами, базовая информация по товарам, бухгалтерия и т.д.).
  • Infor (управляет складом, отгрузками, упаковкой заказов со склада и передачей их в пункт приема заказов).
  • ArtTrade (предоставляет расширенную информацию по товарам. Например, его характеристики, картинки и т.д.).

CMS помогает автоматизировать загрузку товаров и обновление информации об остатках по API. Агрегирует данные из всех вышеперечисленных систем и отправляет их в OZON, благодаря чему информация о товарах и остатках на витрине OZON всегда актуальная.

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

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

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

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

Процесс интеграции

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

Составили ТЗ на интеграцию: какие данные нужно выгрузить и в каком формате, в каких местах на сайте нужно будет взаимодействовать с клиентом. Mindbox собирает информацию о пользовательском поведении через трекер, который ставится на сайт. Есть разные сценарии, вроде: «просмотр товарной позиции клиентом» или «просмотр товарной категории клиентом». Мы описали сценарии взаимодействия и связали их с вызовами нужных API Mindbox.

Теперь при регистрации пользователь сразу попадает в Mindbox и сервис отслеживает всё его взаимодействие с сайтом. Формирует систему рекомендаций, оповещений («вы забыли заказать товары, которые лежат в корзине!»), подписку на рассылки и другую персонализацию контента, чтобы предлагать релевантные покупки и предложения для конкретных пользователей.

Почитать подробнее про интеграцию с Mindbox можно в нашем решении.

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

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

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

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

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

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

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

Запуск

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

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

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

Как мы перевели интернет-магазин с CMS на фреймворк и повысили конверсию заказов в три раза

Результаты

1. Мы перезапустили интернет-магазин с 1С-Битрикса на Symfony, повысили конверсию заказов в 3 раза и ускорили работу сайта в 2 раза.

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

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

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

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

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

Если вашему бизнесу необходимо решить проблемы с производительностью интернет-магазина на 1С-Битрикс — оставьте заявку на нашем сайте, обсудим ваши задачи, проконсультируем и подберём лучшее решение.

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

2626
14 комментариев

если это не на rust, то грош цена всему этому. Обязательно перепишите.
А вообще, конечно, такая клюква в статье, что аж экран скукожился.

Ответить

А в чём клюква-то?)

Ответить

Сколько отвалили за это?
10кк?

Ответить

Для того, чтобы отразить всю логику интернет-магазина именно на 1С-Битриксе, нужно было бы почти всё переписать с нуля.

Есть пример? Ну хотя бы пару малюсеньких таких.

Ответить

Из примеров: у Novex нестандартная схема работы складов и сбора остатков. На 1С-Битрикс реализация вышла бы более дорогой и сложной.

Ответить

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

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

Ответить

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

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

Ответить