A Budgeting App Built Around How We Actually Budget
We pay for a budgeting app, and I wanted to see if I could build one that matched how we actually budget. Every month, we look at our income, spending, and allocate any excess toward specific goals. That's the core loop, and most budgeting apps bury it under transaction categorization and strategies we never asked for.
Learning to Scope Down
Initially I wanted it to do everything: full account integrations with Fidelity, Plaid, and bank APIs for automatic transaction pulling. I quickly learned those integrations require significant backend infrastructure, security compliance, and ongoing maintenance that would consume all the time I wanted to spend on design.
So I cut the scope down to the big-picture budget numbers instead of individual transactions. Everything is tracked manually: account balances, income, expenses. No financial data gets pulled through third-party integrations, and honestly that constraint made the whole app clearer. It only has to answer two questions: where's your money going, and are you hitting your goals.
How It Works Month to Month
Each month, we walk through a guided flow: review our income, check our spending categories, see what's left over, and allocate excess toward goals. It mirrors how we actually sit down and budget together.
Every goal and account has projection modeling built in. We can forecast our savings rate for a house down payment, or see when a car loan will be paid off based on our current allocation, as a visual timeline that shows progress and motivates consistency.
Visual Language
The design uses a light, airy palette with soft blue gradients. The net worth view is the hero screen, showing our overall financial picture with a trend line and account breakdown below. I explored multiple directions for displaying financial data without it feeling like a spreadsheet: large type for key numbers, subtle charts for trends, clean card layouts for individual accounts.
The app has full iPhone and iPad support, with the larger screen real estate on iPad allowing side-by-side views of goals and budget status. Navigation uses a tab bar with Home, Goals, Budget, Accounts, and Settings, each one mapping to how we actually think about our own money.
The net worth number uses large, bold type with cents rendered in a smaller weight. Account balances use red for debt and muted tones for labels, and percentage changes are sized and colored so you can glance at your phone and immediately know where you stand. I chose soft blues and generous white space specifically because money is stressful: the wave gradient behind the net worth chart guides you down the screen and makes opening the app feel like checking in on progress, not confronting a spreadsheet.
Designed in Figma, Built with AI
Like all my side projects, Orchid Finance was designed in Figma and developed using Claude Code, in native Swift for iOS. The ability to design a screen, implement it, and test on a real device in the same day fundamentally changes how I approach product design. Decisions that used to be theoretical, like whether a guided monthly flow would actually feel better than a dashboard, become testable within hours.