Компания с собственным производством товаров для 85 видов спорта Decathlon годами развивала и поддерживала комплекс своих технологических решений, чтобы потребитель воспринимал онлайн и офлайн как единую «точку обслуживания». Агентству Aero предстояло разработать новые продукты и интегрировать их в уже работавший комплекс сервисов. О том, как запускали eсommerce-платформу, Sostav узнал у представителей проекта.
Задачи
Система сервисов, которыми пользовался Decathlon в России, стала изживать себя — нужно было обновляться на всех уровнях, от интернет-магазина до внутренних систем. Перед российским подразделением компании встал выбор: брать коробочные решения с рынка, переходить на французское ПО или написать кастомный сервис.
Светлана Азоркина, директор по продуктам электронной коммерции Decathlon:
Мы приняли решение отстраиваться от головного офиса, чтобы получить гибкость во внедрении новых технологий и решений, поддерживая потребности локального бизнеса и наших клиентов. Такое решение было непросто продвинуть — оно стоило нам нескольких лет. Огромная инвестиция времени и ресурсов. Aero оказался наиболее подходящим и соответствующим нашему запросу интегратором, который не побоялся сложной и незнакомой им экосистемы.
Стратегической целью проекта была разработка обновлённой системы локальной архитектуры, которая бы позволила быстро запускать новые функции и тестировать идеи бизнеса локально, независимо от головного офиса во Франции.
В рамках проекта Aero решал следующие задачи:
- провести интеграцию с технической экосистемой Decathlon: 18 сервисов собственной разработки;
- качественно обновить UX/UI клиентских интерфейсов по принципу mobile first;
- заложить системную логику для последующего внедрения бизнес-модели маркетплейса;
- разработать с нуля локальную PIM-систему;
- обеспечивать бесшовный опыт покупки для офлайн- и онлайн-клиентов;
- автоматизировать ручные операции бизнеса;
- прийти к концепции мультиканальности, на едином бэкенде развернуть множество фронтендов: сайт, мобильное приложение, и в перспективе — обеспечить техническую возможность создания вертикальных тематических маркетплейсов (например, маркетплейс товаров для лыжников);
- сохранить позиции в выдаче при переработке сайта (SEO);
- выстроить эффективную систему ИТ-сопровождения бизнеса.
Работы по проекту шли параллельно развитию текущего бизнеса, поэтому важно было не просто сохранить текущие бизнес-показатели компании при «переезде» на новые технологические решения, но и улучшить их.
Интеграция команд
Реализация такой сложной системы, которая, к тому же, интегрируется с остальным технологическим стеком компании, требует от команды глубоких знаний местной специфики, отмечает команда проекта. На старте Aero столкнулся с трудностями, поэтому руководство Decathlon предложило объединить экспертизы двух команд — разработчиков Aero и инхаус-разработчиков компании.
Оксана Скобелева, руководитель проектной группы:
Меня очень порадовало вовлечение наших партнёров из Decathlon. В день у нас было по 5−6 встреч, к тому же участвовало руководство из Франции и России. Это помогло реализовать проект такого уровня сложности.
Команда Decathlon, помимо технической экспертизы, привнесла понимание тонкостей бизнеса и потребностей конечных пользователей. Проект полностью перешёл на Agile, и теперь обе команды работали по одной методологии. Так произошло главное — изменился майндсет сотрудников, стёрлось деление на своих и чужих, а также сформировались полностью укомплектованные команды аналитики, разработки и QA. Командам удалось усилить друг друга и добиться поставленной цели.
Сергей Лобанов, технический директор Decathlon:
Сначала наша команда выступала как заказчик с функцией ментора: мы проводили code review и code acceptance, писали замечания и пожелания. Но со временем мы поняли, что этого мало, и подход недостаточно гибкий. В итоге у нас получилось объединить команды так, что совершенно не чувствовалась граница — мы заказчики, вы исполнители. Мы работали и продолжаем работать как единая команда.
Одним из крупных проектов стала работа над перепроектированием покупательского опыта в онлайне.
UX/UI. Новый интернет-магазин Decathlon
В Aero предпроектной подготовкой всегда занимается команда продуктовых и data-аналитиков.
Data-аналитики отвечают за количественную сторону: в их инструментарии BI-системы, системы веб-аналитики, GTM, данные с кассовых аппаратов и показатели email-рассылок. После того, как массивы данных обработаны и найдены закономерности — данные попадают продактам.
Продакты занимаются проработкой гипотез и проведением качественных исследований: в их распоряжении глубинные интервью, кастдевы, CJM, фокус-группы и тесты UX-гипотезы с помощью специализированных сервисов.
При работе над магазином Decathlon специалисты Aero провели исследования обоих типов, в том числе опросы респондентов из разных целевых сегментов клиента. После глубинных интервью агентство проводило UX-тест: давало респондентам задания, которые соответствуют их обычному поведению на сайте, исходя из потребностей. Например, сноубордистам предлагали поискать элементы экипировки. Для проведения UX-теста все респонденты делились на две группы: половина тестировала десктопную версию сайта Decathlon, половина — мобильную.
Через исследования Aero пришёл к списку проблем, от которых нужно было избавиться на новой версии интернет-магазина. Их было около 50, в том числе:
- нерелевантные товары в выдаче;
- неудобная структура карточки товара;
- сложная форма регистрации;
- медленный процесс оформления заказа;
- проблемы при выборе пункта самовывоза.
Аналитика старого сайта и результаты UX-исследования стали основой дизайн-концепции новой ecommerce-платформы. Работа над проектом только начиналась, но помочь покупателям хотелось ещё до запуска. Поэтому агентство передало все результаты UX-исследования Decathlon, чтобы они могли улучшить пользовательский опыт на существующем сайте.
Aero переработал витрину, опираясь на данные и результаты бенчмарков: дизайнер работал в связке с аналитиком, и в его распоряжении были результаты анализа ближайших конкурентов.
На Decathlon Aero решал задачу сплитования корзины, чтобы в будущем имплементировать её на маркетплейс-модель. До начала работы покупатель магазина всегда получал товары из заказа одной посылкой. Он покупает сноуборд, очки и пару носков одним заказом — и даже если сноуборд и очки могут быть доставлены сегодня, он получит их только когда носки поступят со склада в другом городе. Ждать заказы приходилось долго.
Сплит корзины — решение на стыке технологий и логистики. Оно позволило доставлять покупателю товары из одной корзины по-отдельности, что напрямую влияет на лояльность, рассказывает команда проекта.
Ещё один пример подобного решения — матрица доставки. Decathlon работает со многими курьерскими службами, но при этом у них всегда есть ограничения по расстоянию, габаритам и типу товаров. Ещё есть текущая загрузка — она постоянно меняется. Aero эффективно перенёс разработку Decathlon на российскую платформу — оно анализировало содержимое заказа, сопоставляло с геоданными пользователя и подбирало подходящие службы доставки.
Уже на готовом сайте команда агентства реализовала систему сбора данных, настроила Google Analytics 360 и адаптировала её под сложный фронтенд. В случае с React простая установка кода не сработает, нужно учитывать специфику библиотеки.
Aero сделал полную разметку сайта и реализовал сбор всей доступной информации, чтобы специалисты компании могли понять всё, что делает пользователи на сайте: как используют поиск, подсказки, взаимодействуют с фильтрами, ведут себя на любой странице и сколько страниц каталога просматривают.
Интеграция «Битрикса» и Symfony
Ещё одна доработка — интеграция «1С-Битрикс» и Symfony. Фронтенд сайта был реализован как Single Page Application (SPA), нужно было создать вариацию Headless CMS для гибкого управления контентом. Для этой задачи был выбран не самый обычный способ, отмечают сотрудники Aero.
Сергей Лобанов, технический директор Decathlon:
Мы взяли от «Битрикса» админку, архитектуру и паттерны, чтобы не изобретать велосипед. «Битрикс» поместили в облако, обеспечили свободное горизонтальное масштабирование. Для интеграций выбрали Symfony — мы объединили этот фреймворк с «Битриксом» и использовали для написания REST API, логирования, кэширования, подключения composer-пакетов и интеграций с Elasticsearch, DaData и внутренними системами. Для связки «Битрикса» и Symfony мы разработали архитектуру взаимодействия, реализовали и связали событийные модели. Теперь эти два фреймворка гладко общаются между собой. Сейчас сайт работает стабильно и уверенно, обновляется и периодически добавляется новый функционал.
Единая PIM-система для эффективной работы с данными каталога
PIM-система — интерфейс для работы с каталогом, который автоматически забирает все данные из разных источников, нормализует их и представляет в удобном для работы виде.
В PIM хранится и корректируется вся необходимая информация о товаре и оттуда попадает в каталог интернет-магазина, в мобильное приложение или на маркетплейс. У каждого канала продаж свои требования и ограничения, касающиеся контента — в PIM хранятся данные для каждой площадки, и часть работы PIM выполняет автоматически. Например, делает ресайзы изображений из исходников.
Ни один готовый вариант не подходил Decathlon на 100%. Поэтому компания приняла решение разработать собственный сервис, который покрывал бы все технические и бизнес-требования. Чтобы интегрироваться в экосистему других сервисов, он должен был разрабатываться на Java.
Все данные о товарах, которые попадают в PIM, проходят автоматическую и ручную проверку. К примеру, система проверяет, заполнены ли все поля. Когда информация о товаре заполнена на 70%, она поступает в мастер-каталог.
Какие возможности PIM-системы Decathlon стоит отметить:
- у компании появилась возможность гибко управлять атрибутами на уровне продуктовых категорий;
- возможность корректировки дерева каталога, созданного в головном офисе;
- сокращение ручной работы команды за счёт функций массовой загрузки полей атрибутов;
- мультиченнел: независимые каталоги на сайте и в мобильном приложении, управляемые из единой системы.
Результаты
75 человек работают как единая команда уже два года. Клиент отмечает следующие достижения проекта:
- реализована и запущена eсommerce-платформа с новым дизайном и PIM-системой;
- конверсия на сайте выросла на 30%;
- уменьшилось количество ошибок в продуктовой информации на 75%;
- сократилась ручная работа сотрудников по управлению продуктовой информацией на 80%;
- российский офис получил больше технической автономии;
- удалось настроить продуктивную параллельную работу нескольких команд, отвечающих за свои направления: интернет-магазин, PIM, мобильное приложение, работа с данными, заказами;
- многосторонняя коммуникация с рядом партнёров: инфобезопасность, французские коллеги, партнёры по локальным коробочным решениям — Mindbox и DaData.
Технологический стек
