Редизайн карточки товара для интернет-магазина Рушничок

Ход работы

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

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

Старая версия карточки товара

1. Переработка визуального стиля (ПК и Mobile)

В старой версии заголовок занимал слишком много места, а информация была разрозненной.

• Десктопная версия (ПК): Мы изменили иерархию заголовка, сделав его компактнее и добавив «хлебные крошки» для удобной навигации. Блок цены получил светло-серую подложку, отделяющую коммерческую информацию от описательной.
• Мобильная версия: Заголовок теперь размещается над основным фото, что позволяет пользователю сразу идентифицировать товар при загрузке страницы.

2. Модернизация галереи (ПК и Mobile)

Старая версия имела только одно статичное фото.

• Десктопная версия (ПК): Под главным фото появилась лента миниатюр. Это позволяет клиенту переключаться между разными ракурсами и цветами полотенец в наборе, не закрывая основное окно.
• Мобильная версия: Добавлен блок превью-изображений под основным фото, что значительно улучшает UX на небольших экранах, где ранее было доступно только одно статичное изображение.

3. Функциональные характеристики (ПК и Mobile)

Мы полностью изменили подачу технической информации о товаре.

• Интерактивная перелинковка: Теперь такие важные параметры, как «Материал: Махра», являются активными ссылками. Это позволяет покупателю в один клик перейти в каталог всех товаров из аналогичного материала.
• Структурированный блок: В разделе «О товаре» мы разделили характеристики на название и значение. Это облегчает сравнение параметров (размер, назначение, цвет).

4. Цветовой индикатор наличия и кнопки действия

Мы отказались от текстового формата статуса в пользу визуальных сигналов.

• Индикатор: Вместо незаметной надписи «В наличии» внедрен яркий зеленый маркер-точка. Это позволяет мгновенно понять статус товара без вчитывания.
• Композиция кнопок (Mobile): В мобильной версии элементы выбора количества и кнопка «Купить» теперь выровнены в одну горизонтальную линию. Это экономит место на экране и создает удобную зону для нажатия большим пальцем.
• Композиция (ПК): Элементы управления (количество и кнопка) расположены последовательно под ценой, сохраняя логику вертикального считывания информации.

Полученный результат