Финам Банк

Контекст

У Банка Финам был сайт, который годами обрастал страницами без единой системы — разный стиль оформления, стоковые фото, нерабочие ссылки, документы не по стандарту. Формальная задача звучала как «перенести содержимое на новый дизайн» — с одним жёстким условием от ЦБ: контент нужно было сохранить полностью, часть страниц юридически обязательна

Роль

Единственный дизайнер на проекте — вела UX-исследования совместно с лабораторией опыта, UI и вёрстку на конструкторе сайтов. В команде — менеджер проекта, фронтенд-разработчик, арт-директор, юристы и иллюстратор

Процесс

• UX-аудит старого сайта — дублирующаяся информация, неполноценное меню, нерабочие блоки и кнопки, страницы без единого стиля
• Анализ конкурентов (БКС, Цифра банк, МКБ) — переняла рабочие паттерны навигации
• Опрос клиентов банка — что раздражает и что нужно улучшить в первую очередь

Ключевые решения

Главная страница

Проблема: отдельной главной страницы не было — пользователь сразу попадал в раздел «Частным лицам» и терял общую картину продуктов банка

Решение: спроектировала полноценную главную с самыми популярными услугами и историями, которые знакомят с топ-продуктами банка

До После

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

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

Обмен валюты

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

Решение: собрала раздел с нуля — выбор города с адресом отделения на карте, калькулятор конвертации на лету, часы работы отдельно для частных и юридических лиц

До После

Было — таблица курсов без города и калькулятора. Стало — выбор города, карта отделения и мгновенный расчёт суммы

Клик по городу открывает модальное окно со всеми городами по алфавиту и поиском по названию — теперь свой город можно найти за пару секунд, а не листать список вручную

Вклады и накопительные счета

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

Решение: сохранила всю функциональность (калькулятор, таблицу ставок, форму заявки), но переоформила по новому UI-kit: расчёт дохода стал главным фокусом экрана, а не одним из ярких блоков среди прочих

До После

Функциональность та же — калькулятор, ставки, заявка. Изменилась подача: расчёт дохода больше не соревнуется за внимание с декоративными блоками

Визуальный стиль и навигация

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

Решение: обновила меню и подвал, убрала нерабочие страницы, заменила стоковые фото на предметную съёмку и иллюстрации по новому UI-kit — на тестах пользователи заметно лучше реагировали на обновлённые страницы

Меню сгруппировано по смыслу — карты, вклады и счета, сервисы, привилегии, информация — вместо плоского списка ссылок

Были нарисованы около 20 новых изображений для банка — сам банк при этом переведён на актуальную дизайн-систему

Система контента вместо переноса страниц

Проблема: около 60 страниц — статьи и документы — без единой системы: разный стиль, часть не по стандарту, документы — сплошной список ссылок

Решение: спроектировала систему вместо переноса вручную: шаблон статьи с оглавлением и тегами, документы — в аккордеон по категориям и вкладки «Действующие/Архив». Контент сохранён на 100%, как требовал ЦБ

До После

Было — нескончаемый список ссылок без деления. Стало — категории сворачиваются в аккордеон, действующие документы отделены от архива

Шаблон статьи: теги, автор с карточкой, оглавление с якорями — принимает любой материал без вёрстки с нуля

Результат

Сайт получил полноценную главную вместо переадресации на раздел продукта, обновлённую навигацию, калькуляторы для валют и вкладов и систему контента, которая принимает новые материалы без вёрстки с нуля