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

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

Привет! На связи Creonit — digital production. Мы занимаемся разработкой цифровых сервисов, в том числе веб и мобильных приложений.

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

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

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

О заказчике

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

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

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

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

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

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

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

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

Задачи

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

Решение

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

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

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

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

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

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

Этапы 

1. Аналитика;
2. Проектирование;
3. Разработка;
4. Тестирование;
5. Запуск.

Аналитика

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

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

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

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

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

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

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

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

Разработка

Фичи

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Для интеграции с OZON настроили: 

1. Экспорт товаров в Ozon (карточки товаров);
2. Отслеживание статуса модерации товара;
3. Обновление остатков;
4. Получение новых заказов;
5. Упаковку заказа;
6. Отгрузку заказа;
7. Завершение/Отмену заказа;
8. Создание возвратов (Перенос возвратов из Ozon в CMS Novex);
9. Подтверждение возврата в CMS;
10. Формирование маршрутного листа;
11. Получение этикеток по заказу.

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

Интегрировали интернет-магазин с Яндекс Доставкой.

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

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

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

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

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

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

Теперь Mindbox получает: 

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

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

Интеграция с Mindbox позволила Novex:

1. увеличить количество регистраций в Личном кабинете на ~60%;
2. увеличить количество заказов с применением бонусной карты до 85%;
3. увеличить динамику роста заказов и положительных отзывов покупателей.

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

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

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

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

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

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

Так как прямых доступов в системы 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, о кейсах и интересных решениях, которые мы применяем на проектах, о полезных лайфхаках для менеджеров и не только.