Portobello | Каталог и карточка товара

Portobello - поставщик бизнес-сувениров и B2B-платформа для рекламных агентств.

Результат

+31% скорости. Понятность: 47% → 81%. Успешность сценариев: 72% → 94%.

Задача

Улучшить пользовательский опыт и повысить эффективность карточки товара как инструмента продаж и самообслуживания.

Пользовательская цель

• Улучшить навигацию каталога.
• Повысить удобство и понятность карточки.
• Сократить время поиска информации.
• Упростить работу с нанесениями на одежду (один макет на все размеры / разные макеты по размерам).
• Унификация интерфейсов: приведение карточки и каталога к единому UI-kit.

Бизнес-цели и KPI:

• Рост вовлечённости: увеличение времени в карточке на 15–30%.
• Снижение операционных затрат: уменьшение обращений к менеджерам на 20–40%.
• Повышение лояльности и повторных заказов.

Проблема

• Каталог был визуально перегружен и неструктурирован: фильтры мешали восприятию, а удобной навигации по категориям не было. Интерфейс не соответствовал обновлённой дизайн-системе и требовал визуального и UX-обновления.
• Карточка была перегружена и неструктурирована, что затрудняло поиск информации и увеличивало нагрузку на менеджеров. Также она не поддерживала разные типы товаров и не позволяла развивать функциональность.

Моя роль

• Сбор и анализ обратной связи от менеджеров и пользователей, проведение интервью.
• Выявление проблем UX, формулировка гипотез и разработка решений.
• Создание и тестирование интерактивных прототипов (галерея, блоки нанесения, сопутствующие товары и др.).
• Взаимодействие с разработкой: согласование макетов, проверка реализуемости, передача материалов на вёрстку.
• Внедрение новых UI-компонентов и приведение карточки и каталога к единой дизайн-системе.
• Поддержка внедрения новых фич в конструкторах нанесения и карточках одежды.

Процесс

Начала с анализа конкурентов и премиального сегмента e-commerce, чтобы собрать актуальные UX-решения. Далее спроектировала hi-fi прототипы с текстовым контентом и логикой взаимодействия. Проработала несколько вариантов карточек товара с разной структурой и поведением элементов. Прототипы тестировались на менеджерах компании, после чего финальные макеты были дополнены визуалом, цветом и приведены к единому UI-kit.

Анализ и гипотезы

1. Каталог

Я провела интервью с пользователями и проанализировала их поведение с помощью тепловых карт и показателей из Яндекс.Метрики - включая глубину просмотра и взаимодействие с фильтрами. На основе полученных инсайтов сформулировала ключевые проблемы, выдвинула гипотезы и протестировала их через прототипы и аналитику после внедрения.

<aside> <img src="/icons/asterisk_blue.svg" alt="/icons/asterisk_blue.svg" width="40px" />

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

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

</aside>

<aside> <img src="/icons/asterisk_blue.svg" alt="/icons/asterisk_blue.svg" width="40px" />

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

Гипотеза: если добавить боковое меню категорий с возможностью раскрытия подкатегорий, то пользователи будут чаще переходить в нужные разделы, потому что дерево категорий станет более заметным и привычным по паттернам e-commerce.

</aside>

Результат: на прототипах тестировались сценарии выбора фильтра и перехода по категориям. Среднее время выполнения задачи сократилось на 25%, число ошибок при навигации уменьшилось в 2 раза, а 98% участников успешно нашли нужную категорию без дополнительных подсказок.

<aside> <img src="/icons/asterisk_blue.svg" alt="/icons/asterisk_blue.svg" width="40px" />

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

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

</aside>

Результат: в ходе тестирования пользователи быстрее считывали ключевую информацию и отмечали, что карточка стала легче для восприятия. Среднее время на выполнение задачи (найти нужный товар) сократилось на 31%, а количество неверных кликов и возвратов назад - уменьшилось. Все участники успешно справились с заданием без дополнительных уточнений, что подтвердило снижение визуальной перегрузки и повышение навигационной понятности.

Не сработавшие гипотезы

Гипотеза 1:

Если вынести категории в хедер (как на маркетплейсах), а подкатегории разместить над карточками рядом с кнопкой фильтров, то пользователи будут быстрее ориентироваться и легче переключаться между разделами, потому что подобная схема знакома по паттернам крупных e-commerce платформ.