Редизайн сниппетов

Контекст

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

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

Проблема

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

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

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

Гипотеза

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

Решение

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

Это решение было частью более широкого целевого видения сниппета. Чтобы оценивать изменения постепенно, в первый A/B-тест мы включили только обновление бейджей, тегов и отображения скидок.

Проверка первого решения

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

Однако первый A/B-тест не подтвердил ожидаемый эффект. Большинство метрик не показало убедительных изменений, при этом мы наблюдали снижение добавлений в корзину и переходов в карточку товара.

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

Количественное исследование

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

Чтобы проверить эти предположения и выбрать вариант для следующего A/B-теста, я провела три итерации количественных исследований. Результаты каждой использовала для корректировки макетов.

Первая итерация: цвет и размер скидки

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

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

В текущем сниппете персональную скидку нашли 31% участников, в новых вариантах — 20% и 18%. Текущий вариант показал лучший результат, но даже в нём скидку находила лишь треть участников. Ни один вариант нас не устроил, поэтому я приступила к следующей корректировке макетов.

Вторая итерация: акцент и формулировка скидки

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

Вариант 3 с формулировкой «для вас» показал самый высокий процент нахождения персональной скидки. Однако во всех вариантах с усиленным акцентом на ней участники хуже находили обычную скидку. Мы предположили, что более яркое выделение персональной скидки перетягивало внимание на себя.

Такой результат нас не устроил: пользователю важно замечать оба типа скидок. Формулировка «для вас» стала перспективным направлением для следующей проверки. Я перешла к третьей итерации, чтобы сохранить понятное обозначение персональной выгоды и сбалансировать заметность скидок.

Третья итерация: баланс заметности скидок

В третьей итерации я сохранила формулировку «для вас», которая показала лучший результат в предыдущем исследовании. Чтобы персональная скидка не перетягивала внимание с обычной, убрала дополнительное выделение: скидки отображались в одну строку с ценой и в одном цвете.

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

В новом варианте персональную скидку нашли 77% участников — больше, чем в двух других вариантах этой итерации.

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

Целевое видение и этапы внедрения

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

Первый этап — проверка отображения скидок. С этой итерацией мы запустили повторный A/B-тест, чтобы оценить её влияние на поведение пользователей до следующих изменений.

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

Итоги

После первого A/B-теста я провела три итерации количественных исследований и доработала отображение скидок. В выбранном варианте персональную скидку нашли 77% участников исследования. Этот результат стал основанием для выбора решения для повторного теста.

Повторный A/B-тест запущен и сейчас идёт. Данных о его результатах пока нет: влияние нового сниппета на добавления в корзину и конверсию в заказ ещё предстоит оценить.