Релиз 2
Каталог, карточка товара
Каталог, карточка товара
Задача
Переосмыслить пользовательский опыт и представить рекомендации по его улучшению на основе комплексного анализа.
В рамках исследования я изучила продукт с разных сторон:
— Проанализировала метрики, чтобы оценить эффективность продукта и выявить проблемные зоны.
— Провела интервью с пользователями, чтобы понять их реальный опыт, трудности и потребности.
— Выполнила UX-аудит интерфейса, проверив его на удобство и логику по принципам юзабилити.
— Провела анализ конкурентов, изучив их решения и лучшие отраслевые практики.
В рамках исследования я изучила продукт с разных сторон:
— Проанализировала метрики, чтобы оценить эффективность продукта и выявить проблемные зоны.
— Провела интервью с пользователями, чтобы понять их реальный опыт, трудности и потребности.
— Выполнила UX-аудит интерфейса, проверив его на удобство и логику по принципам юзабилити.
— Провела анализ конкурентов, изучив их решения и лучшие отраслевые практики.
Проблема
Faberlic, как динамичный бренд, всегда стремится быть на шаг впереди. Однако его цифровая витрина — каталог и карточки товаров — начала отставать от ожиданий современного пользователя. Интерфейс выглядел устаревшим, навигация вызывала затруднения, а процесс выбора товара был неочевидным. Это создавало «трение» на пути клиента от интереса к покупке.
Я провела 15 глубинных интервью с пользователями, в ходе которых изучала их реальное поведение, ключевые мотивы и «боли» при взаимодействии с карточкой товара и каталогом. Если количественные метрики показывают, что именно делают пользователи, то эти интервью позволили понять, почему они поступают именно так, какие эмоции испытывают и с какими скрытыми трудностями сталкиваются на каждом этапе выбора и совершения покупки.
Бенчмарканализ анализ
В рамках проекта по обновлению интерфейса я провела бенчмаркинг, чтобы найти и проанализировать лучшие UX/UI-решения на рынке. В результате я выявила и обосновала самые удачные и распространенные паттерны в отрасли. Это позволило мне предложить дизайн, который не только современен и эффективен, но и сохраняет привычные для пользователя модели взаимодействия, что полностью соответствует ключевому принципу юзабилити — предсказуемости и интуитивности.
Такой подход обеспечивает легкую и интуитивно понятную адаптацию к обновленному продукту.
Такой подход обеспечивает легкую и интуитивно понятную адаптацию к обновленному продукту.
Дизайн
Каталог
Основной целью обновления каталога было улучшение пользовательского взаимодействия и упрощение навигации, чтобы пользователи могли легко находить нужные товары среди широкого ассортимента.
— Добавлены табы категорий, которые помогают пользователю на первых шагах сузить поиск и быстрее перейти к нужному разделу.
— Фильтры вынесены в боковой сайдбар — проработаны параметры фильтрации и логика взаимодействия, что упростило навигацию по каталогу.
— С учетом интересов бизнеса внедрен комбо-промо блок с дополнительными предложениями для повышения вовлеченности и среднего чека.
— Добавлены табы категорий, которые помогают пользователю на первых шагах сузить поиск и быстрее перейти к нужному разделу.
— Фильтры вынесены в боковой сайдбар — проработаны параметры фильтрации и логика взаимодействия, что упростило навигацию по каталогу.
— С учетом интересов бизнеса внедрен комбо-промо блок с дополнительными предложениями для повышения вовлеченности и среднего чека.
Чтобы сократить путь пользователя и сделать процесс добавления супер-товаров более удобным, было реализовано модальное окно выбора параметров, открывающееся прямо в каталоге
при клике «В корзину».
при клике «В корзину».
Мобильная версия
В мобильной версии каталога был переосмыслен процесс фильтрации: фильтры вынесены на отдельный экран, расширены параметры и улучшена логика взаимодействия. Сохранение привычных паттернов помогло сделать навигацию более интуитивной.
Мини-карточка товара
Особое внимание в каталоге было уделено мини-карточке товара. С учётом специфики бизнеса Faberlic, где основными пользователями являются консультанты, важно было разработать структуру карточки, обеспечивающую быстрый доступ к ключевой информации — изображению, названию, артикулу и вариантам палитры или размеров.
Отталкиваясь от потребностей пользователей и бизнес-требований, я проработала шесть вариантов мини-карточек товаров, протестировала разные компоновки элементов и подходы к отображению информации, чтобы найти оптимальное решение.
Отталкиваясь от потребностей пользователей и бизнес-требований, я проработала шесть вариантов мини-карточек товаров, протестировала разные компоновки элементов и подходы к отображению информации, чтобы найти оптимальное решение.
Карточка товара
Карточка товара — ключевая и самая конверсионная страница каталога. Её основная задача — эффективно представить продукт и мотивировать пользователя к покупке. В рамках проекта была полностью пересобрана структура первого экрана, с фокусом на понятной и последовательной подаче информации, а также на интеграции привычных пользовательских паттернов, обеспечивающих интуитивное взаимодействие.
В процессе работы были реализованы следующие решения:
— Оптимизирован функционал блока палитры, учитывающий большое количество возможных оттенков и обеспечивающий удобный выбор варианта.
— Ключевая информация о продукте вынесена в отдельный блок с возможностью перехода к подробному контенту.
— Переработан блок с ценой и кнопкой действия: с учётом того, что на один товар может быть указано до четырёх цен, акцент сделан на актуальной стоимости и бонусных баллах с помощью цветовых акцентов.
— Добавлен блок «Серия», позволяющий бизнесу продвигать сопутствующие товары и усиливать стратегию кросс-селла.
— Интегрированы промо-блоки («Акция», «Распродажа»), обеспечивающие быстрый доступ к специальным предложениям и товарам с приоритетной реализацией.
В процессе работы были реализованы следующие решения:
— Оптимизирован функционал блока палитры, учитывающий большое количество возможных оттенков и обеспечивающий удобный выбор варианта.
— Ключевая информация о продукте вынесена в отдельный блок с возможностью перехода к подробному контенту.
— Переработан блок с ценой и кнопкой действия: с учётом того, что на один товар может быть указано до четырёх цен, акцент сделан на актуальной стоимости и бонусных баллах с помощью цветовых акцентов.
— Добавлен блок «Серия», позволяющий бизнесу продвигать сопутствующие товары и усиливать стратегию кросс-селла.
— Интегрированы промо-блоки («Акция», «Распродажа»), обеспечивающие быстрый доступ к специальным предложениям и товарам с приоритетной реализацией.
Отдельного внимания заслуживает второй экран карточки товара, который содержит значимый объём информации, особенно важной для консультантов. Этот контент используется для анонсирования и стимулирования продаж, поэтому важно было сохранить полноту данных и обеспечить удобное восприятие.
Чтобы оптимизировать пространство и не превращать страницу в длинное полотно, данный блок был реализован в формате табо́в. Такой подход позволил компактно структурировать информацию, сохранив её доступность и визуальный баланс страницы.
Чтобы оптимизировать пространство и не превращать страницу в длинное полотно, данный блок был реализован в формате табо́в. Такой подход позволил компактно структурировать информацию, сохранив её доступность и визуальный баланс страницы.
Мобильная версия
Цель — создать не просто адаптацию десктопа, а удобный и быстрый интерфейс, сопоставимый по комфорту с мобильным приложением. Основной фокус — сохранить привычные паттерны и обеспечить быстрый доступ к ключевым действиям.
Ключевые улучшения мобильного интерфейса:
— Обновлён первый экран: уменьшила размер изображения, чтобы сразу показать продолжение страницы и сформировать ощущение глубины контента.
— Фиксированная кнопка действия: обеспечивает постоянный доступ к CTA вне зависимости от позиции на странице.
— Бейджи акций: добавлены для моментальной идентификации спецпредложений и повышения внимания к ключевым товарам.
— Акцент на ценовом блоке: переработала визуальный стиль и цветовые акценты, чтобы актуальная цена считалась быстрее и чище.
— Информация в аккордеонах: структурировала подробные данные компактно, сохранив лёгкость и ритм интерфейса.
Ключевые улучшения мобильного интерфейса:
— Обновлён первый экран: уменьшила размер изображения, чтобы сразу показать продолжение страницы и сформировать ощущение глубины контента.
— Фиксированная кнопка действия: обеспечивает постоянный доступ к CTA вне зависимости от позиции на странице.
— Бейджи акций: добавлены для моментальной идентификации спецпредложений и повышения внимания к ключевым товарам.
— Акцент на ценовом блоке: переработала визуальный стиль и цветовые акценты, чтобы актуальная цена считалась быстрее и чище.
— Информация в аккордеонах: структурировала подробные данные компактно, сохранив лёгкость и ритм интерфейса.
Итоги
Редизайн каталога и карточки товара сделал взаимодействие с продуктами быстрее и понятнее, особенно для консультантов, которые работают с большим объёмом позиций.
Благодаря этим изменениям сократилось количество лишних действий, ускорился процесс выбора товара и оформление заказа стало более интуитивным и удобным.
Благодаря этим изменениям сократилось количество лишних действий, ускорился процесс выбора товара и оформление заказа стало более интуитивным и удобным.
