Редизайн системы фильтров в B2B-маркетплейсе
Часть большого редизайна навигации, разобранная подробно: через интервью выявил два сценария поиска и разделил категории и фильтры на независимые блоки — для дизайна, фронта и бэка.
// о проекте
Студия 3DaVinci, где я работаю аналитиком и UX-дизайнером, занимается автоматизацией оптовых продаж с помощью продукта B2B Движение: оптовой компании предлагается сделать собственный B2B-маркетплейс. Компания сотрудничает с большим спектром отраслей: электротехника, сантехника, FMCG, стройматериалы, мебельное производство, сетевая инфраструктура. Это подробный разбор одной части редизайна навигации — каталога и фильтров. Клиенты заказывают товары тысячами позиций, и поиск товара здесь — главный сценарий. А держится он на системе фильтров: если она кривая, рассыпается всё остальное.
// проблема
Система фильтров устарела. Её спроектировали давно под другие задачи, и за годы она разрослась до монстра — неудобного клиентам и хрупкого в разработке.
- Клиенты жаловались: фильтры запутанные и многоуровневые, на поиск нужного товара уходило много времени.
- Разработка страдала: старая логика ломала вёрстку при смене ширины экрана, каждый фикс превращался в боль.
// как я подходил к задаче
Провёл глубинные интервью
Поговорил с клиентами из разных отраслей — электротехника, сантехника, FMCG — и выяснил, как они реально ищут товары.
Увидел два сценария поиска
Первый: клиент вбивает название товара из своей спецификации и по ней же подбирает фильтры. Второй: сначала выбирает категорию, а уже внутри неё фильтрует по характеристикам.
Нашёл корень проблемы
Старая система валила категории и фильтры в одну кучу. А пользователю нужно, чтобы это было разделено.
Спроектировал решение
Категории и фильтры — два независимых блока: отдельные компоненты в дизайне и вёрстке, две разные сущности на бэке. Категория перестала быть «расширенным фильтром».
// процесс to-be (bpmn)
Рассмотрим на схеме ветвление сценариев: один поток пользователя, развилка «как ищет?», две ветки — по спецификации и по категории — сходятся в добавление товара в спецификацию или КП.
Упрощённая схема
// результат
в одном блоке
Две сущности вместо одной — раздельно для дизайна, фронтенда и бэкенда.
Поиск товара по названию из спецификации → подбор фильтров под этот запрос.
Выбор категории → фильтрация по критериям внутри неё → результаты в корзину.
Проблема была не в «плохом дизайне», а в том, что бизнес-логика — категория отдельно, фильтры отдельно — не была выявлена и зафиксирована. Интервью дали сценарии, сценарии — требования, требования — три независимых «дома»: дизайн, фронт, бэк.