Four calculators, a spreadsheet, and no idea if the numbers agreed. So I built one that does.

A free tool that models a Canadian's whole financial picture as one connected system: a budget that feeds the investment plan, TFSA, RRSP and FHSA contributions checked against the room you actually have, retirement drawdown, and net worth measured against published Canadian data.

A free planning tool for Canadians that replaces the four browser tabs and a spreadsheet most people use to answer one question: am I going to be alright?

Role
Sole designer, director and product owner
Scope
Concept, UX, UI, information design, QA
Built with
Claude wrote the code. I made every other call.
Status
Live, free, and still shipping
  • Product design
  • UX research
  • Information design
  • Front-end

It started as my own spreadsheet

Standard financial tools give you isolated numbers, not clear answers.

A raise, a tax strategy & retirement date are all deeply connected, yet every online tool evaluates them in a vacuum. You end up re-entering the exact same data across half a dozen tabs, only to stitch the math together yourself in a spreadsheet prone to silent errors.

Why stitching doesn't work

Every one of these is survivable alone. Together they make the picture untrustworthy.

  1. The inputs never match

    Each wants your salary, province and age again, its own way, with its own assumptions baked in.

  2. Nothing carries forward

    The take-home one tool computes isn't what the next starts from, so errors compound quietly down the chain.

  3. The interesting questions span tools

    TFSA or RRSP depends on your marginal rate, remaining room and drawdown plan at once. No single-purpose tool sees all three.

  4. No sense of scale

    A number alone doesn't tell you if you're doing well. Almost nothing shows you what is actually typical in Canada.

Four tools, the same inputs typed four times, and a reconciliation step that exists only in your head.

Four separate calculators, each re-asking for salary, province and age, contrasted with one model where those inputs are entered once and flow through five steps: Income, Budget, Invest, Retire, Summary.

One engine, flexible entry points.

Most financial tools force a bad trade-off: they either wall you off behind a 20-minute profile before showing any value, or they trap you in a vacuum with a fast answer that ignores the rest of your financial life.

Tailored in two taps.

Traditional onboarding feels like a tax audit. We replaced the endless setup forms with a direct route to what brought you here today. Two quick choices define your starting goal. No account required, no forced fields, and zero friction between you and an immediate answer.

The second onboarding step, asking what brings you here today, with four choices: build a budget, grow my savings, plan retirement, or just exploring.

Pick the exact question on your mind today. Instead of giving you an isolated output, every input feeds a single underlying model. You ask one question, and the app silently calculates your entire financial trajectory.

Three entry points — Can I afford this, TFSA or RRSP, and When can I retire — each feeding one connected model of income, budget, investments, retirement drawdown, and net worth, leading to full financial clarity.

The budget is the engine, not a side panel.

Most tools treat budgeting and investing as two separate tabs. In reality, they are one continuous system.

Your budget is the live cash flow that fuels every long-term projection. Trim $50 off monthly spending, and your retirement date moves forward in real time on the exact same screen. Linking cash flow directly to the projection engine keeps every forecast grounded in your actual financial reality.

The real 2026 limits. Contribute past them and the overflow lands in a taxable account.

A 50/30/20 budget bar whose 20% savings slice feeds three contribution-room limits: TFSA $7,000 a year, RRSP 18% of pay up to $33,810, and FHSA $8,000 a year, with anything past the limits spilling into a non-registered account.

Closing the tax refund loop.

Contributing to an RRSP or FHSA generates a tax refund, but standard calculators treat that cash as a dead end. They ignore what happens after it hits your bank account.

I built the model to treat the refund as an active variable, prompting a critical choice: are you spending that cheque, or reinvesting it? Showing those two compounding curves side by side exposes a massive wealth gap that static calculators miss.

The edge a single-purpose calculator cannot model: it needs your rate and your plan together.

A three-step cycle: contribute to an RRSP or FHSA, receive a refund worth the contribution times your marginal rate, then reinvest it, with an arrow returning to the first step.

Answers first, evidence second.

Most financial tools dump raw charts on you and expect you to decode them. I flipped that hierarchy by leading with a plain-English summary of your financial standing. The headline gives you the direct answer instantly. The charts and sliders sit below as supporting evidence, not a puzzle to solve.

The Finance Simulator summary screen. A five-step progress bar reads Income, Budget, Invest, Retire, Summary. A Your Money Story panel states: at 30 in Ontario, saving 25% you are on track to be financially independent by age 55, earning $95,000 gross and keeping $70,899 after an effective 25.4% tax rate. Below it a what-if slider set to 25% shows $1,477 a month invested, projecting $1.42M and financial freedom at age 55

Clarity is accessibility.

Most financial tools fail at comprehension, not calculation. The numbers are accurate, but users still walk away confused about what to do next.

I treated plain language as a core accessibility requirement. Every screen answers in a single sentence before rendering a chart, avoids financial jargon, and focuses on one input at a time. Under the hood, I built full WCAG support with ARIA live regions for dynamic calculations, high-contrast focus rings, and reduced-motion states.

A 100 PageSpeed accessibility score is just the baseline. Real accessibility means anyone can actually understand their financial future.

The 500 KB charting library now loads after first paint. Mobile PageSpeed went 78 to 100.

Critical-path JavaScript fell from 264 KB gzipped to 104 KB once the 500 KB charting library moved to load after first paint, taking mobile PageSpeed from 78 to 100.

Rigor behind the UI.

A polished interface means nothing if the underlying math is wrong. Flat tax rates fail during retirement, where drawdown is shaped by progressive brackets, credits, and clawbacks.

Instead of using shortcuts, I built a custom tax engine and benchmarked it against established calculators. This audit revealed a bug in standard models that overstated pension taxes by $1,600 a year. That audit uncovered a bug in standard models that overstated taxes by $1,600 a year for users with pensions.

Trust requires transparency. The app explicitly frames outputs as estimation models, giving users complete clarity without overpromising.

Replacing shortcuts with real Canadian tax logic.

Standard financial tools use flat-rate shortcuts that completely fall apart during retirement. Building a true tax engine requires modeling six distinct calculation layers, eliminating double-taxation errors that skew real net worth.

The approximation most free tools use, taxable times rate times 0.62, above the six layers the real engine models, including brackets, the basic personal amount, CPP and EI, and the OAS clawback that was being taxed twice.
  • 74 / 76 — Sampled tax points matching the reference within $2, up from 30
  • 12 — Jurisdictions benchmarked, point by point

Grounded in real context.

A future projection tells you where you are heading, but it cannot tell you if that target is realistic or competitive.

I integrated age-bracketed benchmark data from Statistics Canada and CRA taxfiler records directly into the UI. Users can immediately compare their income, net worth, and registered savings against their actual peers.

To maintain strict data integrity, the interface explicitly distinguishes verified government statistics from extrapolated model estimates. Built-in validation rules ensure mathematical logic holds true, so registered savings can never exceed investable assets or overall net worth.

Knowing you sit in the 83rd percentile is passive information. I designed this card to translate raw statistical distributions into three intuitive visual layers: your placement on the curve, your peer rank, and the exact dollar delta needed to reach the next tier.

The income comparison card, reading top 25% of earners aged 30 to 34 in Canada on a $95,000 salary, with a distribution curve marking where you sit and a note that $16,800 more would reach the top 10%.

Benchmark data is only useful if users trust it. Instead of treating all numbers equally, the interface explicitly tags raw published figures versus modeled estimates.

Three comparison sources, each tagged published or modelled: household income from a Statistics Canada table, per-person registered savings from CRA taxfiler statistics, and net worth from the Survey of Financial Security.

Zero lines written. Full design ownership.

Claude wrote every line of code. I acted as product lead and creative director, guiding the model with clear design architecture and system logic rather than basic task tickets.

AI excels at generating plausible output. It cannot tell you what shouldn't exist, nor can it spot when correct math fails human comprehension. That taste, curation, and restraint remain the core design job.

What each tool was actually for

The interesting part is the division of labour, not the stack.

  1. Google Sheets

    The mathematical foundation and benchmark used to validate every calculation engine feature.

  2. Miro

    Information architecture and user flows, mapped out before a single pixel was drawn.

  3. Figma

    Design system scales, grids, and UI tokens translated into strict layout rules rather than static mockups.

  4. Claude

    Production code execution. Fast at building, but indifferent to whether something is worth building.

  5. Me

    Product direction, taste, and copy editing. Deciding what gets cut, what stays, and ensuring the final result is accessible, concise, and defensible.

Privacy over telemetry.

Everything stays on your device. No accounts, no backend database, and zero tracking. Local-first architecture is the right default for sensitive financial data like salary and net worth.

This choice comes with deliberate trade-offs: no cross-device sync, no cloud recovery, and zero behavioral analytics. I willingly sacrificed product metrics to guarantee total user trust.

Live product, real research loops.

The app is live, completely free, and built to the standard of a tool I rely on for my own financial planning.

The objective was never just to build another calculator, but to make complete financial planning accessible through a single connected model with zero friction.

Because the app operates without user tracking, a four-tap feedback widget serves as my primary research channel. Direct qualitative feedback from real users now drives the product roadmap, placing household income mode at the top of the development queue.

As sole owner of the product, I led every stage: strategy, user journeys, information architecture, interface design, copy, and QA. This project was a real-world test in how far a principal product designer can take a live product by pairing design intent with modern AI capabilities.

Claude executed the code based on precise inputs I provided: mathematical reference models, structural wireframes, visual design tokens, and tone guidelines. I directed, audited, and refined every output. Clear design vision and human judgment are what turned raw code into an intuitive user experience.

The project began as an upgrade to my own financial planning spreadsheet. Because I needed to trust the numbers for my own future, mathematical accuracy came before UI polish.

It remains an evolving product by design. Operating without background tracking, the embedded feedback module serves as my direct research channel, using real user input to set the roadmap.

All work

Let's turn your dream into a reality.

Get in touch today.

hello@chriscoffin.design