1 / 14
Process
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
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
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
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.