За 1,5 месяца разработали CJM, User Flow и макеты корзины для увеличения конверсии интернет-магазина одежды Mark Formelle

Спойлер: +16% к конверсии в заказ.

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

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

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

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

Клиент пришел с проблемой увеличить конверсию «товар-корзина». На старте у него было два запроса:

1,5 месяца заняла разработка CJM для интернет-магазина Mark Formelle. В среднем разработка CJM занимает от 1 до 3 месяцев.

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

Около месяца потребовалось на детальную проработку макетов.

После согласования макеты подготавливаются для последующей верстки разработчиками — до состояния Ready To Dev. Дизайнер отрисовывает все элементы и их состояния, которые будут использованы на этапе реализации корзины и чекаута.

Провели AB-тест на выборке в 25% от всех новых пользователей интернет-магазина. Конверсия в продажи в новой версии корзины и чекаута приросла на 16% по сравнению со старой версией.

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

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

Во время работы над проектом идентифицировали потенциальные точки роста в клиентском опыте на основании взаимодействия покупателя с интернет-магазином.

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

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

В дальнейшем на основании CJM сформировали оптимизированные прототипы основных коммерческих узлов сайта.

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

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

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

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

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

Интерактивные прототипы — удобное и понятное клиенту решение. До того как готов сайт уже понятно, как будет работать та или иная кнопка, куда будет вести, какие решения увидит покупатель в интернет-магазине.

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

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

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

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

Стек технологий, на котором реализованы новая корзина и чекаут:

Перед запуском AB-теста рассчитали размер выборки для него и сделали расчет прогноза увеличения конверсии с помощью калькулятора AB-теста.

Так, изначально поставили цель увеличить конверсию на15%.

Новая версия сайта имеет новую корзину и функционал заказа в карточке товара, отличный от старой версии. В связи с этим встал вопрос тестирования парных изменений. Запустили AB-тест старой версии карточки+корзины с новой, т.е. попарно показывали пользователям старую карточку+корзину и новую карточку+корзину. Тестировали не отдельные доработки, а две совершенно разные сущности.

Для запуска теста в Вариокубе использовали так называемые флаги. То есть скрипт Вариокуба в каждом конкретном случае передает флаг со значением A или B, и, в зависимости от этого флага, по адресам карточек товаров и корзины нужно отдавать старый/новый дизайн.

Переменные флагов, которые присылались ver = A (старая версия) и ver = B (новая версия).

Далее в инструменте фиксируются показатели, согласно настроенным целям.

Сайт был настроен таким образом, что в случае ответа ver = A отображался старый функционал карточек и корзины, а при ver = B — новый. После данной настройки был запущен эксперимент.

AB-тест проводился 25 дней.

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

Провели AB-тест. Новая версия показала лучший результат в пересчете на прибыль в электронной коммерции. Конверсия в продажи в новой версии корзины и чекаута приросла на 16% по сравнению со старой версией.

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

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

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

Спасибо всем, кто дочитал до конца!

Срок разработки CJM для интернет-магазина в зависимости от сложности — от 14 дней, а User Flow — от 12 дней.

Заказать CJM для интернет-магазина можно здесь, а User Flow — здесь.