Умная банковская панель (Панель управления финансами)

Задача

Разработать функцию, которая показывает пользователю — сколько денег пришло и сколько ушло за выбранный период. Без ручных подсчётов, без лишних экранов.

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

Анализ и исследование

Я провела опрос среди пользователей банковских приложений — в формате личных разговоров и онлайн-переписки, а также проанализировала их отзывы и субъективные мнения, чтобы выявить болевые точки в пользовательском опыте.

Цель: понять, как люди следят за финансами, где спотыкаются и какой формат аналитики им удобнее.

Вопросы интервью:
  1. Как вы сейчас отслеживаете доходы и расходы?
  2. Используете банковские приложения или сторонние PFM-сервисы?
  3. Какую финансовую информацию важно видеть в первую очередь?
  4. Насколько легко понять, сколько денег реально осталось?
  5. Приходится ли вручную сравнивать доходы и расходы?
  6. Бывает ли сложно быстро найти нужную финансовую информацию?
  7. Возникала ли путаница из-за ожидающих транзакций?
  8. Было бы удобно видеть доходы и расходы на одном экране?
  9. Что понятнее: графики, таблицы или итоговые суммы?
  10. Есть ли счета в нескольких банках?
  11. Насколько важно видеть все счета и транзакции в одном месте?
  12. Что больше всего раздражает в текущих банковских PFM-инструментах?
Основные инсайты исследования:
  • Пользователи хотят простую сводку доходов и расходов — без сложных графиков и лишних экранов.
  • Большинство банковских приложений разделяют доходы и расходы по разным экранам — пользователям приходится переключаться.
  • Стандартные периоды («Этот месяц», «Последние 30 дней») не дают гибкости — пользователи не могут выбрать произвольный диапазон дат.
  • Ожидающие транзакции часто выпадают из аналитики — в итоге пользователь видит неполную картину своих финансов.
  • Пользователи не доверяют сторонним PFM-сервисам: опасаются за безопасность данных и предпочитают встроенные инструменты банка.
  • Существующие решения перегружены функциями — даже простые задачи требуют лишних шагов.

Анализ прямых конкурентов

U.S. Bank. Слишком много графиков и нет понятных итоговых сумм. Интерфейс перегружен визуальными элементами и отсутствует простая сводка «Общий доход», «Общие расходы».
Chase bank. Проблема – доходы и расходы разделены, аналитика построена вокруг графиков, отсутствует простая и понятная итоговая сводка, которую можно быстро просмотреть.
Wells Fargo bank. Финансовые данные разбросаны по разным разделам, навигация фрагментированная. Интерфейс создает когнитивную перегрузку.

Гипотеза

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

Прототипирование

Бумажный каркас
Прототип низкой точности

Схема действий пользователя

Проблемы и решения

Нет простой сводки доходов и расходов
Проблема
Чтобы понять, сколько пришло и ушло за период, нужно вручную листать транзакции или разбираться в графиках. Даже PFM-инструменты часто не показывают итоговые цифры.
Решение
БлокMoney Flowсразу на главном экране — три числа:Total In,Total Outи Net Cash Flow. Никаких лишних действий.
Доходы и расходы — на разных экранах
Проблема
Пользователю приходится переключаться между разделами или идти в сторонний сервис, чтобы сравнить доходы и расходы за один период.
Решение
Единый экран анализа объединяет всё в одном месте — доходы, расходы и сравнение за выбранный период. Меньше переключений, меньше когнитивной нагрузки.
Нет детализации расходов и доходов
Проблема
Общая сумма есть, но непонятно — на что именно уходят деньги, какие категории самые затратные и как меняется поведение со временем.
Решение
AI-экраны: Income, Expense, Subscription Monitorс автокатегоризацией — транзакции автоматически распределяются по категориям: Shopping, Food& Dining, Bills& Subs,Salaryи другие.
Ограниченный выбор периода
Проблема
Только фиксированные периоды — «этот месяц», «последние 30 дней». Свой диапазон задать нельзя, сценарии вроде «с последней зарплаты» недоступны
Решение
Умные пресеты + произвольный календарь. Готовые сценарии:Since Last Pay,This Quarter,Year to Date— или любой диапазон вручную
Цифры без интерпретации
Проблема
Приложение показывает данные, но не объясняет, что с ними делать. Пользователь сам должен делать выводы.
Решение
AI Insights— персонализированные выводы, которые объясняют изменения понятным языком.«Profit increased by 30% compared to the previous month»
Перегруженный интерфейс
Проблема
Сложные графики, множество вкладок, избыток функций — из-за этого даже простая задача требует усилий.
Решение
Интерфейс построен по принципу «главное — сначала»: крупные ключевые показатели, чёткая иерархия, минимум лишнего. Детали доступны по необходимости, а не навязаны сразу.
Ожидающие транзакции выпадают из аналитики
Проблема
Ожидающие транзакции игнорируются — пользователь видит неполный баланс и не понимает реальную финансовую ситуацию.
Решение
Ожидающие транзакции включены в аналитику и маркируются отдельной иконкой — видны и в списке, и на графиках. Финансовая картина полная и прозрачная.

Дизайн система

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

Typography
A
Roboto,32
Roboto, 24
Roboto, 22
Roboto, 16
Roboto, 14
SemiBold
Medium
Regular
A
Inter, 16
Inter, 14
Medium
Regular
Colors
Neutral colors
000000
5B47B8
808080
EDEDED
FFFFFF
Accent colors
D62728
FB9C68
FFB702
FDCFA6
FFFDE8
EEE1E1
6A53D7
516EF4
DD4AF1
D3C9FF
2CA02C
DAE6DA
Components

Экраны проекта

Money Flow & Income
Expense
Subscription Monitor