Te In Roh
All work

Cashflow

A personal finance app I designed and built in two weeks. It shipped on Android and people used it, until the startup that owned it took it off the store.

Type
Personal finance app, Android
Role
Product Designer and front-end developer
Timeline
2 weeks, June 2026, first commit to v1.5
Tools
React, TypeScript, Tailwind CSS, Capacitor, Claude Code
Dashboard. The month ring answers 'am I okay' before anything else.

one bold thing per screen

Transactions. Filters by account, type, and category, grouped by day.
Budgets. Near the limit, a label and icon say it, not only the color.

never color alone

Bills. Marking one paid also records the expense.

bills and ledger agree

Goals. Saved, target, and how many days are left.
Accounts. Net worth on top, the credit card counted against it.

Overview

Cashflow is an offline personal finance app for Android: transactions, budgets, bills, savings goals, and accounts, with a dashboard that pulls them together. I designed and built it for a fintech startup in Bolivia, in English and Spanish, with no backend; everything lives on the phone. It shipped, people used it, and the startup later took it off the store and now hands it out as a direct APK.

Problem

Most budgeting apps either show a wall of charts or nag. People open a money app for a quick answer, am I okay this month, and leave if the answer takes three screens or comes with a scolding. It also had to work offline, in two languages, and with a screen reader.

Process

  1. 01I built the function first: transactions, budgets, bills, goals, the dashboard, settings, and onboarding were working with seeded data in the first two days, before any visual design. The design pass then had real edge cases to solve instead of a happy-path mockup.
  2. 02I wrote the design direction down before styling anything. My first written direction was calm and grounded: pine green and clay, Fraunces and Hanken Grotesk, and a flow band on the dashboard comparing income with spending. Two hours later, before building any of it, I replaced the whole direction with a friendlier one. I wanted the hero to answer whether the month was going to plan, not only show the gap.
  3. 03The dashboard became a month ring: the net in the middle, the ring filled by how much of the planned spending is used, and one plain status line under it, 'On track · $643 left'. The ring turns amber at 75% and coral at 90%. It's the only bold element on the screen.
  4. 04My first color tokens failed contrast on white: income green at 2.55:1, spending coral at 2.89:1, goal honey at 1.95:1. I darkened all three and added separate darker text shades, so amounts read at 5.2:1 or better.
  5. 05I built it for TalkBack: no meaning carried by color alone (a budget near its limit gets a 'Heads up' label and an icon, not just an amber bar), amounts read out with the currency name, privacy mode hides amounts from the screen reader too, and charts have a text version. An automated axe audit of 11 screens and sheets found 14 violations; I fixed all of them, and the final pass had none.
  6. 06After the first tester build, I changed two flows. Marking a bill paid now creates the matching expense, and undoing it removes it, so bills and the ledger can't disagree. Installment purchases now always open to edit first, after the installment badge kept sending taps to the wrong panel.

The dashboard hero, twice

v1: shows the gap, not the plan

v2: am I on track, in one look

Design system

Friendly, but credible: a warm off-white ground (#FFF8F4), white cards, and soft indigo-navy text instead of black. Indigo (#5B6CE0) is the primary action and navigation color. Green and coral carry money in and out, with darker text shades for contrast, and honey marks goals and warnings. Twelve category colors are tuned to one saturation so lists never turn into a rainbow. Titles and the hero number are in Bricolage Grotesque, everything else in Plus Jakarta Sans, and every amount uses tabular figures. Cards round to 20px, controls to 14px.

  • Ground#FFF8F4
  • Ink#2B2F4A
  • Indigo, act#5B6CE0
  • Income text#0E7A4A
  • Spending text#C04030
  • Honey text#8A5D00

Outcome

I shipped v1.5 to Android: onboarding, the dashboard, transactions with filters and installments, budgets, bills, goals, accounts, and settings for theme, language, currency, and privacy mode, in English and Spanish, fully offline, with a clean automated WCAG 2.1 AA audit on the screens it covered. People used it until the startup that owned it pulled the store listing and switched to distributing the APK directly.

Reflection

I chose offline with no backend so a person's money data never leaves their phone, and that choice left the biggest gap in the product: there's no backup. A lost or reset phone takes the whole history with it, and I never designed the export or restore flow that would fix that. It's also the first thing a careful user asks about a money app, and I'd design it before adding any new feature.