🎨 UX Design Directions

Personal Finance App · Primer CSS · Desktop
Direction A: Sidebar + 2-Column Grid ✓ Recommended Persistent left nav · 2-column dashboard · Balanced density

Layout

  • 240px persistent sidebar
  • 2-column widget grid
  • Budget Burn full-width (top)
  • Max content width 1200px

Best for

  • Fast 5-second dashboard scan
  • Clear two-column hierarchy
  • Akeneo/Atlassian familiarity
  • Balanced information density

Trade-offs

  • Sidebar uses ~20% of width
  • Requires min ~1100px wide
  • Debt milestone may feel constrained
Dashboard
Transactions
First-Run State
💰 Finance
Overview
📊 Dashboard 📋 Transactions 🎯 Budgets
Planning
📅 Bills & Debts 📉 Paydown Planner 👁️ Paydown Monitor
Phase 2
📥 Import Statements
Phase 3
📈 Analytics 🔍 Subscriptions
⚙️ Settings 💾 Backup
Dashboard
May 2026 · 27 days in
⚠️ You're 12 days behind your Avalanche paydown plan. View Paydown Monitor →
Budget Burn — May 2026 View all →
Groceries$312 / $400
Dining$487 / $350 +39%
Transportation$198 / $300
Entertainment$162 / $200
Subscriptions$87 / $100
Last transaction: 2 hours ago
Upcoming Bills View all →
Rent $1,850 Overdue 2d
Chase Sapphire $847 Due in 3d
Electric $94 In 8 days
Internet $65 In 14 days
Debt Paydown — Avalanche Plan Monitor →
Nov 2028
⚠ 12 days behind plan (was Oct 2028)
Today
Kohls
Mar '27
Discover
Aug '27
Chase
Nov '28
Balances last updated: May 1, 2026
Recent Transactions View all →
May 26 Whole Foods Market Groceries -$67.43
May 25 Netflix Subscriptions -$15.99
May 25 Chipotle Dining -$18.75
May 24 Shell Gas Station Transportation -$54.20
May 24 Paycheck Deposit Income +$3,200
Monthly Spending Summary Analytics →
This month (May)
$2,847
↑ $312 vs April
Prior month (April)
$2,535
3-month average
$2,690
Days remaining
4 days
Projected: ~$3,060
💰 Finance
Overview
📊 Dashboard 📋 Transactions 🎯 Budgets
Planning
📅 Bills & Debts 📉 Paydown Planner
Transactions
1,247 transactions · May 2024 – May 2026
Date ↕ Merchant Category Account Amount ↕
May 26 Whole Foods Market Groceries Chase Sapphire -$67.43 Edit
May 25 Netflix Subscriptions Discover -$15.99 Edit
May 24 Paycheck Deposit Income DCU Checking +$3,200.00 Edit
May 24 Shell Gas Station Transportation Chase Sapphire -$54.20 Edit
May 23 Chipotle Mexican Grill Dining Chase Sapphire -$18.75 Edit
Showing 1–50 of 1,247
💰 Finance
Overview
📊 Dashboard 📋 Transactions 🎯 Budgets
Dashboard
Welcome to Finance
👋 Welcome! Let's get your finances set up. Start by adding your first transaction or importing a statement.
Budget Burn
🎯
No budgets set yet
Set up category budgets to see your monthly burn rate here.
Upcoming Bills
📅
No bills added
Add recurring bills to track what's due.
Debt Paydown
📉
No active plan
Add your credit cards and run a paydown comparison.
Recent Transactions
➕
No transactions yet
Add your first transaction to get started.
Direction B: Sidebar + Feature-Forward Dashboard Larger, taller widgets · Prominent hero numbers · More vertical scroll · Less info-at-a-glance

Layout

  • 240px sidebar (same)
  • Taller, single-focus widgets
  • Hero numbers very prominent
  • More vertical scrolling

Best for

  • Strong visual hierarchy per widget
  • More breathing room per data point
  • High emphasis on debt payoff date

Trade-offs

  • 5-second scan broken by scroll
  • Less data visible above fold
  • Feels less compact/efficient
Dashboard
💰 Finance
📊 Dashboard 📋 Transactions 🎯 Budgets 📅 Bills & Debts 📉 Paydown Planner 📥 Import 📈 Analytics ⚙️ Settings
Dashboard
May 2026
Debt-Free DateMonitor →
Nov 2028
⚠ 12 days behind plan — adjust payments
Today
Kohls
Mar '27
Discover
Aug '27
Chase
Nov '28
Monthly SpendingAnalytics →
$2,847
↑ $312 vs April · Projected $3,060
April
$2,535
3-mo avg
$2,690
Budget Burn — May 2026Manage budgets →
Groceries$312 / $400
Dining$487 / $350
Transportation$198 / $300
Entertainment$162 / $200
Upcoming BillsView all →
Rent$1,850Overdue
Chase Sapphire$8473 days
Electric$948 days
Recent TransactionsView all →
May 26Whole Foods-$67.43
May 25Netflix-$15.99
May 24Paycheck+$3,200
Direction C: Compact Icon Sidebar + 3-Column Grid 56px icon-only sidebar · Maximum content width · 3-column dashboard · Most information above fold

Layout

  • 56px icon-only sidebar
  • 3-column widget grid
  • Maximum horizontal space
  • Most info visible at once

Best for

  • Dense information scanning
  • Wide monitor usage
  • Power-user efficiency
  • Minimal nav distraction

Trade-offs

  • No nav labels visible
  • Requires learning icon meanings
  • 3 columns may feel cramped on smaller screens
Dashboard
💰 Finance
📊
📋
🎯
📅
📉
📥
📈
⚙️
Dashboard
May 2026 · 27 days in
⚠️ 12 days behind Avalanche plan · View Monitor →
Budget Burn — May 2026View →
Groceries$312/$400
Dining$487/$350
Transport$198/$300
Entertainment$162/$200
Subscriptions$87/$100
Debt PaydownMonitor →
Nov 2028
⚠ 12 days behind plan
Now
Kohls
Mar '27
Chase
Nov '28
Upcoming BillsView →
Rent$1,850Overdue
Chase Sapphire$8473 days
Electric$948 days
Internet$6514 days
Monthly SummaryAnalytics →
$2,847
↑ $312 vs April
April
$2,535
3-mo avg
$2,690
Recent TransactionsView all →
May 26Whole Foods MarketGroceries-$67.43
May 25NetflixSubscriptions-$15.99
May 25ChipotleDining-$18.75
May 24Shell Gas StationTransportation-$54.20
May 24Paycheck DepositIncome+$3,200