Eric Joseph Lee
Back to Design and prototyping

Central 1

Finance Calculators Visual Re-Vamp

Redesigned seven financial calculators — Mortgage, Retirement, Education Savings, RRIF, TFSA, and Foreign Exchange — used across 300+ Canadian credit unions. Extended Central 1's Forge 2.0 design system with new calculator-specific components, moving from a dated dark-themed UI to a clean, modern, accessible experience.

Role
UX/UI Designer
Team
Solo designer + development team
Timeline
2 weeks
Year
2022
Calculators redesigned
7
Calculators redesigned
Credit union clients
300+
Credit union clients
Research to final design
2 weeks
Research to final design
Design system extended
Forge 2.0
Design system extended
Project overview — 7 finance calculators, 2-week sprint
1 / 14

Process

  1. 1. Competitive Research

    Understanding how financial institutions present calculators

    • Audited calculator UIs across major Canadian banks, government financial tools, and insurance company platforms.
    • Identified consistent patterns: clean light backgrounds, grouped input fields, prominent output display, and accessible label/tooltip patterns.
    • Used findings to ground the redesign in conventions users already trust — financial tools need familiarity, not novelty.

  2. 2. Input Analysis

    Breaking down field types before touching visual design

    • Mapped all input types across the mortgage calculator as a reference model: text fields, dropdowns, sliders, radio groups, and range selectors.
    • Identified inconsistencies in the existing design: mixed input patterns, unclear labels, and missing error/validation states.
    • Created a field-type inventory that informed consistent component extensions to the Forge 2.0 design system.

  3. 3. Design System Extension

    Extending Forge 2.0 for calculator-specific needs

    • Central 1's Forge 2.0 system had no calculator-specific components — input sliders, output highlight cards, tab navigation (View Graph / View Report), and print/share actions all needed to be added.
    • Built new components that matched Forge 2.0's visual language while meeting the unique interaction requirements of financial calculators.
    • All components designed to WCAG 2.1 AA — proper contrast ratios, focus states, and label associations throughout.

  4. 4. Final Design

    Shipping 7 calculators in 2 weeks with full edge case coverage

    • Applied the new design system across all seven calculators: Mortgage, Retirement Planner, Education Savings, RRIF, TFSA, and Foreign Exchange.
    • Worked in an agile loop — iterative refinement with the development team as edge cases surfaced (e.g., income range selectors, currency switching, disclaimer placement).
    • Delivered pixel-perfect Figma specs for each calculator with component annotations for handoff.

Outcomes

  • Seven calculators redesigned and shipped — clean, modern UI replacing the legacy dark-themed system across all 300+ credit union clients.
  • Consistent design language across calculators: unified input patterns, prominent output display, and accessible tab-based result views (graph / report / print / share).
  • Design system extended with reusable calculator components, reducing future design and development time for new financial tools.

Skills and tools

  • UI Design
  • Design Systems
  • Accessibility
  • Fintech