k41.ru (B2C) маркет
K41 — премиальный маркетплейс одежды, обуви и аксессуаров. Объединяет удобство новой навигационной механики с эстетикой погружения в мир шоппинга дизайнерских коллекций
Задача:
Спроектировать и протестировать UX-решения, которые сократят отказы, ускорят выбор и повысят LTV, как следствие средний чек
Проблема
Конфликт удобства и визуального ряда. Люксовый покупатель не должен выбирать. Он хочет пользоваться функционалом и оставаться внутри атмосферы виртуального шоурума
Выделил цели бизнеса и пользователя:
Для пользователя:
Гибко настраивать фильтрацию и поиск, не теряя контекст. Видеть товары с деталями и быстро сравнивать их без лишних переходов. Иметь доступ к размерной сетке и примерке прямо в каталоге
Для бизнеса:
Рост удержания на подборках и глубины просмотра каталога. Снижение отказов от неудобной навигации. Ускорение выбора и принятия решения. Увеличение среднего чека через кросс-сейл в каталоге. Сохранение визуального кода люкса при компактных инструментах управления
Бенч
Колонка занимает 20% вьюпорта, приводит к когнитивной перегрузке, росту отказов и снижению глубины просмотра каталога
Гипотеза (далее Айленд)
Совместить фильтрацию в сквозном элементе с фиксом во вьюпорте
Исследование выявило преимущества Айленда, но некоторые пользователи высказали недоверие
Поэтому на раннем этапе решено использовать Айленд в связке с шапкой. Например, при переходе в раздел «Одежда», в него заводится фильтр, чтобы мягко приучить к новой механике
Со второй итерации Айленд консолидирует поиск, фильтрацию, алерты и вспомогательные инструменты (размерник, сплит) в компактном виде. Решает проблему потери контекста
Чипсы фильтров и навбар навигации:
Сценарий для навигации по брендам. Фокус помогает в использовании, скрывая неиспользуемое в ховер или палитрой
На странице товара показывает фильтр и инфо по Сплиту для расчета рассрочки:
Калькулятор Сплита:
Интерактивный размерник. Позволяет навигироваться между параметрами изделия и размерами:
Айленд для алертов и сценариев корзины:
Некоторые состояния Айленда для разных сценариев. Удобство компонента в его универсальности
Построил дизайн-систему для ускорения разработки (с Variables). На примере темной темы для главной страницы и страницы личного кабинета:
Для проекта спроектировал моноширинный шрифт Mono. Равные кегельные площадки спасли много нервных клеток при верстке
Готов к сотрудничеству
и новым проектам, пишите: