BSPB
UX/UI Design
2023–2024
Редизайн компонентов сайта БСПБ: от точечных правок к системным решениям
Summary
Контекст
Сайт БСПБ — большой контентный сайт с множеством сценариев: от выбора продуктов до входа в интернет-банк. При дизайн-ревью регулярно всплывали проблемы с отступами, состояниями, адаптивностью и визуальной несогласованностью между разными частями интерфейса. Правки накапливались, но оставались точечными.
Моя роль: Product Designer — дизайн-ревью, редизайн компонентов, системные решения по типографике, сетке и адаптивному поведению.
Масштаб: 50+ секций с компонентами · 4 этапа корректировок · 4 темы сайта
Проблема
Решение
(1) Header: упрощение навигации
Было: Все элементы — навигация, геопозиция, контакты, поиск, вход в банк — конкурировали на одном уровне. Поиск отсутствовал. На узких экранах хедер ломался.
Что сделала:
Перераспределила элементы по уровням меню — геопозиция, контакты и офисы ушли в правую часть верхнего уровня, ближе к привычным паттернам.
Заменила текстовое «Ещё» на иконку троеточия — паттерн overflow, экономит место.
Спроектировала поиск с нуля — новая точка входа в хедере + механика, встроенная в существующую навигацию.
Переработала вход в интернет-банк — сделала его читаемым для разных типов пользователей.
Продумала устойчивое поведение на сжатых разрешениях.
Зачем: Хедер — самый нагруженный компонент сайта. Без чёткой иерархии уровней он работает как визуальный шум, а не как навигация. Системный подход к нему задаёт стандарт для остальных компонентов.
(2) Footer: навигационный компонент вместо служебного блока
Было: Мало информации, слабая иерархия, ключевые сценарии (контакты, чат, приложение) плохо считывались.
Что сделала:
Добавила новые уровни навигации и расширила ссылочную структуру.
Пересобрала сетку — контент распределён по логичным колонкам.
Вынесла наверх контакты, чат и переход в мобильное приложение.
Улучшила контраст и визуальную иерархию.
Зачем: Футер на контентном банковском сайте — это «второй шанс» навигации. Пользователь, дошедший до конца страницы и не нашедший нужное, должен получить понятную точку перехода, а не тупик.
(3) Сравнение тарифов РКО: читаемость и удобство выбора
Было: Параметры тарифов воспринимались слишком плотно, не выравнивались между карточками. На мобильных — пустоты и визуальные перекосы.
Что сделала:
Увеличила отступы и убрала лишние разделители — параметры стали читаемее.
Добавила тултипы к параметрам — компактность сохранена, контекст доступен по запросу.
Расширила формат хедера карточек: кроме иконки — изображение или карта.
Пересобрала desktop-логику — параметры тарифов выравниваются между собой.
На mobile предложила вертикальный сценарий с карточками друг за другом.
Зачем: Выбор тарифа — это сценарий сравнения. Если параметры плохо выравниваются или визуально перегружены, пользователь не сравнивает, а пытается разобраться. Задача компонента — снизить когнитивную нагрузку при выборе.
(4) Системный слой: типографика, контрастность, единые правила
Параллельно с компонентами я работала на уровне системных основ:
Шрифтовая иерархия — пересмотрела контраст между заголовками и body-текстом, чтобы роли стилей считывались явно.
Размерная сетка — уточнила поведение текстовых стилей для desktop и mobile.
Контрастность — улучшила видимость кнопок и интерфейсных элементов.
Единые правила — повторяющиеся решения приводились к согласованной системе вместо ad hoc подхода.
Зачем: Без системного слоя каждый новый компонент — это новый набор решений. Общие правила делают интерфейс предсказуемым и ускоряют и дизайн, и разработку.
Результат
Что я вынесла
В больших контентных сайтах точечные улучшения быстро упираются в потолок. Без общих правил каждый новый компонент создаёт новую несогласованность. Этот проект научил меня переключаться между масштабами — от конкретного тултипа до шрифтовой системы — и видеть, как одно влияет на другое.