Редизайн навигации сайта УБРиР

На сайте есть много страниц, сделанных в старом UI на старом движке. Меню там тоже устаревшее и поменять его невозможно: только переносить страницы на новый движок. Получается, что если я полностью изменю логику и визуал меню в новой версии, то пользователи, попав на старые страницы, будут сложнее ориентироваться на сайте

Мы не могли делать полный визуальный редизайн меню по двум причинам:

[1] Разные UI на одном сайте

Меню на старых страницах сайта:

Бизнес не мог ждать релиз нового меню несколько месяцев, поэтому дизайн нужно сделать с минимумом новых компонентов и без сильного изменения логики

[2] Жёсткий дедлайн и дефицит ресурсов разработки

Мы собрали созвон с заказчиком, чтобы создать новую иерархию продуктов: добавить новые, убрать старые и распределить в нужном порядке. Чтобы совместить пользу для бизнеса и удобство для клиентов, мы выслушали заказчика и собрали инфу о самых популярных продуктах у пользователей сайта. Такая структура получилась на момент обсуждения:

Если мы избавим меню от текущих недостатков и упростим интерфейс, то улучшим качество взаимодействия его взаимодействия с пользователями. Это должно привести к росту конверсии

В меню 3-го уровня на сайте были заголовки, которые в то же время являлись ссылками для перехода на страницу со всеми продуктами выбранной категории. Судя по анализу тепловой карты и переходов из меню, пользователи не воспринимали заголовок как кнопку, от чего банк не получал трафик на продуктовые страницы.

Мы с командой сделали вывод, что крупные заголовки, даже если рядом с ними стоит стрелка, не похожи на кнопки, которые мы используем на сайте. Если эти ссылко-заголовки требуют создания отдельного паттерна, то в нашей ситуации лучше от них отказаться

Многие пункты меню были названы в честь продуктов, например: пакет «Бизнес-щит». Название красивое, но сути предложения не передаёт и зачем на него кликать — непонятно. Поэтому я стал называть пункты меню по полезному действию, а не маркетинговому названию. Бизнесу подход понравился

В меню 2-го и 3-го уровня часто повторялись заголовки, а ещё «повторки» могли быть кликабельны и выполнять разные действия. Чтобы не ломать головы пользователям, основные заголовки я оставил только на 2-м уровне меню

У прошлого меню не было модульности: технически не было предусмотрено перемещение и добавление колонок, поэтому размещение нового контента приводило к разрастанию меню по вертикали.

Наши внутренние тесты показали, что пользователи не замечают нижнюю часть меню, потому что привыкают к навигации, состоящей из одной горизонтальной секции. Такой вывод я сделал из-за низкой кликабельности и прокрутки нижней части двухэтажного меню.

Чтобы сделать меню более предсказуемым для пользователя и более модульным для разработки и изменения контента, я сделал 4-х колоночную структуру

После утверждения дизайна я составил спецификации по вёрстке модульных контейнеров для дизайнеров и разработчиков. В дополнение я собрал гайд по неймингу пунктов меню для маркетологов, которые будут вносить текстовые правки в меню после моего ухода с проекта

После того, как разработчики собрали макет, они выкладывают результат на тестовый стенд. Там я провожу дизайн-ревью и выискиваю баги 👀

Обычно я вношу данные в специальный чек-лист, но если правок мало, а все нужные ребята со мной в офисе — решаем вопросы на месте

Я минимальными средствами пофиксил недостатки интерфейса и пересобрал визуал. Это повлияло на метрики:

[1] Количество заявок на открытие расчётного счёта из меню увеличилось на 48%

[2] Число переходов на ключевую страницу раздела: «Расчётный счёт» увеличилось на 52%