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