Offline Budget Tool

Overview

Most budgeting apps require linking bank accounts through third-party services, creating a trust problem before the user even starts. For someone already overwhelmed by finances, handing credentials to an app they don't fully understand is a non-starter. The ones that don't require linking tend to be manual-entry tools that demand too much effort, or spreadsheets that offer no guidance.

The result is a tool that runs entirely in the browser with no server, no account, and no data leaving the device. Users import bank CSVs, categorize transactions with smart auto-suggestions, set budget targets, and track trends over time — all stored in localStorage on their machine. Balance snapshots let users periodically confirm their account totals against the computed values, catching discrepancies and building trust in the tool's accuracy.

Understanding Users

This tool was born from my own frustration. I used to budget with a spreadsheet I maintained by hand — downloading CSVs from multiple bank accounts, copying rows into tabs, categorizing each transaction, and manually calculating totals. It worked, but it was tedious enough that I'd put it off for weeks, then face a backlog of hundreds of transactions. I needed a tool that did the repetitive parts for me while still letting me verify every number myself.

The people who would benefit most from a tool like this share a few common traits:

Design Process

Visual Design

The warm, muted palette — olive green for income, muted rose for expenses — was chosen to reduce the anxiety that comes with financial dashboards. Colors, widgets, and icons in budgeting apps can be overstimulating. This tool uses softer tones that convey information without judgment. The clean, warm-toned background and generous whitespace make the interface feel calm rather than clinical.

Information Architecture

The app is organized around five primary tabs — Review, Summary, Trends, Balances, and Settings — each with a single, focused purpose. This flat navigation means every feature is one click away. No nested menus, no hidden panels, no "more options" drawers. The most important actions (importing transactions, reviewing spending) come first in the tab order.

One Task Per Screen

The core design choice is limiting how much a user has to process on each screen. Each tab answers one question: Review asks "what did I spend?" Summary asks "am I on budget?" Trends asks "what are the patterns?" Balances asks "are the numbers right?" Settings asks "how do I want this to work?" By isolating these tasks, the user always has a clear path to complete what they came to do without being distracted by unrelated information.

Features

All screenshots below use generated demo data — no real financial information is shown.

Transaction Review

The Review tab is the app's home base. Users import bank CSVs and categorize transactions one by one or in bulk. Each row shows date, description, account, amount, and a category dropdown. An auto-categorize feature handles repeat merchants, and a progress bar shows how many transactions have been reviewed — turning a tedious task into a completable one.

Monthly Summary

The Summary tab breaks spending into variable and fixed expenses with budget targets. Progress bars show spending against each category's limit. Fixed expenses (rent, subscriptions) are separated from variable spending so users can see what they control. The subscription breakdown itemizes recurring charges so nothing hides in a lump sum.

Trends

The Trends tab offers three views: Income vs Spending (bar chart comparing monthly totals), Category Breakdown (stacked bar showing where money goes), and Account Balances (line chart tracking liquid assets over time). Time range filters let users zoom in on any period. This is where the budgeting story emerges — patterns that are invisible in transaction lists become clear in visual form.

Balances

The Balances tab is where trust in the tool gets built. Users log balance snapshots — their actual account totals on a given date — and the app computes current balances by adding or subtracting all imported transactions since that snapshot. This lets users periodically verify that the tool's numbers match reality, catching missed imports or duplicate entries before they compound.

Settings & Data Management

Users own their data completely. The Settings tab lets them customize expense categories (add, rename, delete), manage subscriptions, set budget targets, and — critically — export and import full JSON backups. The "Clear All Data" action is separated and styled as a destructive action. Data never leaves the browser unless the user explicitly exports it.

Accessibility

Financial tools that exclude users with disabilities exclude people who may need them most. Budgeting anxiety is already a barrier — inaccessible UI should never be another one. An honest audit of the tool revealed six concrete gaps. Rather than claim compliance I hadn't earned, I treated each gap as a design task and fixed them.

What the Audit Found — and What I Fixed

Before & After

The Income vs Expenses chart originally used olive green and muted rose — colors that are difficult to distinguish for users with protanopia or deuteranopia. The updated palette uses teal and wine, which maintain clear separation across all common types of color vision deficiency.

The Settings page previously relied on low-contrast placeholder text and lacked visible labels on many inputs. After the update, all form inputs have proper labels, category names use higher-contrast text, and the overall hierarchy is clearer.

Remaining Work

• Recharts elements themselves are not keyboard-navigable (library limitation) — the sr-only data tables serve as the workaround
• No hands-on screen reader testing (NVDA, JAWS, VoiceOver) has been conducted yet

Outcomes

This is not a prototype — it's a working tool I use to manage my own finances. It has processed over 1,300 real transactions across multiple bank accounts, and it replaced the spreadsheet I maintained for years.

What I Learned

Using this tool every day changed how I think about design. Every friction point I hit while categorizing my own transactions became a feature — the auto-categorize function, the "mark all categorized as reviewed" shortcut, the progress bar that turns a chore into a completable task. Being both the designer and the daily user means nothing stays broken for long.

The biggest technical surprise was how capable localStorage is as a persistence layer. With JSON export/import for backup and careful data structure design, it handles over a thousand transactions without performance issues — no server, no database, no accounts. The biggest design lesson was about honesty: I initially assumed my high-contrast, minimal layouts meant the tool was fully accessible. A real audit revealed six concrete gaps — secondary text contrast, colorblind-unsafe colors, missing labels, inaccessible charts, broken keyboard patterns, and no screen reader support. Treating each gap as a design task and fixing them taught me more about accessibility than any checklist ever could.

Next Steps