А/В-тестирование на сайте интернет-магазина товаров для шитья и рукоделия

A/B-тестирование
карточек товара
интернет-магазина
товаров
для шитья и рукоделия

Тестирование вариантов дизайна карточки товара интернет-магазина товаров для шитья и рукоделия «ВсеНитки».

vsenitki.com
дизайн, вёрстка, тестирование
Заказать продвижение

Задача

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

Исходный вариант

В исходном варианте дизайна карточки содержали следующие элементы:

  • Вкладки
  • Сопутствующие товары
  • Рекомендованные товары
  • Отзывы были представлены не по всем карточкам 

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

Рабочие гипотезы

В ходе разработки нового дизайна карточки было выдвинуто две гипотезы:

  1. Не нужно отвлекать пользователя от конкретного товара. Карточка товара должна занимать весь экран, при этом боковое меню можно исключить. Выпадающее меню, которое есть на сайте, полностью дублирует боковое меню, поэтому в боковом меню нет большой необходимости. Такой вариант можно увидеть, например, на сайте интернет-магазина «Юлмарт».
  2. Поскольку в среднем в корзина содержит 20-50 позиций, у пользователя должно быть много возможностей для навигации по каталогу. Боковое меню позволит легче перемещаться по разделам сайта и набрать необходимое количество позиций.

Подготовка дизайна

В новом дизайне карточки мы сделали более яркими цену и кнопку «Добавить в корзину». Кнопки выбора количества товара поместили на заметном поле, сделав их более яркими. Вместе с фотографией и дополнительной информацией о процессе покупки (доставке, оплате и гарантиях) эта информация составила первый экран. Наличие этих сведений успокаивает пользователя, помогая принять решение о покупке. Это особенно важно, поскольку основная аудитория сайта — женщины (рукодельницы и домохозяйки).

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

Сопутствующие товары, которые есть в наличии, выводятся каруселью. Их количество не фиксировано, товары можно прокрутить (такой возможности не было в исходном варианте).

После согласования дизайна с клиентом мы сверстали два варианта карточек, оставив также и старый вариант.

A/B-тестирование

Использовав функционал CMS «1С-Битрикс», на которой работает сайт, а также с помощью сервиса Google Analytics мы запустили тестирование.

Для теста мы установили следующие настройки: в эксперименте участвует 100% трафика, вывод дизайна карточек произвольный. При этом если пользователь попал на один вариант дизайна, то он сохраняется в кэше, и пользователь видит в дальнейшем только его.

Период тестирования мы условно определили в 1 неделю, полагая, что к этому моменту должно стать понятно, какой из вариантов лидирует. Согласно статистическим данным, выборка является достоверной, если будет совершено порядка 30 000 сеансов для каждого варианта дизайна. Текущий трафик на сайт позволил набрать необходимое количество за отведенный срок. Кроме того результаты, которые мы получили по окончании недели тестирования, были достаточно очевидны, и мы приняли решение о прекращении теста.

Результаты

С самого начала теста вариант нового дизайна с боковым меню заметно лидировал по объёму продаж. Через 1 неделю этот разрыв уменьшился, статистические погрешности были нивелированы.

  • По количеству транзакций (заказов) по сравнению с исходным вариантом оба новых варианта лидируют примерно по 15% по сравнению с исходным.
  • По доходу вариант без бокового меню и исходный вариант примерно равны. При этом вариант с боковым меню принёс дохода на 30% больше, чем два других.

В результате совместно с клиентом было решено вариант с боковым меню принять за основной.

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

Заявка на продвижение сайта