# RetireRight — Project Story
"It's not too late. But it will be."
💡 Inspiration
The idea for RetireRight didn't come from a textbook — it came from a moment of panic.
I watched my father reach his 60s with almost nothing saved. He worked every single day of his life — but no one ever taught him how to plan. By the time he realised the problem, he felt it was already too late. I don't want that to be the story for an entire generation.
The terrifying truth? Right now, it is.
When I dug into the data, the picture was worse than I expected:
- 50% of adults aged 35–44 have less than \$50,000 saved for retirement
- 56 million Americans have zero retirement savings
- Traditional pensions now cover fewer than 15% of private-sector workers
- The average Social Security payment is only \$1,657/month — barely enough for rent and groceries
And yet every financial tool I found was either built for people who already had wealth, or so generic it offered nothing actionable. Nothing existed specifically for the late starter — someone who is behind, knows they are behind, and desperately needs a clear path forward without shame.
That gap became the mission of RetireRight: a judgment-free catch-up retirement planner, built for the millions who feel it's too late — but it isn't.
🏗 How I Built It
Architecture
RetireRight is built entirely with vanilla HTML, CSS, and JavaScript — no frameworks, no backend, no database. Every calculation runs in the browser and all user data is stored locally via localStorage. This was a deliberate choice: zero installation, fully private, and accessible to anyone with a browser.
retireright/
├── onboarding.html ← 6-step personalised signup flow
├── app.html ← Main dashboard
├── calculator.html ← Retirement calculator + Monte Carlo
├── advice.html ← AI Guidance + Why Saving Matters tutorial
├── expert.html ← Expert Advisor + Ask-the-Advisor Q&A
├── invest.html ← Investment Center
├── tracker.html ← Monthly savings log + streak tracker
├── index.html ← Landing / pitch page
├── app.css ← Shared design system
└── app.js ← Shared financial engine + utilities
1. The Future Value Formula
The core engine computes the future value of current savings combined with ongoing monthly contributions. This single formula powers the calculator, the dashboard score, and the Monte Carlo simulator:
$$ FV = PV \cdot (1 + r)^{n} + PMT \cdot \frac{(1 + r/12)^{12n} - 1}{r/12} $$
Where:
- \(PV\) = present value (current savings today)
- \(PMT\) = fixed monthly contribution
- \(r\) = annual return rate as a decimal (e.g. \(0.07\) for 7%)
- \(n\) = number of years until retirement
For example, a 35-year-old with \(\$5{,}000\) saved, contributing \(\$300\) per month at \(r = 7\%\) for \(n = 30\) years produces a projected corpus of roughly \$340,000.
2. Retirement Readiness Score
Every user receives a personalised readiness score from 0 to 100. The score compares the projected future value against the 25× Rule — the corpus needed to fund 30 years of retirement at the 4% safe withdrawal rate:
$$ \text{Score} = \min!\left(\frac{FV}{\text{MonthlyIncome} \times 12 \times 25},\ 1\right) \times 100 $$
A score below 40 is "Critical." Between 40 and 60 is "At Risk." Between 60 and 80 is "On Track." Above 80 is "Excellent." The score updates live as the user adjusts any slider.
3. Social Security Estimator
The app estimates the user's Social Security benefit using a simplified approximation of the Primary Insurance Amount (PIA), then applies a claiming-age adjustment factor \(f_{age}\):
$$ SS_{monthly} = \frac{\min(\text{AnnualIncome},\ W_{base}) \times 0.40}{12} \times f_{age} $$
The factor \(f_{age}\) penalises early claiming before the full retirement age of 67, and rewards delay up to age 70:
$$ f_{age} = \begin{cases} 1 + (a - 67) \times 0.0667 & \text{if } a < 67 \\ 1 + \min(a - 67,\ 3) \times 0.08 & \text{if } a \geq 67 \end{cases} $$
Claiming at 62 reduces the benefit by approximately 33%. Delaying to 70 increases it by approximately 24% above the full retirement age amount.
4. Monte Carlo Simulation
The most powerful feature runs 1,000 randomised market scenarios to give users a realistic success probability — not just a single average-case projection.
Each year's return is sampled from a normal distribution using the Box-Muller transform, which converts two uniform random numbers \(U_1\) and \(U_2\) into a standard normal variable \(z\):
$$ z = \sqrt{-2\ln(U_1)} \cdot \cos(2\pi U_2), \quad U_1,\ U_2 \sim \text{Uniform}(0,1) $$
The annual return for that simulated year is then:
$$ r_{annual} = \frac{\mu + z \cdot \sigma}{100}, \quad \mu = 7\%,\quad \sigma = 14\% $$
Where \(\mu = 7\%\) is the historical mean real return of a diversified portfolio and \(\sigma = 14\%\) is the historical standard deviation. Each of the 1,000 portfolios is grown through the accumulation phase, then stress-tested through a 25-year withdrawal phase at the 4% withdrawal rate. The result is a retirement success rate:
$$ \text{Success Rate} = \frac{\text{Number of simulations where } V_{final} > 0}{1{,}000} \times 100\% $$
A success rate above 80% is considered strong. Below 60% triggers an urgent recommendation to increase contributions or delay retirement.
5. Debt Payoff Engine
The debt planner implements both Avalanche (highest interest rate first) and Snowball (smallest balance first) strategies. Each month, interest compounds on the remaining balance before payments are applied:
$$ B_{t+1} = B_t \cdot \left(1 + \frac{r}{12}\right) - P_t $$
Where \(B_t\) is the outstanding balance at month \(t\), \(r\) is the annual interest rate, and \(P_t\) is the payment made that month. The engine runs both strategies simultaneously and displays the difference in total interest paid and months to debt-free.
6. Minimum Savings Rate Optimizer
This feature answers the question: "What is the absolute minimum I need to save each month to retire on time?" It uses binary search over the contribution space, converging in 40 iterations to within \$1:
$$ \text{Find minimum } PMT\ \text{such that}\ FV(PV,\ PMT,\ 7\%,\ n) \geq \text{MonthlyIncome} \times 12 \times 25 $$
7. Chart Animation
All charts are drawn on the HTML5 Canvas API — zero external libraries. The animated donut score ring uses requestAnimationFrame with an ease-out-cubic function so the arc draws smoothly from zero to the final score:
$$ \text{ease}(t) = 1 - (1 - t)^3, \quad t \in [0, 1] $$
HiDPI display support is achieved by scaling all canvas coordinates by window.devicePixelRatio.
📚 What I Learned
On Finance
Building the compounding visualiser made compound interest visceral for the first time. Consider two people both contributing \(\$200\) per month at \(r = 7\%\) per year until age 65:
| Start Age | Years of Growth | Projected Total |
|---|---|---|
| 25 | 40 years | ~\(\$525{,}000\) |
| 35 | 30 years | ~\(\$243{,}000\) |
| 45 | 20 years | ~\(\$104{,}000\) |
Same contribution. Same rate. The only variable is time — and the outcome is 5× different. No formula captures that intuition the way a live animation does.
The Monte Carlo simulator revealed sequence-of-returns risk — one of the most underappreciated concepts in retirement planning. A portfolio with a solid average return can still be depleted if a market crash arrives in the first 3–5 years of retirement, because withdrawals force selling of depressed assets with no time to recover. This is why the 4% rule, a cash buffer, and flexible spending all matter.
I also learned that savings rate beats return rate for most people. Moving from a 7% to a 10% annual return improves outcomes by roughly 40% over 30 years. Moving from an 8% to a 15% savings rate improves outcomes by over 90%. Contribution discipline matters more than investment selection.
On Design
The biggest UX lesson was unexpected: shame is the enemy of action. Early prototypes used language like "Critical failure" and "Severe shortfall detected." Testing showed that people closed the tab rather than engage. Every sentence was rewritten to be honest but never harsh — "urgent" instead of "failing," "recoverable" instead of "catastrophic," "catch-up mode" instead of "too late."
The onboarding flow taught me that showing the score early creates commitment. Users who see a retirement readiness score — even an imperfect one — immediately want to improve it. A number to improve is a goal. A goal drives behaviour.
On Technical Implementation
The debounce pattern was critical performance knowledge. Without it, dragging a slider triggers the Monte Carlo simulation — 1,000 iterations — on every pixel of movement, freezing the UI. Debouncing at 150ms combined with setTimeout(fn, 0) to yield the event loop before heavy computation makes it feel instant on any device.
Writing the Canvas chart engine from scratch — rather than using a library — taught me more about coordinate systems, pixel density, anti-aliasing, and animation loops than any tutorial could have.
🚧 Challenges Faced
Challenge 1 — Making Finance Feel Human
The hardest problem was not technical — it was emotional. Financial tools are almost universally cold, jargon-heavy, and implicitly designed for people who already have confidence about money. Building something warm and non-judgmental while remaining mathematically rigorous required rewriting every piece of copy multiple times.
The "Why Saving Matters" tutorial section was rebuilt four times. Version one read like a textbook. The final version uses animated real numbers drawn from the user's own profile, tells human stories, and explains concepts through their personal consequences — because narrative changes behaviour in a way abstract statistics never does.
Challenge 2 — Accuracy vs. Simplicity
Real retirement planning involves dozens of variables: federal and state tax rates, Social Security bend points, Required Minimum Distributions, healthcare costs, investment expense ratios, sequence-of-returns risk, and inflation. Modelling all of them would require a full actuarial engine — and produce an app so complex most users would abandon it.
The resolution was to be transparently approximate. Every projection is clearly labelled as an estimate. The goal is not to replace a Certified Financial Planner. It is to give a late starter enough clarity to take the first step — which research consistently identifies as the hardest one.
Challenge 3 — Zero Dependencies, Zero Backend
Every feature that normally relies on a third-party library — charts, animations, modals, form validation, the financial engine — had to be implemented from scratch. The Monte Carlo simulation was the most demanding: 1,000 full portfolio simulations in a single synchronous call takes ~80ms, enough to drop frames. The solution required three techniques working together:
- Debounce the user input trigger at 150ms
setTimeout(fn, 0)to yield the browser event loop before computation begins- Separate UI state update from heavy computation so the user sees a loading indicator instantly
The result is a simulation that feels responsive on modest hardware.
Challenge 4 — The Presentation Gap
Generating a PowerPoint deck from the browser was blocked by a missing toolchain: the required Node.js libraries (sharp, pptxgenjs, playwright) were not installed in the environment. This was a real lesson in never assuming infrastructure exists — always verify your full toolchain before committing to a deliverable format.
The workaround was building the pitch presentation as a rich animated HTML landing page (index.html) instead — which works universally in any browser, requires no installation, and demonstrates the product's design quality directly to judges.
🎯 The Core Insight
The retirement crisis is not a knowledge problem. Most people already know they should save more. It is a friction problem — shame, paralysis, complexity, and the absence of tools built for people starting late.
RetireRight removes every layer of that friction:
- [x] No jargon — every term explained in plain English
- [x] No judgment — language that encourages rather than shames
- [x] No complexity — one clear next action, not ten overwhelming options
- [x] No server — runs entirely in the browser, stores nothing remotely
- [x] No minimum — if you can spare \(\$50\)/month, we show you exactly what it becomes
🔮 What's Next
| Feature | Description |
|---|---|
| Live brokerage sync | Connect real accounts via Plaid to auto-import balances and transactions |
| Tax engine | Model the federal and state tax impact of 401(k) vs. Roth IRA vs. taxable accounts |
| Advisor marketplace | Match users with vetted fee-only CFPs in their area |
| Employer channel | Sell RetireRight to HR departments as a financial wellness benefit |
| Mobile app | Native iOS/Android for contribution logging and streak notifications |
🙏 Acknowledgements
Built with deep respect for the educators who have spent careers making financial knowledge accessible:
- John Bogle (Vanguard) — for proving that index funds work for everyone, not just the wealthy
- The Bogleheads community — for building the world's best free financial education resource
- The CFP Board — for establishing rigorous standards for financial advice
- Vanguard, Fidelity, and Schwab — for making low-cost investing accessible to ordinary people
And to every person who has ever opened a retirement calculator at 2am and felt scared — this was built for you.
RetireRight was designed, built, and documented as a pitch project demonstrating that the retirement crisis is solvable — one late starter at a time.
Built with: HTML · CSS · JavaScript · HTML5 Canvas API · localStorage · Zero dependencies
Pages: 8 · Lines of code: ~6,500 · Financial formulas: 12 · Monte Carlo runs per simulation: 1,000
"The best time to plant a tree was 20 years ago. The second best time is now."
— Chinese Proverb
Built With
- canvasapi
- css
- html
- html5
- javascript
