Smart Banking Dashboard (Financial Management Panel)

Challenge

Design a feature that shows users how much money came in and how much went out over a selected period — no manual calculations, no unnecessary screens.

Project scope — digital banking / personal finance management
The target audience is people who actively use bank cards and want to stay in control of their finances: track expenses, analyze income, monitor subscriptions, and understand their financial situation over any desired period.

Research & Analysis

I conducted a survey among users of banking apps — through in-person conversations and online correspondence — and also analyzed their feedback and subjective opinions to identify pain points in the user experience.

Design a feature that shows users how much money came in and how much went out over a selected period — no manual calculations, no unnecessary screens.

Interview questions:
  1. How do you currently track your income and expenses?
  2. Do you use banking apps or third-party PFM services?
  3. What financial information is most important to see first?
  4. How easy is it to understand how much money you actually have left?
  5. Do you find yourself manually comparing income and expenses?
  6. Do you ever find it difficult to quickly locate the financial information you need?
  7. Have you ever been confused by pending transactions?
  8. Would it be convenient to see income and expenses on a single screen?
  9. Which do you find clearer: charts, tables, or summary totals?
  10. Do you have accounts across multiple banks?
  11. How important is it to see all your accounts and transactions in one place?
  12. What frustrates you most about the PFM tools in your current banking app?
Key research insights:
  • Users want a simple income and expense summary — without complex charts or unnecessary screens.
  • Most banking apps split income and expenses across separate screens — requiring users to switch back and forth.
  • Default time periods ("This Month", "Last 30 Days") lack flexibility — users can't select a custom date range.
  • Pending transactions are often excluded from analytics — leaving users with an incomplete picture of their finances.
  • Users don't trust third-party PFM services — they worry about data security and prefer built-in bank tools.
  • Existing solutions are overloaded with features — even simple tasks require unnecessary extra steps.

Research & Analysis

U.S. Bank. Too many charts with no clear summary totals. The interface is cluttered with visual elements, and there is no simple "Total Income" / "Total Expenses" breakdown.
Chase bank. Income and expenses are separated, analytics are built around charts, and there is no simple, easy-to-read summary that can be quickly reviewed.
Wells Fargo bank. Financial data is scattered across different sections with fragmented navigation, creating cognitive overload.

Hypothesis

  • If income and expenses are combined on a single screen, users will immediately see their balance — without any unnecessary switching.
  • If summary totals are shown instead of complex charts, cognitive load will be reduced and the need to manually count transactions will be eliminated.
  • If the user is given the freedom to choose any period, they will be able to analyze their finances for any scenario — whether it's a salary period, a vacation, or a major purchase.
  • If transactions are broken down by category, users will be able to spot spending patterns and gain a clearer understanding of their financial behavior.
  • If pending transactions are included in the analytics, users will see their actual available balance rather than just the formal account balance.
  • If auto-categorization and cash flow forecasting are added, users will be able not only to analyze the past but also to plan for the future.
  • If visual clutter is eliminated and the interface is simplified, financial data becomes easier to interpret — cluttered charts hinder rather than help.

Prototyping

Paper Wireframes
Low-Fidelity Prototype

User Flow Diagram

Challenges & Solutions

No simple income/expense summary
Problem
To understand income and expenses over a period, users have to manually scroll through transactions or decipher complex charts. Even PFM tools often fail to show clear bottom-line figures.
Solution
The Money Flow block sits right on the main screen — three key numbers: Total In, Total Out, and Net Cash Flow. No extra steps required.
Income and expenses are on separate screens
Problem
Users have to switch between sections or use a separate service just to compare income and expenses for the same period.
Solution
A single analysis screen brings everything together in one place — income, expenses, and period comparison. Fewer switches, less cognitive load.
No breakdown of income and expenses by category
Problem
The total amounts are visible, but it’s unclear where the money actually goes — which categories take up the most, and how spending behavior changes over time.
Solution
AI-powered screens — Income, Expense, and Subscription Monitor — with auto-categorization. Transactions are automatically sorted into categories like Shopping, Food & Dining, Bills & Subs, Salary, and others.
Limited date range selection
Problem
Only fixed periods are available — "this month," "last 30 days." Custom ranges can't be set, so scenarios like "since the last payday" aren't an option.
Solution
Smart presets + flexible calendar. Ready-to-use scenarios like Since Last Pay, This Quarter, Year to Date — or any custom range.
Numbers without context
Problem
The app shows the data but doesn't explain what to do with it — users are left to draw their own conclusions.
Solution
AI Insights — personalized, plain‑language summaries that explain what’s changed."Profit increased by 30% compared to the previous month."
Cluttered interface
Problem
Complex charts, too many tabs, and feature overload — even simple tasks take more effort than they should
Solution
Interface built on a "key info first" principle: large key metrics, clear hierarchy, minimal clutter. Details are available on demand, not forced upfront
Pending transactions are excluded from analytics
Problem
Pending transactions are ignored — users see an incomplete balance and can't get a true picture of their financial situation.
Solution
Pending transactions are included in all analytics and marked with a dedicated icon — visible both in the list and on charts. The financial picture is complete and transparent.

Design System

I developed a custom design system with tokens for colors, spacing, and corner radii, along with a library of reusable components. A unified token system ensured visual consistency across all screens, simplified updates, and sped up the workflow — any change to a token applies automatically everywhere.

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

Project screens

Money Flow & Income
Expense
Subscription Monitor
Open to collaboration!
Milana Sablakova