PRJ-006 · product-uiux
Studio Ledger
Freelance — 3 design studios in Amman & Dubai · Designer-engineer — full build · 2025
An invoicing and cashflow dashboard for small creative studios — dense as a cockpit, calm as a ledger, and fast enough to live in a browser tab all day.
Core Philosophy
Financial tools for creatives usually condescend — soft illustrations, hidden numbers, 'don't worry'. The studios I built this for wanted the opposite: every number visible, every state legible at a glance on a Friday afternoon. The design brief became 'a cockpit that respects you'.
Density without noise is a typography problem. Tabular numerals, a strict 4px baseline grid, and color reserved exclusively for money states (paid, pending, overdue) let the interface hold 40+ data points per screen and still feel quiet.
Outcomes
- 3 studios moved off spreadsheets; ~6 hrs/month saved each
- Median invoice-creation time cut from 9m to 90s
- P95 interaction latency under 80ms across the app
Deliverables
- Multi-currency invoicing app
- Cashflow projection view
- Client portal with payment status
Technical Anatomy
State-driven color system
Color is semantically locked: green is only ever 'money received', amber only 'awaiting', red only 'overdue'. Nothing decorative may use those hues, so peripheral vision becomes a reliable financial instrument.
Optimistic mutations with rollback
Every edit applies instantly against the local cache and reconciles with the server; failures roll back with an inline explanation. The app feels local even on hotel Wi-Fi.
onMutate: async (patch) => {
await queryClient.cancelQueries({ queryKey });
const prev = queryClient.getQueryData(queryKey);
queryClient.setQueryData(queryKey, (old) => merge(old, patch));
return { prev };
},
onError: (_e, _v, ctx) => queryClient.setQueryData(queryKey, ctx.prev),