Personal Finance Dashboard
Design a calm financial overview that connects spending, upcoming obligations, savings progress, and account health to useful next steps.
The brief
Understand the problem
Background
People often manage money across several accounts, but transaction feeds alone do not explain whether this month's spending is sustainable. A useful dashboard should surface meaningful change without making every fluctuation feel urgent.
User context
Jordan is paid twice a month, uses two current accounts, and is saving for a rental deposit. They check finances on Sunday evenings and need to know what is safe to spend before the next payday.
Product problem
Jordan needs one trustworthy view of current cash, scheduled bills, category changes, and savings progress while account data may arrive late or remain pending.
Objective
Create an overview and investigation flow that helps Jordan understand their position, verify unusual activity, and choose one sensible action.
What to design
Define the experience
Required experience
- Review available cash and data freshness
- Understand upcoming bills before the next payday
- Inspect a category change and its contributing transactions
- Adjust a savings contribution after reviewing the impact
Screens and states
- Financial overview
- Spending category detail
- Transaction search and detail
- Savings contribution review
Core user flow
Follow the critical path
- 01
Jordan opens the dashboard and sees that one linked account is still syncing
- 02
They compare dining spending with their usual monthly range
- 03
A large pending restaurant charge is opened and identified as a temporary authorization
- 04
Jordan lowers this week's savings transfer and confirms the revised projection
Product rules
Requirements and constraints
Requirements
- Separate current, pending, and projected amounts
- Show when each linked account last updated
- Explain category totals through accessible charts and transaction lists
- Prioritize upcoming obligations before discretionary spending
- Protect account details and sensitive actions behind appropriate verification
Constraints
- The product cannot promise future balances or provide individualized financial advice
- Aggregated account data may be delayed by several hours
- Color cannot be the only indicator of positive, negative, or unusual movement
Reality check
States worth considering
Ready-to-use content
Mock data
Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.
Account snapshot
- Everyday account: $2,840 available
- Bills account: $1,120 available
- Credit balance: $630 owed
- Savings goal: $7,400 of $12,000
Upcoming obligations
- Rent: $1,480 on 1 September
- Energy: estimated $96 on 3 September
- Phone: $42 on 4 September
Finish line
What to deliver
- Four responsive screens covering overview, investigation, and a savings adjustment
- Annotations explaining data freshness, pending money, and chart accessibility
If you want more
Optional extensions
Optional direction
Visual resources
Use these as a starting constraint if you want one. They are not part of the required solution.
Theory to review
UX principles for this brief
Use these as decision lenses, then validate the design with the people and context in the brief.
principleLaw of ProximityElements placed nearer one another tend to be perceived as related, especially when the spacing pattern is consistent and other cues do not override it.
principleProximity Compatibility PrincipleInformation that must be mentally integrated often benefits from perceptual proximity, while information needing separate treatment may benefit from separation.