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