Spendly

Dual currency as a first-class idea, not a setting.

Every amount had to carry its own currency, and one tap had to convert the entire app, so a number is never ambiguous.

Calm enough to open every day.

Personal finance is stressful. A loud, red-and-green, spreadsheet-dense interface makes you avoid it. The design had to lower the temperature, not raise it.

Forward-looking, not just a ledger.

Recording the past is table stakes. The harder, more useful job is helping someone decide what to do next.

Currency is a first-class citizen.

Every amount carries its own currency, and a single tap converts the whole app between LKR and USD at a live rate. Where a transaction's native currency differs from the display one, both show. Nothing is ever left for the user to calculate.

Calm over busy.

A muted, low-saturation palette. Generous space. No traffic-light overload. The numbers are the hero and the interface gets out of their way. This is the core feeling, and every visual choice serves it.

Privacy you can see, not just a backend promise.

A hide-balances toggle sits in the header at all times, so the app is usable in public without shoulder-surfing risk. The privacy message appears before you even log in. For sensitive money data, trust has to be visible in the UI.

Plan, don't just record.

Beyond the ledger, the product helps you decide: a “What if?” simulator with two sliders showing the real effect of cutting spending or paying down debt, an avalanche-vs-snowball debt comparison with a real payoff date, and per-goal contribution math. All computed live, no placeholder text.

Empty states as a real first-run surface.

Every panel has a purpose-written empty state with a clear next action, never a blank box or leftover demo data. The first five minutes of a new account were designed, not left to chance.

Mobile first, for real.

Bottom tab bar, floating add button, full-width sheets on phones. The desktop sidebar is the enhancement, not the starting point. It's built to live on a home screen as an installed app.

Modals opening off-screen on iPhone.

Add-transaction sheets sometimes rendered below the visible screen on iOS Safari when the page was scrolled. I traced it to a CSS animation on a page wrapper creating an unintended positioning context. Fixed by portaling every sheet to the document body and locking the background scroll, then restoring the exact scroll position on close. Verified with real before-and-after measurements, not just eyeballing it.

An auto-calculated amount that felt presumptuous.

The savings-goal card first offered a single “add this month's amount” button with a number I calculated for the user. It felt like the app telling them what they saved. I replaced it with a small field where they enter what they actually put away. A tiny change that respects the user's real financial life instead of guessing at it.

Demo data bleeding into real accounts.

New sign-ups were landing on pre-filled example transactions instead of a clean slate. I gave every new account a genuinely empty start and built the empty states so “nothing here yet” reads as intentional, never broken.

Native form fields that felt inconsistent.

Date and dropdown fields leaned on each browser's default chrome, which on iOS has no visible icon and an unreliable tap target. I rebuilt them as custom fields with a consistent icon and a tap-anywhere handler. Small fix, meaningfully better felt-quality on mobile.

Color.

Light and dark, both hand-tuned rather than auto-inverted, so mood and contrast hold in each. A restrained green brand accent, with amber and red reserved for genuine caution and danger, never decoration. Driven entirely by CSS variables swapped on a theme attribute, one component tree, no duplicated markup.

Type.

Geist for UI, Geist Mono for numbers, so figures line up cleanly in a tabular context. Tight letter-spacing on large numbers for a confident, number-forward feel.

Icons.

Lucide throughout, one stroke weight, no mixed families. Icons carry meaning (up-right for expense, down-left for income) rather than decorating.

Shape, depth, motion.

A clear small-medium-large radius rhythm, soft low-opacity shadows for depth without harshness, and deliberately minimal motion that collapses to near-zero when a user asks for reduced motion.