Skip to main content
UI Coach Logo
Intermediate

Personal Finance Dashboard

Design a calm financial overview that connects spending, upcoming obligations, savings progress, and account health to useful next steps.

Responsive web, Mobile2 to 4 hours

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

  1. 01

    Jordan opens the dashboard and sees that one linked account is still syncing

  2. 02

    They compare dining spending with their usual monthly range

  3. 03

    A large pending restaurant charge is opened and identified as a temporary authorization

  4. 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

A linked account stops syncing
A refund changes a completed category total
Several bills fall on the same day
The user has no prior month for comparison
A transaction is recorded in another currency

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

Add a payday scenario comparison
Create a privacy mode that masks amounts in shared spaces

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
RalewayOpen Sans

Raleway & Open Sans

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Advanced
Fintech

First Stock Order Ticket

Design a stock trading flow that helps a new investor place and monitor one transparent market or limit order.

Responsive web4 hours plus
Information HierarchyData Visualization
Advanced
Fintech

Guided Portfolio Rebalance

Design an investment review that proposes a diversified rebalance and requires informed approval before any order.

Responsive web4 hours plus
Data VisualizationTrust and Safety
Advanced
Fintech

Investment Portfolio Risk Explanation

Design a portfolio view that explains concentration, volatility, time horizon, and scenario uncertainty without giving personal investment advice.

Responsive web2 to 4 hours
Data VisualizationContent Design
Intermediate
Fintech

Shared Bills and Household Payments

Design a bill workspace that tracks household costs, splits responsibility, and makes upcoming payments clear to roommates.

Mobile2 to 4 hours
Data VisualizationInformation Hierarchy
Intermediate
Fintech

Subscription Renewal Control

Design a subscription dashboard that reveals upcoming charges, price changes, and cancellation steps before money leaves an account.

Mobile2 to 4 hours
Data VisualizationInformation Hierarchy
Advanced
Fintech

Freelancer Tax Estimate Workspace

Design a tax preparation dashboard that organizes income and expenses, explains estimates, and highlights records needing review.

Desktop web4 hours plus
Dashboard DesignData Visualization