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

Контекст

Карточки товаров в листинге (сниппеты) — это очень важная часть воронки. Нам нужно заинтересовать пользователя, чтобы он открыл карточку и перешел к покупке. На момент появления задачи карточки товара были негибкие: каждое нововведение добавлялось отдельной строкой и увеличивало размер карточки, а желание у разных команд добавить что-то свое в карточку было всегда. Поэтому было решено собрать все пожелания и идеи по карточкам и реализовать их в целевом сниппете.

Гипотеза

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

Проблема 1. Альтернативные цвета

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

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

Решение

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

Проблема 2. Доступные размеры

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

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

Решение

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

Проблема 3. Добавление в корзину

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

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

Проблема 4. Адаптивность сниппетов в полках

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

Решение: динамический расчет ширины. Это гарантирует предсказуемое поведение на любой ширине экрана.

Проблема 5. Бейджи и теги

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

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

Целевое видение и итерации

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

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

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

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

Итоги

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

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