Building a
personal finance
system

A monthly financial process lived entirely in a spreadsheet — accurate, but slow to check and easy to enter wrong on a phone.

The brief (self-set) was a tool that could read the live position at a glance and write to it safely, without turning the spreadsheet into two sources of truth.

Before any UI work, the spreadsheet’s row layout had to be treated as an API. Two read paths and one write path all address it by position — so the write path was designed to refuse rather than guess when a row label doesn’t match what’s expected, while the read paths fall back and carry on.

A wrong figure on screen is recoverable; a wrong write into the financial record isn’t — the interface design follows from that asymmetry.

The core interaction — logging a transaction — is a bottom sheet, built and tuned specifically for one-handed iOS use.

Iteration included fixing an input auto-zoom bug (Safari zooms on any text input under 16px on focus), and testing a card-boxed vs. borderless treatment for the entry fields directly against the live layout before committing to one.

Visual bugs were diagnosed against rendered output, not the CSS on paper — one Ledger styling bug traced to a specificity collision between a generic selector and a scoped one, confirmed by sampling pixel colour values from a headless-Chrome render rather than by eye.

The same discipline applies to every deploy: a cheap label-guard endpoint checks that every mapped row still resolves before a change ships.

The spreadsheet stayed the financial record. What changed is everything around it: how it is read, how it is written to, and what happens when the two disagree.