Карточка товара на 15 миллионов сессий в год

ТЗ описывало блоки, а не боли

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

Ресерча не дали — базу собрала сама

На старте под проект не было выделенного исследования, поэтому базу я собрала сама:

• Офлайн-интервью с колл-центром — три оператора, час. Боли клиентов из первых рук и боли самих операторов.
• Отзывы на нас и конкурентов — Lamoda, Ozon — плюс обращения в поддержку.
• Вебвизор и воронка, исследования Baymard и Nielsen Norman Group, инсайты с прошлых глубинок.

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

Конкурентный анализ: 18 магазинов

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

Разбор большой и почти весь визуальный — каждый экран размечен. Несколько примеров, что ловила и куда это пошло:

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

Варфреймы и 8–10 итераций до дизайна

Сначала логика, потом отрисовка. Первый варфрейм — с него начинались итерации согласования; к финальному пришли после восьми-десяти кругов, и только дальше шел дизайн.

Каждое решение — от инсайта, со статусом

Ценность не в списке функций, а в том, что каждое решение опиралось на инсайт. Для каждого зафиксировано, что с ним стало: внедрено, отложено или не взято.

Блок образов: сделала проще, чем диктовал вендор

По решениям, которые мне диктовали, я аргументировала свои. Блок подбора образа Garderobo предложила проще: убрала «добавить в корзину» с мини-карточек — покупка должна идти через карточку товара, где пользователь выберет размер, — и отказалась от «заменить товар», иначе размывается сама идея готового образа.

Дизайн-система: токены, состояния, корнер-кейсы

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

Карточку в приложении пересобрала сама — задачи не было

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

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

Что получилось и как померила без A/B

A/B-теста не было, эффект мерила год к году: окно 8 декабря — 28 февраля к тому же периоду годом ранее, так снимается сезонность. Чтобы уменьшить влияние других факторов, считала внутри сегментов — вернувшихся отдельно от новых, — чтобы отделить эффект редизайна от сдвига трафик-микса. Политику возвратов в этот период не меняли.

Возвраты −8% — самый ценный эффект для одежды и обуви: редизайн бил по драйверам возвратов с разных сторон — размерные инструменты, расширенные описания, условия обмена и возврата, фото покупателей, прозрачность, — поэтому смотрю общий return rate.

Конверсия сконцентрирована у вернувшихся — ~+4% в корзину и ~+3,5% в покупку: они листают много карточек и пользуются новыми блоками, поэтому выигрыш у них; у новых посетителей эффекта нет.

Что осталось за рамками и что бы сделала иначе

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