✨ Саммари кейса
Автор пришёл в проект, где главная страница не показывала акции, каталог не давал обратной связи по скидкам, а карточка товара не помогала считать выгоду и искать сопутствующие товары. Менеджеры делали баннеры на свой вкус, покупатели уходили в корзину, чтобы просто увидеть итоговую сумму.
Что сделал
Главная страница
Превратили в конструктор с чёткими типами баннеров (Б1, Б2, Б3). Менеджер указывает в задаче слоган, артикул и тип — дизайнер делает баннер по гайду. Никакой самодеятельности.
Каталог
Добавили автопересчёт суммы и выгоды прямо в мини-карточке. Теперь покупатель видит: 349 ₽ за штуку от 1 шт., 335 ₽ — самая низкая цена от 15 шт. Меняешь количество — меняются сумма и выгода. Второстепенные кнопки (избранное, сравнение, «В корзину») убрали под ховер на плитке.
Карточка товара
Унифицировали логику скидок с каталогом. Добавили сортировку сопутствующих товаров по тегам — теперь к принтеру легко найти сканер, ИБП или бумагу. Расходники вывели отдельно.
Результаты
Самое сложное — не интерфейс перерисовать, а наладить коммуникацию между менеджерами и дизайнерами. Гайды превратили хаос в процесс.
Гипотезы нужно проверять, даже если они кажутся очевидными. Плитка должна была стать популярнее — данные показали обратное. Продуктовый дизайн — это не «я так чувствую», а «я проверяю и делаю выводы».
Что сделал
Главная страница
Превратили в конструктор с чёткими типами баннеров (Б1, Б2, Б3). Менеджер указывает в задаче слоган, артикул и тип — дизайнер делает баннер по гайду. Никакой самодеятельности.
Каталог
Добавили автопересчёт суммы и выгоды прямо в мини-карточке. Теперь покупатель видит: 349 ₽ за штуку от 1 шт., 335 ₽ — самая низкая цена от 15 шт. Меняешь количество — меняются сумма и выгода. Второстепенные кнопки (избранное, сравнение, «В корзину») убрали под ховер на плитке.
Карточка товара
Унифицировали логику скидок с каталогом. Добавили сортировку сопутствующих товаров по тегам — теперь к принтеру легко найти сканер, ИБП или бумагу. Расходники вывели отдельно.
Результаты
- Главная: NPS покупателей вырос с 55 до 71, NPS менеджеров — с 34 до 77. CTR на баннеры вырос.
- Каталог: люди стали чаще покупать прямо из каталога. CSAT вырос с 42 до 81,25. Плитка не стала популярнее списка — люди выбирают по характеристикам, а не по фото. Оставили список по умолчанию.
- Карточка товара: расходники и сопутствующие товары покупают чаще, Revenue вырос (цифры под NDA). CSAT и NPS показали рост.
Самое сложное — не интерфейс перерисовать, а наладить коммуникацию между менеджерами и дизайнерами. Гайды превратили хаос в процесс.
Гипотезы нужно проверять, даже если они кажутся очевидными. Плитка должна была стать популярнее — данные показали обратное. Продуктовый дизайн — это не «я так чувствую», а «я проверяю и делаю выводы».
Как я главнаю, листинг и карточку товара переДелывал
Цель и задача
Когда я пришёл в компанию, главная страница не решала ключевую задачу — показать покупателям акции, скидки и подарки. Она выглядела как сжатая версия каталога. Покупатели не видели ничего важного, а менеджеры товарных категорий не понимали, как продвигать свои разделы, и каждый делал баннеры на свой вкус.
В каталоге была другая проблема: куча скидок, включая «скидку за количество», но интерфейс не давал обратной связи. Покупатели считали выгоду сами или шли в корзину, чтобы просто увидеть итоговую сумму.
Карточка товара повторяла ту же боль: люди не понимали, как посчитать сумму и выгоду. Плюс не хватало маркетинговых инструментов. Сопутствующие товары свалили в одну карусель. Найти для принтера сканер, ИБП или бумагу было невозможно — всё смешалось.
Общая задача: пересобрать три ключевые страницы так, чтобы покупатель быстрее получал нужную информацию, легче принимал решения и чаще покупал. И чтобы менеджеры могли гибко управлять продвижением. Звучит легко — пересобрать три ключевых страницы магазина, хе-хе...
В каталоге была другая проблема: куча скидок, включая «скидку за количество», но интерфейс не давал обратной связи. Покупатели считали выгоду сами или шли в корзину, чтобы просто увидеть итоговую сумму.
Карточка товара повторяла ту же боль: люди не понимали, как посчитать сумму и выгоду. Плюс не хватало маркетинговых инструментов. Сопутствующие товары свалили в одну карусель. Найти для принтера сканер, ИБП или бумагу было невозможно — всё смешалось.
Общая задача: пересобрать три ключевые страницы так, чтобы покупатель быстрее получал нужную информацию, легче принимал решения и чаще покупал. И чтобы менеджеры могли гибко управлять продвижением. Звучит легко — пересобрать три ключевых страницы магазина, хе-хе...
Курение вредит твоему здоровью, бро
Что было сделано?
Главная страница
Появилась основная гипотеза:
Если заменить простыню из тысяч sku на витрину с крупными маркетинговыми блоками (акции/новинки), то конверсия в целевое действие (переход в каталог/карточку товара) вырастет, так как пользователь перестанет тратить когнитивный ресурс на фильтрацию нерелевантного ассортимента
И десятки других, не менее важных, которые я разделил на продуктовые и для команды (внутренняя кухня):
Собрал бенчмарки, проанализировал рынок, провёл опросы среди клиентов и сделал вывод: из главной страницы нужно делать конструктор. Он поможет легко настраивать блоки, миксовать их и проводить эксперименты.
Пообщался с менеджерами — они больше всех были заинтересованы в продвижении своих товарных категорий через главную.
Пообщался с менеджерами — они больше всех были заинтересованы в продвижении своих товарных категорий через главную.
В итоге внедрил баннерную концепцию (не без помощи Игоря Семёнова, спасибо ему). А дальше дизайнеры из маркетинга подхватили её, и вместе мы сделали понятные типы баннеров со своей маркировкой и строго заданными размерами. Подробно описали в гайдах.
Приведу парочку примеров:
Б1 — самый большой баннер. Стоит на главной вверху.
Б3 — самые мелкие баннеры. Они обязаны выстраиваться в ряд, минимум по 3 штуки.
Приведу парочку примеров:
Б1 — самый большой баннер. Стоит на главной вверху.
Б3 — самые мелкие баннеры. Они обязаны выстраиваться в ряд, минимум по 3 штуки.
После этого работать с менеджерами стало проще. Они больше не фантазируют — всё регламентировано. Дизайнеры не бегают в поисках шаблона. Процесс упростился: менеджер указывает в задаче слоган, артикул товара и тип баннера (те самые Б1, Б2, Б3).
Каталог
Вывел две гипотезы:
Если пересчитывать в мини-карточке товара сумму и выгоду сразу, конверсия в покупку повысится — человек будет быстрее наполнять корзину.
Если разгрузить плиточную карточку — убрать второстепенные действия под ховер, — визуальный шум снизится. Покупатели станут спокойнее изучать товары и чаще возвращаться к плиточному виду.
Сделал много макетов, драфтов и прототипов. Обсуждал с владельцем продукта и продактами разные решения. Дизайн-система стала фундаментом — без неё это заняло бы в разы больше времени. Про нее в отдельном кейсе.
Теперь при переключении радио-кнопок меняется сразу несколько значений: сумма, выгода, значение в каунтере. Изменение количества в каунтере влияет на сумму и выгоду. Всё завязано. В блоке с ценой стало понятно, что 364 ₽ — это цена от 1 шт., она выбрана по умолчанию. А 359 ₽ — самая низкая цена за штуку, если брать от 10 шт.
Теперь при переключении радио-кнопок меняется сразу несколько значений: сумма, выгода, значение в каунтере. Изменение количества в каунтере влияет на сумму и выгоду. Всё завязано. В блоке с ценой стало понятно, что 364 ₽ — это цена от 1 шт., она выбрана по умолчанию. А 359 ₽ — самая низкая цена за штуку, если брать от 10 шт.
На плитке убрали под ховер кнопки избранного и сравнения, механику пересчёта цены и кнопку «В корзину».
Карточка товара
Привёл страницу в соответствие с дизайн-системой. Адаптировал логику «скидка за количество». Теперь всё работало идентично листингу. Люди уже привыкли к новой механике в нём и легко адаптировались в карточке товара.
Взялся за товарные карусели внутри карточки. Покупатели жаловались, что нет расходных материалов в карточке. Для некоторых ассортиментных групп они очень нужны. Например для принтеров критично вывести картриджи.
Как лучше сортировать внутри карусели? Обсуждал с командой дизайна и продактами. Были разные варианты и много тестов с прототипами.
Появилось три основных гипотезы:
Появилось три основных гипотезы:
Если внутри карусели сопутствующих товаров добавить теги-фильтры («Кабели», «Бумага», «Картриджи»), то пользователь быстрее найдет нужный доп. товар, а конверсия в добавление из карусели вырастет
Если вынести отдельный блок «Расходные материалы» для техники (картриджи, лампы, фильтры), то пользователь не будет уходить в поиск, а добавит их сразу с карточки
Если встроить сравнение с похожими товарами прямо в карточку (таблица характеристик рядом), то пользователь не будет открывать вторую вкладку, а конверсия в покупку вырастет
Лучший отклик получил вариант с тегами, который предложили первым и который казался самым логичным. Сортировка вызвала положительный отклик у покупателей и менеджеров.
После редизайна каруселей их легко было масштабировать для других кейсов: похожие товары, расходники.
После редизайна каруселей их легко было масштабировать для других кейсов: похожие товары, расходники.
Бро, не спрашивай, что здесь делают масляные радиаторы, сам удивился:)
Результаты
Главная страница
- NPS покупателей при работе с главной вырос на 16 пунктов — с 55 до 71.
- В опросе 34 менеджеров NPS при работе с главной вырос больше чем в два раза — с 34 до 77.
- CTR на баннеры вырос, а вслед за этим и KPI у менеджеров товарных категорий.
- Прямой рост конверсии в покупку на этом этапе не замеряли, но вовлечённость в акционные разделы выросла. Это стало триггером для следующей итерации.
Каталог
- Вебвизор показал, что люди чаще стали покупать прямо из каталога. В карточку переходили только за дополнительной информацией.
- Гипотеза про плитку не подтвердилась. Я упростил плитку, ожидая, что она станет популярнее. Данные сказали обратное: список обгоняет плитку в два раза. Покупателям Комуса важно выбирать по характеристикам, а не по фотографиям. Я не стал спорить с данными — оставил список по умолчанию, а плитку сохранил как альтернативу для тех, кому нужно больше товаров и кто «выбирает глазами». Однако по сравнению со старым дизайном плитки, новым дизайном стали пользоваться чаще.
- CSAT вырос почти в два раза — с 42 до 81.
- Вебвизор зафиксировал минимум ошибок при использовании новой мини-карточки.
Карточка товара
- Страница стала чище, информативнее и функциональнее.
- Менеджеры гибче управляют допродажами из карточки, а покупатели проще находят альтернативы и дополнительные товары, совершая меньше ошибок.
- Расходные и сопутствующие товары теперь покупают чаще. Это влияет на Revenue компании. Конкретные цифры под NDA, но рост был значительным.
- Из трёх гипотез проверил две: сортировку по тегам и вывод расходных материалов. Третья — сравнение товаров прямо в карточке — ушла в бэклог следующей итерации.
- CSAT и NPS по каждому компоненту страницы и по всей странице показали положительную динамику.
Что это значило для меня
Мы с командой пересобрали логику взаимодействия: от калькулятора в голове покупателя до мгновенного пересчёта выгоды в мини-карточке. От хаоса в баннерах до строгих гайдов, которые сняли головную боль у менеджеров и дизайнеров.
Самым сложным было не перерисовать интерфейс, а перестроить коммуникацию между менеджерами и дизайнерами. Раньше это был хаос: менеджеры фантазировали баннеры, дизайнеры бегали в поисках шаблонов. Я ввёл строгие гайды — и конфликт превратился в сотрудничество.
Самым сложным было не перерисовать интерфейс, а перестроить коммуникацию между менеджерами и дизайнерами. Раньше это был хаос: менеджеры фантазировали баннеры, дизайнеры бегали в поисках шаблонов. Я ввёл строгие гайды — и конфликт превратился в сотрудничество.
👌 Я убедился, что гипотезы нужно проверять, даже если они кажутся очевидными. Плитка должна была стать популярнее списка — но данные сказали обратное. Продуктовый дизайн — это не про «я так чувствую», а про «я проверяю и делаю выводы».