Редизайн карточки товара

Контекст

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

Блок «О товаре»

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

Дизайн был полностью разработан и запущен в А/В-тест, но метрики оказались серыми. Это стало сигналом, что проблема не в одном конкретном блоке, а в карточке товара в целом. Она настолько перегружена, что пользователи не замечают изменений.

Почему редизайн?

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

Гипотеза

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

Решение

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

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

Первый экран

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

Выбор размера

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

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

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

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

Блок «О товаре»

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

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

Итоги

Первый эксперимент мы остановили досрочно: NMV быстро проседал. Такой результат был возможен — важно было быстро понять причину.

Разбор показал цепочку: в новой карточке добавление в Избранное стало заметнее и удобнее — и пользователи начали откладывать товары вместо добавления в корзину. А путь к покупке из Избранного оказался длиннее: в его сниппетах не было кнопки «В корзину».

Мы закрыли этот разрыв — добавили кнопку корзины в сниппеты Избранного. Эффект: у пользователей, заходивших в Избранное, CR to CartAdd вырос на +0,29%, в тоталах — на +0,1%, защитная метрика возвратов осталась нейтральной.

В следующей версии карточки кнопку Избранного вернули на прежнее место — эти итерации тестирует команда.