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

Контекст

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

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

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

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

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

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

Гипотеза

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

Решение

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

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

Первый экран

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

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

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

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

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

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

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

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

Итерации

Мы решили обновлять карточку товара поэтапно. В первой итерации меняем только визуальные стили: используем полужирное начертание, делаем верстку чище и приводим оформление к новому look and feel. Этот этап станет основой для дальнейшего использования новых стилей во всём продукте.

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

Итоги

Первая итерация проходит A/B-тестирование. Ожидаем, что более чистая верстка и единые стили помогут легче считывать информацию и поддержат или улучшат конверсию в корзину (CR to CartAdd).

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