Предыстория
В процессе анализа e-commerce сайтов в нише парфюмерии стало заметно, что каталоги товаров часто перегружены информацией и не помогают пользователю быстро сориентироваться в ассортименте.
Цель и задачи проекта
Цель проекта — упростить процесс выбора парфюмерии в каталоге и сократить путь пользователя до покупки.
Задачи
- проанализировать текущую структуру каталога
- выявить точки перегрузки и потери внимания
- улучшить навигацию и фильтрацию
- сделать карточки товаров более читаемыми
- усилить визуальную иерархию
- сократить когнитивную нагрузку
Анализ текущего решения
В рамках исследования было изучено текущее решение сайта Randewoo.
| Критерий | Наблюдение | Проблема |
|---|---|---|
| Структура страницы | На странице одновременно конкурируют между собой фильтр, категории, карточки, баннер, сортировка — всё выглядит одинаково | Нет явного приоритета |
| Фильтрация | Фильтры очень перегружены: бренд, объём, группы, концентрация, миниатюра, парфюмер и т. д. | Перегруз, сложно быстро выбрать |
| Карточки товаров | Сейчас карточка маленькая, мало воздуха, плохо считывается информация | Визуальный шум |
| Навигация | Много категорий и подкатегорий | Сложно быстро сориентироваться |
| Контент | Дополнительные блоки (история парфюма и т. д.) | Отвлекают от покупки |
Анализ конкурентов
В рамках исследования были изучены продуктовые страницы нескольких брендов:
| Сервис | Дизайн | Навигация | Карточки товаров | Фильтрация | Особенности |
|---|---|---|---|---|---|
| Золотое Яблоко | Современный, аккуратный дизайн с хорошим балансом между визуалом и плотностью контента. Используется чистая сетка, единый стиль карточек | Логично выстроенная, пользователь легко понимает структуру каталога | Карточки визуально сбалансированы: есть рейтинг, цена, название, но без перегрузки. Хорошо читаются при скролле | Фильтры сгруппированы и не перегружают пользователя, основные параметры доступны сразу | Сильная визуальная иерархия и комфортный UX для длительного выбора |
| Л’Этуаль | Классический e-commerce дизайн с большим количеством баннеров и акционных элементов | Привычная, но местами перегруженная из-за промо и дополнительных блоков | Карточки стандартные, но визуально менее структурированы, сложнее быстро сравнивать | Фильтрация базовая, но требует дополнительных действий и не всегда очевидна | Сильный акцент на акции, что отвлекает от выбора товара |
| Sephora | Минималистичный и чистый дизайн с акцентом на продукт, высокий уровень визуальной иерархии | Чёткая и сценарная: пользователь движется по каталогу без лишних отвлечений | Карточки легко сканируются, ключевая информация выделена, нет лишнего шума | Гибкая и интуитивная фильтрация, помогает быстро сузить выбор | Один из лучших UX в категории, ориентирован на удобство выбора |
| Рив Гош | Устаревающий визуальный стиль, высокая плотность элементов, слабая иерархия | Навигация перегружена категориями и дополнительными ссылками | Карточки перегружены: много текста, акций, элементов, сложно сканировать | Фильтры есть, но воспринимаются тяжело из-за перегрузки | Пользователь быстрее устаёт, сложнее ориентироваться |
| Улыбка Радуги | Простой и функциональный дизайн без выраженного акцента на премиальность | Простая навигация, но менее гибкая | Карточки упрощённые, информации достаточно, но не хватает акцентов | Фильтрация базовая, ограниченные возможности | Упор на доступность и массовый сегмент, а не на UX выбора |
Из этого можно сделать следующие выводы:
- Каталоги перегружены элементами: фильтрами, баннерами и карточками, из-за чего пользователь теряет фокус и дольше принимает решение
- Фильтрация либо избыточна и усложняет выбор, либо недостаточно развита и не помогает сузить поиск
- Карточки товаров не оптимизированы под быстрое сканирование и сравнение, что увеличивает когнитивную нагрузку
- В большинстве решений отсутствуют ориентиры для пользователей, которые не знают, что выбрать (подборки, категории по сценариям, подсказки)
- Структура каталога не учитывает реальные сценарии поведения пользователя, из-за чего процесс выбора становится хаотичным
Сегменты аудитории
| Сегмент | Профиль | Контекст использования | Цели | Боли | Что важно в продукте |
|---|---|---|---|---|---|
| Рациональные покупатели | Ищут конкретный бренд, аромат или уже знают, что им нужно | Быстрый поиск и покупка | Найти нужный товар максимально быстро | Перегруз фильтрами, сложная навигация | Упростить фильтры, ускорить поиск |
| Исследующие пользователи | Не уверены в выборе, ориентируются в ассортименте | Браузинг, сравнение | Найти подходящий аромат через исследование | Слишком много вариантов, нет ориентиров | Добавить подборки, визуальные якоря |
JTBD
| Когда (сценарий) | Я хочу (мотивация) | Чтобы (ожидаемый результат) | Боли | Гипотезы |
|---|---|---|---|---|
| Ищу конкретный парфюм (знаю бренд или аромат) | Быстро найти нужный товар через каталог или поиск | Минимально тратить время и сразу перейти к покупке | Большой ассортимент (тысячи товаров), сложно быстро отфильтровать нужное, фильтры перегружены и неочевидны | Упростить фильтрацию (бренд, цена, объём как приоритет), сделать быстрый доступ к ключевым параметрам, улучшить сканируемость каталога |
| Не знаю, что выбрать (исследую каталог) | Получить помощь в выборе и понять, какие ароматы мне подойдут | Быстро сузить выбор и найти несколько релевантных вариантов | Слишком много товаров без ориентиров, нет понятной навигации по «вкусам» и сценариям использования | Добавить подборки (по нотам, сезонам, сценариям), ввести визуальные категории, упростить вход в каталог |
| Сравниваю несколько вариантов | Понять различия между ароматами и выбрать лучший | Принять уверенное решение без долгого анализа | Карточки перегружены, сложно быстро сравнить, нет акцента на ключевых различиях | Упростить карточки, выделить ключевые параметры (рейтинг, цена, тип аромата), сделать информацию сканируемой |
| Сомневаюсь перед покупкой | Убедиться, что делаю правильный выбор | Снизить риск ошибки и спокойно купить | Недостаток уверенности, нет быстрых «подтверждений» выбора (рейтинги, популярность, отзывы читаются сложно) | Усилить доверие: акцент на рейтингах, отзывах, бейджах (хит, новинка), упростить восприятие соцдоказательств |
| Просто просматриваю каталог | Легко и приятно изучать ассортимент | Не уставать от интерфейса и постепенно прийти к выбору | Перегруженный интерфейс, много отвлекающих элементов, сложно удерживать внимание | Упростить визуал, убрать лишние элементы, выстроить чёткую иерархию и фокус на товарах |
Решения
1. Пересборка структуры каталога
Структура страницы была пересобрана таким образом, чтобы убрать конкуренцию между элементами и задать чёткий визуальный приоритет. Основной фокус был смещён на товары, а второстепенные блоки структурированы и упорядочены. Это позволило пользователю быстрее ориентироваться в каталоге и не тратить время на лишние элементы.
2. Упрощение фильтрации
Фильтрация была переработана с акцентом на приоритетные параметры, которые действительно влияют на выбор: бренд, цена, объём и тип аромата. Второстепенные фильтры были сгруппированы и скрыты, чтобы снизить перегрузку интерфейса. В результате фильтры начали работать как инструмент ускорения выбора, а не как дополнительное препятствие.
3. Редизайн карточек товаров
Карточки товаров были упрощены за счёт удаления визуального шума и перераспределения акцентов. Основное внимание было сосредоточено на ключевой информации — названии, цене и рейтинге, что улучшило читаемость и упростило сравнение товаров между собой. Это позволило пользователю быстрее принимать решения при просмотре каталога.
4. Добавление ориентиров в каталоге
Для пользователей, которые не имеют чёткого запроса, были добавлены дополнительные ориентиры: подборки, категории по нотам и визуальные подсказки. Это помогло превратить хаотичный просмотр каталога в более управляемый процесс выбора и снизить ощущение перегрузки от большого ассортимента.
Выводы по проекту
Какие проблемы удалось решить
- Перегруженность каталога, из-за которой пользователю было сложно быстро сориентироваться в ассортименте и сфокусироваться на товарах
- Сложная и избыточная фильтрация, которая не ускоряла выбор, а наоборот увеличивала количество действий и вызывала путаницу
- Перегруженные карточки товаров, затрудняющие быстрое сканирование и сравнение вариантов между собой
- Отсутствие ориентиров для пользователей без конкретного запроса, из-за чего процесс выбора становился хаотичным и затянутым
- Слабая иерархия контента, при которой элементы конкурировали за внимание и не выстраивали понятный пользовательский сценарий
Что я понял, работая над проектом
В e-commerce каталоге недостаточно просто показать пользователю список товаров.
При большом ассортименте ключевая задача интерфейса — не отображение, а помощь в выборе. Если пользователь вынужден тратить время на то, чтобы разобраться в структуре, фильтрах или карточках, это напрямую снижает вероятность покупки.
Я понял, что избыточность функционала не равна лучшему пользовательскому опыту. Наоборот, большое количество фильтров, элементов и информации без чёткой приоритизации создаёт перегрузку и увеличивает когнитивную нагрузку. В таких условиях пользователь быстрее устаёт и чаще откладывает решение.
Отдельно важно, что разные пользователи находятся в разных состояниях: кто-то приходит с конкретным запросом, а кто-то только начинает выбор. Универсальный интерфейс должен учитывать оба сценария и помогать на каждом этапе.
В итоге ключевой вывод — хороший каталог не перегружает пользователя возможностями, а направляет его, снижая сложность выбора и делая путь к покупке максимально простым и понятным.
