Mobile
Tablet
Desktop

by BRUX

Финансовый сервис с актуальной информацией о большинстве банков и их продуктах по всей России, который помогает пользователям сравнивать предложения и принимать более осознанные финансовые решения.

mobile
О проекте
Задача: разработать дизайн финансового сервиса для мобильных устройств с последующей адаптацией под десктоп.Решение: проработать структуру продукта, ключевые пользовательские сценарии и UX/UI интерфейса, чтобы пользователь мог быстро находить, сравнивать и выбирать подходящие банковские продукты.
Mobile
Tablet
Desktop
Структура продукта
Аналитика
Проработали логику сервиса и построили оптимальный пользовательский путь от поиска финансового продукта до целевого действия.
Сократили количество шагов: в среднем пользователю достаточно 3 кликов, чтобы совершить целевое действие.
sctructuresctructuresctructure
Э
dollar
евро
юань
Главная страница
Дизайн
Главная страница — ключевая точка входа в сервис.
На первом экране собрали основные категории финансовых продуктов: потребительские кредиты, кредитные и дебетовые карты, ипотека, банки, курсы валют, вклады и займы.
Такая структура позволяет пользователю быстро определить задачу и перейти непосредственно к нужному сценарию.
phone
phone
phone
Потребительские кредиты
Разработали раздел с предложениями кредитов от ведущих банков страны и добавили кредитный калькулятор.
Пользователь может сразу оценить основные параметры предложения и перейти к следующему шагу, не покидая сценарий выбора.
phone
phone
phone
phone
Рубль
phone
phone
Кредитные карты
Спроектировали отдельный сценарий для выбора кредитной карты. Пользователь может сравнить предложения, рассчитать основные параметры и перейти к оформлению подходящего продукта.
dollar
dollar
Банки
Разработали каталог банков России. Пользователь может быстро найти интересующий банк, изучить его продукты и получить необходимую информацию для принятия решения.
phone
phone
phone
phone
phone
phone
phone
phone
dollar
Адаптивная версия
Чтобы сервисом было удобно пользоваться на разных устройствах, отдельно проработали адаптивные сценарии для планшетов.
При адаптации сохранили логику пользовательских путей и иерархию информации, изменив представление интерфейса под размер экрана.
tablettablet
tablettablet
tablet
tablettablet
alt
alt
alt
alt
Реализация десктоп-версии
При переходе от мобильного интерфейса к десктопу сохранили основную продуктовую логику и пользовательские сценарии.
Расширили рабочее пространство для отображения большого объёма финансовых данных, добавили дополнительные элементы навигации и адаптировали интерфейс под крупные экраны.
В результате пользователь получает тот же понятный сценарий работы, но с более широкими возможностями для изучения и сравнения банковских продуктов.
desktop
UI kit
Собрали UI-kit как основу дизайн-системы продукта.
Определили типографику, цветовую систему, состояния элементов, инпуты и кнопки.
Это позволяет поддерживать единый визуальный язык сервиса и масштабировать интерфейс при дальнейшем развитии продукта.

Manrope

Заголовки

Bold
39px
33px
27px
20px

Roboto

Текст и подписи

Medium

Regular

20px
16px
14px
12px
10px
#6E2CF1
#111111
#818992
#DDE0E3
#EEF0F2
#FFFFFF
Инпуты
Кнопки
Тёмная тема
Разработали тёмную тему сервиса для  работы в разное время суток. Она стала отдельным пользовательским сценарием и позволяет переключаться между визуальными режимами без изменения структуры и логики продукта.
При разработке сохранили читаемость финансовых данных, иерархию информации и основные точки взаимодействия.
phone
phone
phone
phone
phone
phone