TrueWorth
Making Financial Illiteracy Impossible
Solo design and engineering of an interactive financial literacy platform that makes invisible economic forces visceral. Built with Next.js App Router, TrueWorth transforms abstract concepts like inflation erosion and opportunity cost into real-time, personalized calculations—exposing the gap between what you think you earn and what your money actually costs you.
Executive Summary
TrueWorth is a FinTech concept prototype I designed and engineered to address a fundamental problem in personal finance: people don't understand that their money is actively losing value through inflation and opportunity cost. Traditional financial education relies on static spreadsheets and abstract percentages—TrueWorth makes the math visceral through real-time, interactive calculators built with Next.js App Router. Three core modules:
- Real Salary Calculator: Reveals purchasing power erosion—your "$80K salary" in 2015 dollars is only worth $65K today
- Opportunity Mirror: Shows the true cost of purchases—that $30K car didn't cost $30K, it cost $139K in lost S&P 500 gains over 20 years
- Life of a Dollar: Historical visualization of dollar degradation from 1913-present (from $1.00 → $0.03 purchasing power)
1. The Problem: Financial Illiteracy Through Invisible Forces
Most people evaluate purchases using sticker prices alone, completely blind to two massive wealth-destroying forces that erode every dollar they earn or spend.
📉 Inflation Blindness
Your $100K salary sounds impressive—until you realize inflation erodes 3-4% annually. Over 10 years, that's 34% of your purchasing power evaporated. But nobody feels this happening because nominal numbers stay the same or go up slowly.
💸 Opportunity Cost Ignorance
Buying a $50K car feels like spending $50K. But if you'd invested that capital in an index fund (7% annual return), it would've grown to $194K in 20 years. The real cost was $194K in lost wealth—4x the sticker price.
The Core Problem: Traditional financial education teaches these concepts through spreadsheets and percentages—abstract, forgettable, emotionally inert. People need to see their wealth evaporating in real-time to internalize the urgency.
2. Product Philosophy: Computation Over Education
TrueWorth doesn't teach you compound interest formulas—it does the math for you, instantly, as you type. The UX strategy treats financial literacy as an experiential problem, not a knowledge problem.
Design Principles
1. Immediate Visual Feedback Loops
Every keystroke or slider adjustment triggers instant recalculation and visual updates. Users don't click "Calculate"—results appear as they think. This creates a direct sensory connection between input (salary/purchase amount) and output (wealth erosion).
Design Approach:
→ Real-time calculation updates provide immediate financial feedback
→ Visual transitions (color shifts) reinforce positive/negative value changes
→ Result: Instant feedback enables "what-if" exploration without cognitive interruption
2. Behavioral Goal-Centric Guardrails
Financial anxiety kills engagement. TrueWorth uses heuristic guardrails to guide users from simple inputs (purchase price) to long-term impact (opportunity cost) through a nudge-based sequence that maintains emotional equilibrium while delivering hard truths.
UX Flow:
1. Enter salary: "$80,000"
2. Instant result: "Real value in 2015: $65,304" (shocking)
3. User expands: "Adjust inflation rate" slider appears
4. User tweaks: Real-time recalculation with custom inflation
3. Emotional Amplification Through Contrast
Raw numbers don't create urgency—contrasts do. The Opportunity Mirror shows two numbers side-by-side: "You paid: $30,000" vs. "Opportunity cost: $139,485." The 4.6x multiplier creates visceral shock that static education can't match.
Visual Design:
→ "You paid" in neutral gray
→ "Opportunity cost" in glowing red + 2x font size
→ Animated counter from $30K → $139K over 2 seconds (emotional impact)
3. Design Focus: Cognitive Load Reduction Through Visualization
Financial literacy fails when abstract concepts remain abstract. TrueWorth makes inflation's impact visceral through real-time visual feedback — transforming compound interest calculations into immediate, emotionally resonant comparisons.
Core UX Principles
- Instant Visual Feedback: Changes to salary inputs update purchasing power visualizations in real-time, making abstract inflation rates tangible
- Comparative Framing: Rather than showing raw numbers, surfaces opportunity costs ("Your $80K salary buys what $52K bought in 2000") that trigger emotional recognition
- Code Splitting: Each calculator module loads independently → smaller initial bundle (47KB gzipped vs. 120KB for single-page app)
4. The Three Core Modules
Module 1: Real Salary Calculator
The Problem It Solves: People celebrate salary increases without adjusting for inflation. A $100K salary in 2010 required $130K in 2024 just to maintain the same purchasing power—but most people think "$100K is $100K."
The User Experience:
- Enter current salary: "$80,000"
- Select year to compare: "2015"
- Instant result: "Your $80K today buys what $65,304 bought in 2015"
- Shocking realization: "I got a raise from $70K → $80K, but I'm actually poorer"
Data Source: U.S. Bureau of Labor Statistics CPI data (1913-2026), updated quarterly
Module 2: Opportunity Mirror
The Problem It Solves: People see purchases as one-time costs, ignoring that every dollar spent is a dollar not invested. A $50K car purchase seems reasonable—until you realize that same $50K would've grown to $194K in S&P 500 over 20 years.
The UX Hook:
What You Paid
$50,000
True Cost (20Y @ 7%)
$193,485
Behavioral Impact: This reframing creates hesitation before major purchases—exactly the goal of financial literacy tools
Module 3: Life of a Dollar (Historical Visualization)
The Educational Goal: Show that the "dollar" is not a stable unit of value—it's been degrading for 110+ years. In 1913, $1.00 had the purchasing power of $31.12 today (96.8% erosion).
The Visualization: Animated line chart showing dollar degradation from 1913-2026, with historical annotations (1929 crash, 1970s stagflation, 2008 crisis, 2020 COVID stimulus). Users scrub timeline to see purchasing power at any year.
Design Choice: Red declining line (not neutral blue) to emotionally emphasize loss. Same psychology as stock market red/green convention.
5. What I Learned: FinTech Prototyping Insights
✓ What Worked Exceptionally Well
1. Emotional Design Over Rational Education
The Opportunity Mirror's 4x multiplier ($50K → $194K) creates visceral shock that spreadsheets never achieve. Users don't need to understand compound interest formulas—they just see the glowing red number and feel the loss. This emotional engagement drives behavioral change better than rational education.
2. Heuristic Guardrails Prevent Overwhelm
Starting with a single input field and revealing complexity only after initial results prevents abandonment. Users who see the shocking first result ($80K salary = $65K in 2015) are motivated to explore advanced features (custom inflation rates, different time periods). Frontloading complexity would've killed engagement.
3. Technical Fluency Enables Better Design Decisions
My understanding of Next.js architecture enabled instant-load experiences without backend complexity. This technical fluency allowed me to propose design solutions that were both ambitious (real-time calculations, smooth transitions) and pragmatic (static generation, no server costs) — accelerating concept validation without engineering dependencies.
⚠️ What I'd Do Differently
1. Add Social Sharing for Viral Growth
TrueWorth creates "aha moments" perfect for social sharing—"I thought my $100K salary was good, but it's actually worth $73K in 2010 dollars!" Building shareable result cards (pre-rendered images with branded overlay) could've driven organic growth. Missed opportunity.
2. Integrate Real Investment Account APIs
The Opportunity Mirror shows hypothetical S&P 500 gains, but imagine if it connected to users' actual Robinhood/Vanguard accounts and calculated: "If you'd invested that $30K car payment into your existing portfolio, you'd have $X more today." Personalization multiplies impact.
3. Build Behavioral Nudges, Not Just Calculators
TrueWorth shows the problem (inflation erosion, opportunity cost) but doesn't guide action. Adding "suggested actions" after each calculation—"To beat 3% inflation, invest in assets returning 7%+ annually"—would've turned awareness into behavior change. Pure education without action pathways is incomplete.
🚀 How This Shaped My FinTech Design Approach
ACY Securities: Visceral Communication of Complex Finance
TrueWorth's core lesson—make invisible forces visceral through instant feedback—directly influenced how I communicated ASIC regulatory constraints to ACY stakeholders. Instead of presenting compliance as abstract legal requirements, I showed CEOs real-time mockups: "This design violates ASIC 14-day disclosure—here's the $500K fine you'd face." Emotional impact beats rational argument.
Current Portfolio Strategy: Prototyping Over Powerpoint
Building functional prototypes (not static mockups) proves capability better than case study text. TrueWorth demonstrates Next.js mastery, React state optimization, and financial domain knowledge through working code—more convincing than describing these skills abstractly. For Staff Product Designer roles, shipping > storytelling.