Personal finance experience

Budgetary

A mobile budgeting experience focused on making spending behavior, account activity, and monthly planning easier to understand at a glance. The design aims to reduce financial uncertainty by giving users clearer visibility into what they have spent, what they have left, and what needs attention next.

Role UI/UX Designer

Focus Budgeting & transaction awareness

Scope Onboarding to daily money tracking

Deliverables Research, IA, wireframes, final UI

Back to projects Jump to final screens

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

The design response

The design focused on creating a lighter content rhythm, stronger account and category hierarchy, and clearer budget status views so users could understand where they stand financially without having to decode the interface.

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

Process

From financial behaviors to a more supportive mobile flow

The design process moved from user understanding into structural planning, then into wireframes and refined screens. Each stage focused on reducing ambiguity and making financial actions feel easier to complete on a small screen.

Research and framing

Explored budgeting pain points, spending visibility, and the moments when users lose track of day-to-day financial activity.

Information structure

Organized onboarding, account setup, transaction entry, and budget review into a sequence that felt coherent and easy to follow.

Wireframe exploration

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

Interface refinement

Built a clearer visual system around legibility, budget status cues, and more consistent patterns across core screens.

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, and financial reassurance.

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 — 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, and recurring money management formed one connected experience. This stage clarified how users would move from setup into everyday tracking without losing context.

User flow for onboarding and account setup.

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, and transaction flow 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.

Early home layout.

Low-fidelity budgeting screen.

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.

Mid-fidelity home refinement.

Mid-fidelity transaction layout.

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, and transaction tracking. The interface uses a brighter system, stronger hierarchy, and clearer financial grouping to make day-to-day money management feel more usable and less intimidating.

Onboarding sequence.

Account creation screen.

Home dashboard and budgets.

Transaction entry flow.

Budget category view.

Budget detail screen.

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.

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.