Mortgage Calculator Design System
Transforming Generic Third-Party Tools into Brand-Aligned Member Experiences
Team Specifics
Role: Lead UX Designer & Project Lead
Duration: 6 months
Team: 2 Product Managers, Content, Compliance, Legal
Tools: Figma, Component Libraries, Design Systems
Categories: Design Systems · Component Design · Brand Design · Responsive Design · Vendor Collaboration · Technical Constraints
Context
Financial calculators are essential tools that help members make confident decisions about mortgages, loans, and refinancing. However, our website had no functioning calculators—a critical gap in the member experience.
Building custom calculators from scratch would require significant engineering resources and months of development. Instead, partners identified LeadFusion, an industry-standard calculator platform used by most major financial institutions, as a faster path to launch.
The challenge: LeadFusion calculators worked well functionally, but looked completely generic and off-brand. We needed to transform 32 third-party calculators into seamless, brand-aligned experiences within LeadFusion's technical constraints.
Problem
Functional Gap
Our mortgage pages had no working calculators, leaving members unable to estimate payments or compare options. Competitors offered these tools by default, creating friction in the loan decision process.
Brand Inconsistency
LeadFusion’s out‑of‑the‑box calculators looked generic and didn’t align with our typography, colors, spacing, or interaction patterns. The mismatch weakened trust and felt disconnected from our site experience.
Technical Constraints
We needed to update 32 calculators within a platform that allowed only limited customization. The component‑based system restricted layout and interaction changes, and all updates had to remain maintainable within the vendor’s framework.
Priority & Scope
The mortgage calculator—our most‑used tool—became the first focus. Establishing a strong pattern here would guide the remaining 31 calculators, all under pressure to deliver functional tools quickly.
Research & Discovery
Understanding the Constraints
Met with LeadFusion to map what could and couldn’t be customized, from colors and typography to layout and interaction limits. Identified where the system was flexible and where core logic was locked down.
Competitive Analysis
Reviewed how other banks implemented LeadFusion. Most relied on default styling, while the strongest examples used customization to create cohesive, native‑feeling tools.
Brand Standards Audit
Evaluated our design system—typography, color, buttons, form patterns, spacing, and accessibility—to ensure the calculators aligned with established brand and WCAG requirements.
User Needs Validation
Confirmed the mortgage calculator was a key decision tool. Prioritized clarity, trust, mobile responsiveness, and accessibility for an older veteran audience.
Original design presented too much information at once, creating cognitive overload and unclear next steps.
Solution
Built a scalable design‑system approach to transform LeadFusion’s generic calculators into branded, accessible tools.
Established a consistent collaboration cadence with LeadFusion to validate feasibility and document constraints.
Translated our brand standards—colors, typography, spacing, buttons—into their component framework.
Custom‑styled inputs, sliders, icons, and result layouts to match our form patterns and improve clarity.
Designed mobile‑first with touch‑friendly controls and consistent layouts across breakpoints.
Created reusable patterns and documentation to support updates for all 32 calculators.
Ensured WCAG‑compliant contrast, clear labels, logical keyboard navigation, and helpful tooltips for a trustworthy user experience.
Redesigned experience with progressive disclosure, clear hierarchy, and mobile-optimized layout.
Results
A scalable, brand‑aligned calculator system that improved trust, accelerated delivery, and set the foundation for all future tools.
Delivered a fully branded mortgage calculator and a component library for the remaining 31 tools.
Transformed a generic vendor widget into a seamless, trustworthy brand experience.
Enabled faster implementation than custom builds through reusable patterns and clear specs.
Confirmed technical feasibility with LeadFusion and secured stakeholder approval.
Equipped development with actionable documentation for long‑term maintenance.
Positioned the team to roll out consistent designs across all calculators and support new types without extra design work.