Редизайн системы навигации: информативнее, дружелюбнее
Прямое продолжение исследования из кейса «Из утилиты — в платформу»: перенёс вывод на экраны. Пересобрал систему навигации — интерфейс стал информативнее и дружелюбнее: на тех же экранах клиент видит больше пользы, и продавать теперь умеет не только главная, а каждый блок. Ниже — пары «было → стало» по ключевым экранам.
// о проекте
Студия 3DaVinci, где я работаю аналитиком и UX-дизайнером, занимается автоматизацией оптовых продаж с помощью продукта B2B Движение: оптовой компании предлагается сделать собственный B2B-маркетплейс. Компания сотрудничает с большим спектром отраслей: электротехника, сантехника, FMCG, стройматериалы, мебельное производство, сетевая инфраструктура. Этот кейс — наглядная модернизация маркетплейса и прямое продолжение исследования из кейса «Из утилиты — в платформу». Функционал уже покрывал почти все задачи, но рос без системы навигации и выглядел как набор инструментов, а не цельная платформа.
// проблема
Навигация была собрана из разрозненных блоков: часть экранов — из стоковых Material-компонентов, часть собрана вручную с немного различавшейся логикой навигирования.
- Главное — интерфейс был неинформативным: место на экране тратилось впустую, клиент не видел полезных данных, а сам интерфейс не предлагал пользователю полезных инсайтов.
- Каждый блок делали как отдельный проект: внутри — своя логика, а в совокупности — хаос и визуальный долг.
// как я подходил к задаче
Оттолкнулся от исследования
Этот редизайн — прямое продолжение кейса «Из утилиты — в платформу». Я уже знал, что клиентам нужен не склад, а платформа, — оставалось перенести вывод на экраны. Принцип жёсткий: всё меняется только из потребностей бизнеса и пользователей, ни одного решения «потому что красивее».
Разобрал, что устарело
Навигация исторически собиралась из разных кусков: что-то на стоковых Material-компонентах, что-то вручную со своей логикой переходов. Многие решения были оправданы когда-то, но давно потеряли актуальность. Я свёл всё к единой логике навигирования и общей дизайн-системе.
Собрал каркас на принципах продукта
Опираясь на принципы продукта и User Cases, сделал черновые макеты и описал структуру каждого экрана — что и в каком приоритете показываем, исходя из задач бизнеса и клиента. Принципы задали каркас, а на нём вырос и весь интерфейс. Сначала логика, потом пиксели.
Сделал интерфейс информативнее и дружелюбнее
Навёл визуал поверх устоявшейся структуры. Тот же экран стал нести больше пользы — списки, подборки, остатки и цены там, где раньше был воздух, — и при этом стал понятнее и спокойнее для пользователя.
Заложил в каждый блок возможность продавать
Единый стандарт — это не только порядок. Я проектирую интерфейс отдельными информационными блоками, поэтому в любой легко встроить главную бизнес-потребность — функции онлайн-шоурума. Раньше что-то предлагать пользователю умела только главная. Теперь каталог сам предлагает; список товаров — не просто перечень по порядку, а персонализированная подборка; плиточный и табличный вид стали информативнее и приятнее глазу; списки — почти лендинг для продажи готовых подборок; даже поиск стал привлекательнее и интуитивнее.
Описал функционал страниц
Финально зафиксировал поведение каждой страницы в спецификации: состояния, реакции, граничные случаи — чтобы разработка собрала ровно то, что задумано, а не своё прочтение макета. Как устроены каталог и фильтры — подробно в кейсе про систему фильтров.
// было → стало
Это не «перекраска». Каждое изменение ниже выросло из конкретного запроса конечных пользователей — я собрал их боли на интервью и в User Cases, и именно от них отталкивался. Слева — как было и на что жаловались клиенты, справа — что я сделал в ответ. Дизайн пришёл последним, поверх структуры.
БылоЗапрос от пользователей: на главной пусто, экран не работает — просили гибче и плотнее разместить полезное. Отдельная жалоба — огромная, во всю ширину шапка.
СталоГлавная вмещает заметно больше пользы, а шапка стала компактной — навигация переехала в боковое меню и перестала съедать пространство.
БылоКаталог — главная боль, на которую жаловались клиенты: всё свалено в одну кучу, пользователи путались, подолгу искали нужный фильтр и проваливались куда-то вглубь. Параллельно разработка просила его переделать — компонент был сверхтяжёлым и при открытии ломал вёрстку всей страницы.
СталоВажно: я не подменял каталог витриной. По требованию бизнеса добавил один отдельный пункт меню с маркетинговой информацией — акции, бренды, подборки.
СталоА сам каталог остался каталогом: древовидная иерархия хранения всех товаров не сломана — категории с количеством позиций на месте, просто стало чище и понятнее. Подробнее про категории и фильтры — в кейсе про систему фильтров.
БылоКлиенты жаловались: фильтры спрятаны внутри каталога и смешаны с категориями — нужный не найти, отделить одно от другого нельзя.
СталоСтало два уровня доступа. Первый — горячие фильтры: самые популярные вынесены прямо на страницу, применяются в один клик без лишних окон.
СталоВторой — кнопка «Фильтры»: по ней открывается полноценное окно со всей системой фильтров для точного подбора. Архитектуру этого разделения подробно разбираю в кейсе про систему фильтров.
БылоПлиточный вид был просто россыпью карточек без системы.
СталоНавёл порядок — единая сетка и читаемые карточки, вид стал привлекательнее глазу. Список товаров теперь не просто лежит по порядку, а показывает персонализированную подборку. И наверх вынесены категории, которые пользователи искали постоянно и сами просили поднять выше.
БылоТабличный вид жил без единых правил.
СталоПривёл к порядку — плотный, информативный и более приятный глазу список под профессиональную закупку, где видно максимум данных. Категории, которые вечно искали, так же подняты наверх.
БылоКлиентам негде было удобно держать спецификации, КП и избранное — только плоская таблица отложенных позиций.
СталоПолноценное место хранения — спецификации, коммерческие предложения, избранные и купленные товары. Каждый список оформлен практически как лендинг для продажи готовых подборок, а не строка в таблице: выглядит дорого и работает на сделку.
БылоПользователям не хватало функциональности поиска — он умел мало и отдавал выдачу скупо.
СталоЗаметно функциональнее — совместная работа с бэкендом и фронтендом. Со стороны интерфейса вся выдача упакована чётко и наглядно: результаты, подсказки и данные по товару читаются с первого взгляда. И визуально поиск стал привлекательнее и интуитивнее.
// результат
с документами
со списками
Главная стала местом, где клиент видит предложения, а не ищет накладную.
Пользователи дали приятный фидбэк, а вёрстка ускорилась за счёт стандартизации.
Хороший редизайн идёт в одном порядке: потребности → сценарии → структура → дизайн → описание функционала. Когда меняешь интерфейс только из задач бизнеса и пользователя, он становится информативнее и дружелюбнее сам собой. А когда интерфейс собран из самостоятельных блоков по единому стандарту, в каждый легко встроить продающую логику онлайн-шоурума — не ломая остальное.