Пересобрал архитектуру превью товара для divan.ru: от гипотезы и дискавери до успешного A/B теста
Переработал ключевой элемент e-commerce воронки — превью товара. Выстроил прозрачную логику отображения контента, адаптированную под масштабирование на 4 страны. Упростил путь пользователя к покупке и добился подтвержденного роста бизнес-метрик.
Смотреть сайт
Клиент
divan.ru — лидер мебельного e-commerce в России с собственными фабриками. Продукт со сложной логистикой, вариативностью товаров и развитой сетью дистрибуции на рынках РФ и СНГ.
Бизнес-задачи проекта
Увеличить конверсию (CR): повысить процент перехода из каталога в карточку товара за счёт вывода полезной и понятной информации на превью
Оптимизировать воронку: через улучшение микроконверсий на этапе предвыбора повлиять на нижние этапы воронки (CR в корзину и в заказ)
Масштабировать систему: заложить архитектуру карточки, которая будет корректно работать во всех регионах присутствия (ru, kz, uz, by)
Моя роль
В рамках проекта я отвечал за полный цикл переработки мини-карточки (превью) товара — от анализа конкурентов до подготовки финальных макетов и прототипов для десктопной и мобильной версий
Что входило в мою работу:
Проектирование логики: полностью пересобрал правила вывода информации на превью, отдавая пользователю только самое важное для принятия решения и отсекая визуальный шум
Унификация UI: спроектировал единую масштабируемую систему отображения карточек для всех плейсментов: главной страницы, поиска, рекомендаций, лендингов и модальных окон
Подготовка к A/B тесту: заложил дизайн-решения под сплит-тестирование с четкими метриками успеха
Особенности проекта
Внедрил строгую систему работы с изображениями: прямоугольные интерьерные фото встраиваются в квадрат с сохранением пропорций, а близкие ракурсы (фактура ткани, ножки) программно увеличиваются.
Спроектировал умную пагинацию: на десктопе она появляется только по ховеру, сохраняя чистоту интерфейса, а на мобильной версии выводится по умолчанию для интуитивного свайпа
UX-решения для бизнес-задач
1. Управление вниманием и снижение когнитивной нагрузки на превью
Бизнес-задача
Облегчить путь пользователя на этапе предвыбора товара и повысить конверсию (CR) из каталога в карточку
Контекст
На старом превью нужная информация терялась из-за отсутствия четкой иерархии. Важно отдавать только самую полезную информацию, чтобы клиенту не приходилось проваливаться в карточку и возвращаться обратно в листинг, но при этом нельзя перегружать интерфейс визуальным шумом
Гипотеза
Если доработать превью товара, очистить его от шума и вывести только понятную информацию, влияющую на выбор, мы облегчим путь пользователя и напрямую повлияем на конверсию в карточку товара
Решение
Спроектировал строгую систему тегов: жестко разделил маркетинговые теги (например, «Вместе дешевле», «Black Friday»), влияющие на конверсию в заказ, и вывел их в один акцентный приоритетный слот.
Упорядочил продуктовые фичи: теги с дополнительными преимуществами (ECO, Новинка, Pet-friendly) вывел в отдельный текстовый блок под названием со строгой приоритизацией
Систематизировал фотоконтент: прямоугольные интерьерные фото теперь аккуратно встраиваются в квадрат с равными пропорциями. Близкие ракурсы (фактуры, ножки) программно увеличиваются по примеру интерьерных
Результат
Интерфейс карточки очищен от визуального мусора. Внимание пользователя сфокусировано на самом продукте и его ключевых УТП, что снизило когнитивную нагрузку на этапе скролла каталога.
2. Оптимизация Mobile-first флоу и сокращение пути к покупке
Бизнес-задача
Ускорить процесс выбора товара на мобильных устройствах и перенести часть действий по добавлению в корзину прямо на уровень каталога.
Контекст
Мобильный трафик критически важен, но выбор конфигурации (цвета) или быстрая покупка были неочевидны с уровня листинга. Требовалось пересобрать эргономику мобильного превью так, чтобы основные действия совершались без перехода на следующий экран.
Гипотеза
Если дать возможность переключаться между базовыми цветами и добавлять товар в корзину прямо из ленты мобильного каталога, мы сократим путь пользователя, ускорим принятие решения и увеличим конверсию
Решение
Внедрил выбор цвета на превью: на мобильной версии вывел до 5 цветовых решений прямо под фото. При клике осуществляется прямой переход в нужную вариацию карточки.
Пересобрал эргономику покупки: перенёс кнопку добавления в корзину на один уровень с ценой, сделав её максимально доступной для работы одной рукой
Интегрировал social proof: блок с отзывами выводится сразу под названием товара (при наличии минимум одного отзыва), формируя доверие без лишних кликов
Результат
Мобильный каталог стал полноценным автономным инструментом для покупок. Пользователи могут быстро просматривать базовые конфигурации и отправлять товар в корзину прямо из ленты
3. Унификация UI-системы и успешный A/B тест
Бизнес-задача
Создать единую архитектуру карточки товара для масштабирования на все рынки (RU, KZ, UZ, BY) и унифицировать отображение во всех плейсментах сайта. Проверить эффективность решений через A/B тест
Контекст
До редизайна превью могло вести себя по-разному в зависимости от того, где оно находилось. Необходимо было покрыть единой логикой отображение в слайдерах главной страницы, рекомендациях, быстром поиске, лендингах и модальных окнах корзины
Гипотеза
Если спроектировать унифицированный компонент превью с предсказуемым поведением и провести сплит-тестирование , мы докажем, что новая архитектура увеличит процент перехода в карточку на 5% за две недели
Решение
Разработал единую логику взаимодействия: спроектировал поведение ховеров, умной пагинации с подложкой и отображение доступных размеров/габаритов, которые работают одинаково на всех десктопных разрешениях
Обеспечил масштабируемость: адаптировал компонент для 8 различных плейсментов, включая блог и корзину.
Заложил мультивалютность: продумал архитектуру для корректного отображения цен (включая старые и новые) для разных стран СНГ
Результат
Запуск прошел через строгое A/B тестирование. Вариант с новой дизайн-системой одержал уверенную победу (p=0.00524), доказав статистически значимый рост метрик и успешное достижение бизнес-целей
Понравился мой подход? Давайте сделаем что-то классное вместе!
Пишите в телеграм: @doomed_meaning
Или на почту: dosia27199810@gmail.com
Смотреть CV
Следующий кейс
Март 2025 — Май 2025
www.divan.ru/b2b
Спроектировал структуру и визуал B2B-лендинга для корпоративных клиентов. Упаковал комплексные офферы в чистый дизайн и добился роста генерации лидов
