Кейс: Перезапуск интернет-магазина Novex
Novex
novex.ru

Novex

Интернет-магазин

Дата запуска проекта — май 2021

Как мы перезапустили интернет-магазин с 1С-Битрикс на Symfony, повысили конверсию заказов в 3 раза, разобрали и оптимизировали бизнес-процессы компании и подготовили сервис к масштабированию.

О клиенте

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

280
магазинов
7
регионов

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

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

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

 

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

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

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

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

Задачи

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

Решение

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

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

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

Павел Бондарович
Технический директор
Павел Бондарович

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

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

Этапы 

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

Аналитика

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

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

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

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

Выбрали техническое решение на основе этих данных

Разделим фронтенд и бэкенд: фронтенд будем писать на реактивном фреймворке Vue.js, вёрстку возьмем с текущего сайта и доработаем в целях экономии времени. На бэкенде используем фреймворк Symfony, чтобы увеличить скорость загрузки сайта для конечного пользователя и расширить функциональность проекта и интеграций. Фреймворк открывает для большие возможности для развития проекта. Разработаем и реализуем RESTful API, а фронтенд перепишем на веб-приложение, которое использует это API, чтобы получилось единое API для веб- и мобильного приложений.

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

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

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

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

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

Разработка

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

Фичи

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

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

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

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

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

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

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

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

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

Дарья Лукьянова
Тестировщик
Дарья Лукьянова

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

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

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

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

Запуск

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

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

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

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

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

Результаты

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

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

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

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

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

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

Спасибо за внимание!

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

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

Другие наши кейсы

Интернет-магазин кофейных зерен и аксессуаров
Интернет-магазин ковровых изделий
Интернет-магазин интересных товаров для дома
Интернет-каталог товаров для сна
Сайт и интернет-магазин
Интернет-магазин автозапчастей
Давайте обсудим ваш проект
Заполняя данную форму, вы принимаете условия Соглашения об использовании сайта, и соглашаетесь с Правилами обработки и использования персональных данных
Дмитрий Важенин
Дмитрий Важенин

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

Микроблог