Personal finance experience

Budgetary

A mobile personal finance experience focused on making spending behavior, account activity, budget health, and short-term planning easier to understand at a glance. The product direction emphasizes financial clarity, transaction visibility, category control, and decision support so users can understand what they have spent, what they have left, and what needs attention next without feeling overwhelmed by the interface.

Role Product UX, Interaction Design, Visual Design
Focus Budgeting, transaction awareness, planning, and financial decision support
Scope Onboarding to daily money tracking
Deliverables Research, IA, personas, flows, wireframes, and final UI
Overview

Designing a budgeting experience that feels readable, calm, and actionable.

Budgetary is a mobile finance experience centered on everyday money awareness. The design focuses on helping users understand current balances, record spending quickly, and compare real activity against planned budgets without making financial management feel dense or intimidating.

The challenge

Budgeting tools often overwhelm users with dense tables, unclear category views, disconnected account information, and too much financial detail at once. When that happens, the experience stops feeling supportive and starts feeling like work, which makes consistent usage less likely. In finance products, that friction is especially harmful because users depend on trust, accuracy, and quick comprehension to make daily money decisions confidently.

The design response

The design focused on creating a lighter content rhythm, stronger account and category hierarchy, clearer budget status views, and more explicit action cues so users could understand where they stand financially without having to decode the interface. The goal was to make the product feel dependable enough for real financial tracking while staying approachable for daily use.

Design goals

What success looked like for the experience

The product needed to feel financially informative without becoming visually heavy. Success depended on making budgeting easier to scan, helping users act on recent spending, strengthening account and category awareness, and creating a clearer link between planning and day-to-day transaction behavior.

Clearer Balances, categories, and budget progress should be understandable within seconds.
Faster Transaction entry and review should support quick everyday financial check-ins.
Calmer Content density should stay controlled so financial information feels manageable.
More useful Budget views should help users understand not just totals, but what needs action next.
Feature framework

Core finance features defined for everyday money management

  • Account overview — consolidated balances, account grouping, and quick visibility into available funds
  • Budget tracking — category-based budgeting with clear progress, remaining balance, and overspend awareness
  • Transaction management — recent activity review, transaction entry, editing, and better readability across daily spending
  • Category intelligence — clear spending categories to help users understand where money is going
  • Financial status cues — warnings, progress indicators, and action prompts that help users notice what needs attention next
  • Onboarding and account setup — guided entry into the product with lower friction for first-time users
Expansion opportunities

Detailed features that strengthen the finance product direction

  • Recurring bills and subscriptions — visibility into upcoming obligations and repeating expenses
  • Savings goals — structured progress for short- and long-term financial targets
  • Cash-flow forecasting — forward-looking views of expected inflow and outflow
  • Smart categorization — intelligent transaction tagging to reduce manual effort
  • Alerts and anomaly detection — identify unusual spending, low remaining budget, or missed financial activity
  • Personalization and AI support — adaptive insights, smarter recommendations, and behavior-driven prompts for better financial decisions
Process

From financial behaviors to a more supportive mobile flow

The design process moved from user understanding into structural planning, feature definition, and wireframe exploration before refined screens were created. Each stage focused on reducing ambiguity, strengthening trust, and making financial actions feel easier to complete on a small screen.

01

Research and framing

Explored budgeting pain points, spending visibility, category control, and the moments when users lose track of day-to-day financial activity. This stage also shaped which finance features needed to be more explicit, such as transaction review, budget progress, alerts, and account summaries.

02

Information structure

Organized onboarding, account setup, transaction entry, budget review, category tracking, and financial-status summaries into a sequence that felt coherent and easy to follow.

03

Wireframe exploration

Tested layout density, dashboard hierarchy, and how categories, balances, and transaction lists should share space.

04

Interface refinement

Built a clearer visual system around legibility, budget status cues, transaction readability, feature consistency, and clearer financial signals across core screens.

Finance product rationale

Designing for trust, clarity, and actionability

Finance products carry a higher trust burden than many other consumer apps. Users are not only browsing content — they are checking balances, making judgments about spending, and using the interface to understand their financial condition. That means the experience must feel stable, readable, and accurate.

  • Financial information must be scannable within seconds
  • Category and transaction views must support action, not just display data
  • Budget status needs to feel understandable without requiring effortful interpretation
  • The interface must reduce anxiety rather than amplify it
Detailed product capabilities

What makes the experience more complete

To make the case study stronger and more aligned with modern finance expectations, the product was framed not just as a budgeting interface, but as a more complete financial-awareness system that can scale into broader personal finance support.

  • Balance overview and linked account visibility
  • Budget creation and category-level progress tracking
  • Transaction history, filtering, and quick add flow
  • Monthly planning and ongoing financial-status review
  • Bill reminders, savings goals, and financial alerts
  • AI-assisted insights for smarter money decisions over time
User understanding

Two financial mindsets shaped the experience

The product needed to support both users under household expense pressure and users seeking more structured monthly control. Designing for both helped balance simplicity, planning, financial reassurance, and the different ways users think about daily transactions versus monthly goals.

Jacob persona board for Budgetary

Jacob — household budget manager

Jacob represents users who need quick awareness of everyday spending and stronger control over family expenses. He benefits from clear budget status, transaction visibility, and category views that make overspending easier to catch early.

Expense pressure Family budgeting Needs quick clarity
Samantha persona board for Budgetary

Samantha — planning-focused tracker

Samantha represents users who want a cleaner overview of where their money is going and how monthly plans are progressing. She values clearer category management, smoother planning flows, and a finance experience that supports confidence rather than stress.

Monthly planning Budget control Goal visibility
Flows and architecture

Reducing friction before moving into final screens

Flows and sitemap work helped make sure onboarding, account creation, budget setup, transaction review, category oversight, and recurring money management formed one connected experience. This stage clarified how users would move from setup into everyday tracking without losing context or missing key financial signals.

Budgetary user flow
User flow for onboarding and account setup.
Budgetary sitemap
Sitemap showing the product structure.

Entry clarity

New users need an easy path from onboarding into account setup and first-use actions without feeling blocked by complexity.

Budget awareness

Budget planning and transaction review need to stay connected so users can understand how daily choices affect monthly goals.

Actionable hierarchy

The most important financial signals should rise to the top, helping users notice balances, category status, and recent activity faster.

Wireframes

Testing structure before visual polish

Wireframes were used to test information density, dashboard rhythm, category clarity, transaction flow, and financial-priority cues before moving into final UI. The goal was to make financial content easier to scan while keeping the experience approachable for regular everyday use.

Key design validations

  • How the home dashboard could prioritize balances, budgets, and recent spending without feeling crowded.
  • How budgeting screens could make category planning feel structured and easy to compare.
  • How transaction-related screens could support quick updates while keeping financial information readable.
Low-fidelity wireframes

Early layout and budgeting structure

Early sketches focused on the home view and core budgeting layouts, helping define what information should appear first and how users would move into more detailed financial actions.

Mid-fidelity wireframes

Refining hierarchy and transaction flow

Mid-fidelity screens refined dashboard structure, transaction visibility, and screen-level hierarchy so the product felt more organized before final visual design decisions were applied.

Final UI

A clearer finance interface built around visibility, progress, and routine use

The final screens bring more visual order to onboarding, account setup, budgeting, transaction tracking, and status review. The interface uses a brighter system, stronger hierarchy, clearer financial grouping, and more explicit progress cues to make day-to-day money management feel more usable, dependable, and less intimidating.

Budgetary onboarding 1
Onboarding sequence.
Budgetary create account
Account creation screen.
Budgetary login
Login view.
Budgetary home
Home dashboard and budgets.
Add transaction
Transaction entry flow.
Budget categories
Budget category view.
Budget details
Budget detail screen.
Transactions history
Transaction tracking screen.
Outcome

Design outcomes

The final experience improves financial visibility, strengthens budget awareness, and supports more confident day-to-day money decisions across the mobile journey. It also creates a stronger foundation for future finance capabilities such as alerts, bill tracking, savings goals, and smarter transaction categorization.

Clearer budget awareness

Improved visibility into balances, categories, and budget progress so users can understand financial status faster.

Faster transaction understanding

Organized transaction entry and review around clearer hierarchy, helping users read and record activity with less friction.

More supportive everyday use

Reduced interface density and strengthened content grouping so routine financial management feels more approachable and useful.