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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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