Mark Formelle: CJM, User Flow и редизайн корзины — +16% к конверсии за 2,5 месяца

TL;DR

Fashion‑ритейлер Mark Formelle (305+ магазинов в РФ, Беларуси, Казахстане, Узбекистане) пришёл с задачей увеличить конверсию из корзины в заказ при сложной логистике без перемещения товара между складами. За 2,5 месяца сделали CJM, переработали User Flow и редизайн корзины с чекаутом. A/⁠B‑тест на 25% новых пользователей дал +16% к конверсии в продажи.

Pitch

Mark Formelle — крупный fashion‑ритейлер на 4 страны со сложной логистикой: товар не перемещается между складами, поэтому покупателю с разными способами получения приходилось оформлять несколько заказов и проходить чекаут заново. Мы за 2,5 месяца сделали технический аудит, разработали CJM по ключевым точкам контакта, переработали User Flow и спроектировали мультикорзину. Сценарий оформления сократили с 8‑12 шагов до 6 для любого количества товаров. A/⁠B‑тест в Вариокубе на 25% новых пользователей подтвердил рост конверсии в продажи на 16%.

Контекст клиента

Mark Formelle — крупнейший производитель одежды из Беларуси. Розничная сеть насчитывает более 305 магазинов в Беларуси, России, Казахстане и Узбекистане, онлайн‑покупки идут в интернет‑магазине и на всех популярных маркетплейсах.

Сила Mark Formelle — в уникальности и особом настроении. Нескучная, модная и удобная одежда позволяет быть разными, оставаясь собой.

Задача

Клиент искал команду, которая найдёт точки роста проекта и предложит решение по увеличению конверсии корзины и чекаута, не затрачивая на это внутренние ресурсы.

На старте было два запроса:

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

Срок на работу — 2,5 месяца, его было критично важно выдержать.

Что сделали

Работали в несколько итераций: сначала веб‑аналитика, потом CJM и User Flow, после — проектирование корзины и интерактивные прототипы в Figma для десктопа и мобайла.

1. Технический аудит

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

В рамках аудита проанализировали скорость загрузки каталога и безопасность сайта. На основе аудита клиент провёл работы по улучшению скорости и безопасности, а наша команда взяла на себя реализацию каталога на Elasticsearch для ускорения. Параллельно прорабатывали CJM для новой корзины и чекаута.

2. Разработка CJM

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

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

В дальнейшем на основе CJM сформировали оптимизированные прототипы основных коммерческих узлов сайта. Разработка CJM заняла 1,5 месяца при среднем сроке 1‑3 месяца.

3. Разработка User Flow

На основе CJM переработали карту пути пользователя от первого взаимодействия с сайтом до завершения оформления заказа. Дополнительно исследовали сайты конкурентов с похожими механиками.

Раньше для оформления двух товаров с разными способами получения или путём бронирования в магазине и экспресс‑доставки нужно было совершить от 8 до 12 шагов. Для трёх товаров это количество увеличивалось в 2 раза за счёт повторения цикла оформления для каждого товара отдельно. Причина сложного сценария — внутренние логистические ограничения.

После переработки User Flow для оформления любого количества товаров с разными способами получения нужно совершить не более 6 шагов без повторения цикла.

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

Отрисовка User Flow заняла 2 недели.

4. Интерактивные прототипы

Сделали несколько визуальных прототипов корзины для десктопной и мобильной версий — кликабельных и анимированных. Такой подход наглядно показал логику работы будущей корзины: клиент до релиза видел, как будет работать каждая кнопка, куда она ведёт и какие решения увидит покупатель.

Прототип десктопной версии

Прототип мобильной версии

Подход решил типовую проблему: часто на этапе создания макетов и прототипов клиент не видит итогового результата. Кликабельные прототипы в Figma показали, как всё будет выглядеть на боевом сайте, без затрат времени и ресурсов на вёрстку.

5. Разработка фронтенда

Написали для клиента техническое задание на реализацию бэкенда и интеграцию с фронтендом через API. Помогали в разработке, консультировали. Реализацию фронтенда взяли на себя — выбрали Vue.

Сделали вёрстку дизайна, тестирование, запуск на сайте и снятие показателей.

6. Расчёт прогноза и подготовка A/⁠B‑теста

Перед запуском A/⁠B‑теста рассчитали размер выборки и сделали прогноз увеличения конверсии с помощью калькулятора A/⁠B‑теста Mindbox. Изначально поставили цель — увеличить конверсию на 15%.

7. Проведение A/⁠B‑теста

Новая версия имела одновременно новую корзину и новый функционал заказа в карточке товара. Поэтому встал вопрос тестирования парных изменений: запустили A/⁠B‑тест старой связки карточка+корзина с новой, попарно показывая пользователям один из двух вариантов. Тестировали не отдельные доработки, а две разные сущности.

Для теста в Вариокубе использовали флаги: скрипт передаёт флаг A или B, и в зависимости от значения по адресам карточек товаров и корзины отдаётся старый или новый дизайн. Переменные флагов — ver = A (старая версия) и ver = B (новая).

В стандартной версии Вариокуба нельзя сегментировать аудиторию только на новых пользователей. Решили через cookie Яндекс.Метрики: в коде проверяли, есть ли у пользователя cookie о посещении сайта. Если нет — показывали новую корзину, если есть — переадресовывали на старую.

A/⁠B‑тест проводился 25 дней. Новая версия показала лучший результат в пересчёте на прибыль электронной коммерции: конверсия в продажи в новой версии корзины и чекаута приросла на 16% по сравнению со старой.

Понимали, что для старых пользователей может быть кратковременная просадка из‑за привычки к старой корзине. Чтобы минимизировать просадку, реализовали инструменты онбординга: объясняли старым пользователям, как работает новая корзина и чекаут и в чём её преимущества.

Результат

Метрика	Значение
Конверсия в продажи в новой корзине и чекауте	+16%
Сценарий оформления	сократился с 8‑12 шагов до 6
Срок разработки CJM	1,5 месяца (при среднем 1‑3 месяца)
Срок отрисовки User Flow	2 недели
Полный срок проекта от аудита до запуска	2,5 месяца, уложились в дедлайн
Выборка A/⁠B‑теста	25% новых пользователей, длительность — 25 дней

Что можно перенести на другие проекты:

• В сложной логистике (товар не перемещается между складами) можно вытащить рост конверсии из перепроектирования пути пользователя, а не из новых функций.
• Парные изменения (новая карточка плюс новая корзина) корректно тестируются через A/⁠B‑тест двух связок, а не отдельных доработок.
• Кликабельные прототипы в Figma снимают риск несовпадения ожиданий клиента с итоговым результатом до этапа вёрстки.

Где проект сейчас

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

Команда

• Никита Зотов — E‑commerce Development Manager
• Денис Голубков — SEO‑специалист

Технологии

1С‑Битрикс, PHP, Vue, Figma, Вариокуб, Яндекс.Метрика, калькулятор A/⁠B‑теста Mindbox.

Ссылки

• Публикация: https://intensa.ru/⁠blog/⁠cjm‑userflow‑i‑makety‑korziny‑internet‑magazina‑odezhdy/
• Сайт клиента: https://markformelle.ru/
• Связанные кейсы у того же клиента: Mark Formelle E‑commerce 360