Bill Tracker
A 6-year-old Excel spreadsheet was hitting its limits managing 25+ recurring bills — but the client couldn't lose the workflow they'd relied on for years.
25-30
Recurring bills managed
6 years
Of spreadsheet data replaced
7
Interactive wireframes
The Problem
The client managed approximately 25-30 recurring bills using a sophisticated spreadsheet system they'd built over six years — bills as rows, months as columns, bi-weekly pay period tracking below the grid. The system worked, but manual data entry was increasingly error-prone, there was no way to do "practice runs" before committing payments, and the credit card payment logic (where a credit card payment doesn't reduce available cash until the card bill is paid) was impossible to model correctly in a spreadsheet. They needed a real application, but couldn't afford to lose the mental model they'd been using successfully for years.
The Solution
An application designed to preserve the familiar spreadsheet mental model while adding capabilities Excel couldn't provide. The key innovation is a "Draft Mode" that lets the client do practice payment runs with real-time "Money Left" calculations before committing anything — eliminating the fear of making mistakes. A dual-tracking system for credit card payments properly models how credit spending affects available cash (bank payments decrease Money Left immediately, credit card payments don't until the card bill itself is paid). A dedicated "Legacy View" mirrors the exact spreadsheet layout with the same color coding to ease the transition.
Key Features
Real-Time Money Left Calculator
The hero feature — a live running total that updates instantly as payment amounts are entered, factoring in payment method to show true available cash.
Draft Mode
Practice payment runs in a separate draft state with real-time calculations before committing changes — eliminating the fear of making mistakes.
Credit Card Payment Logic
Dual-tracking system where bank/cash payments decrease Money Left immediately, but credit card payments only affect cash when the card bill itself is paid.
Legacy View
A view that mirrors the exact spreadsheet layout with the same color coding (Paid=mint, Unpaid=yellow, Overdue=red) for a familiar transition.
Undo Toast System
A 5-second undo window after marking bills as paid, providing a safety net for accidental clicks.
Results & Impact
- Complete planning, wireframing, and design system delivered — 7 interactive wireframe files built in React/JSX that serve as a testable prototype.
- Credit card dual-tracking system properly models how credit spending affects available cash — something the spreadsheet couldn't do.
- Draft Mode gives the client confidence to experiment with payment scenarios before committing, replacing the anxiety of working directly in the live spreadsheet.
- Legacy View preserves the familiar spreadsheet mental model, building trust in the new system by meeting the client where they already are.