Перезапуск интернет-магазина Novex

1. Вводная задача от заказчика, проблематика, цели

О клиенте

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

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

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

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

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

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

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

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

Задачи

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

2. Описание реализации кейса и творческого пути по поиску оптимального решения

Решение

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

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

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

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

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

Этапы

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

Аналитика

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

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

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

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

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

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

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

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

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

Разработка

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

Фичи

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

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

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

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

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

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

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

Запуск

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

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

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

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

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

3. Результаты сотрудничества

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

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

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

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