FINLY

01 — PROBLEM

Budgeting apps often show everything and explain nothing. Balances, charts and categories pile up, but the answer to “am I okay this month?” stays buried. Finly started from that single question: what would a finance screen look like if clarity was the only metric?

02 — APPROACH & PROCESS

One screen, three answers: where I stand, where money went, and whether the goal is on track. Large readable numbers, a single spending breakdown, and one savings progress bar. No gamified streaks, no dense dashboards — hierarchy does the work. Everything shown uses realistic fictional data, clearly treated as a design concept rather than a shipped product.

03 — USER EXPERIENCE

The flow is glance → understand → act. A user opens Finly and immediately sees total balance with a month-over-month note, spend against a subtle budget bar, and a savings goal at 68%. Category rows below explain the spend without requiring a second screen. Touch targets stay generous, contrast stays high, and the layout collapses to a single column on mobile.

04 — INTERFACE & KEY DECISIONS

Cream surfaces, pine text, one gold accent reserved for progress and positive movement. Space Grotesk carries the numbers so balances scan instantly; Inter keeps labels quiet. Two deliberate decisions: the savings goal gets the accent border because it is the emotional core of the screen, and the balance card goes dark pine so the most important number owns the hierarchy.

05 — OUTCOME & TECHNOLOGY

The outcome is a focused concept: a personal finance screen that can be understood in under ten seconds. As a concept, success isn't measured in users or revenue — it's measured in whether the design reasoning holds. Stack: React, TypeScript, Supabase for data, Figma for design exploration.