The Mortgage Lender — residential affordability calculator

Context

The Mortgage Lender needed a broker-facing residential affordability experience that gives a quick maximum lending and illustrative monthly repayment estimate without starting a decision in principle (DIP) — the formal lender check that leaves a credit search on the applicant's file.

I built a calculator that had to stay trustworthy under real intermediary use — many income shapes, dependants, committed credit, and mortgage preferences — while remaining clear enough for keyboard and screen-reader users.

The overview above shows the shipped experience — a four-step wizard in a full-screen overlay, with a stepper tracking progress through applicant details, income, expenditure, and mortgage preferences.

What shipped

• Four-step wizard — applicant information → applicant income (including multiple applicants) → committed expenditure → mortgage preferences, then an overview and results phase
• Edit from results — brokers can return to key sections (applicants, dependants, outgoings, preferences) without restarting the whole flow
• Headline outputs — maximum lending capped by policy, illustrative monthly repayment, and a summary of term, rate, and reversion assumptions
• Embeddable delivery — a self-contained calculator that mounts on The Mortgage Lender's marketing site as a drop-in widget
• Full-screen overlay flow — scroll-locked wizard so brokers aren't fighting the host page while entering figures
• Stepper and progress — including per-applicant progress during income capture when there are multiple applicants

How affordability is modelled

The calculator runs an explicit, auditable pipeline — from household inputs to a capped lending figure brokers can quote from.

Income and outgoings

• Income assembly — per-applicant inputs (salary, bonus, allowances, self-employment, rental, maintenance, pension, benefits) combined with source-specific weightings; multi-applicant gross income aggregated for caps and decile logic
• Net income — gross run through banded UK income tax and National Insurance calculations so figures don't jump incorrectly at boundaries
• Outgoings — committed expenditure from broker-entered monthly commitments, plus modelled essential spend scaled by household size and adjusted by income decile
• Surplus — monthly net income minus committed and essential expenditure, feeding into the lending calculation

Lending outputs

• Maximum affordable loan — surplus converted to a loan size at the effective rate from mortgage preferences
• Policy guardrail — a loan-to-income ceiling (4.5× gross) caps the headline figure when affordability would exceed policy — brokers always see the lower of the two
• Repayment illustration — monthly repayment over the chosen term at the entered rate, applied to the final capped loan — clearly an estimate, not an offer

Challenge

• Complex financial rules in a broker-tolerant UI — every field had to justify its place in the surplus story
• Accessibility couldn't be an afterthought given broker diversity and firm standards
• Edge cases in numeric input and multi-applicant flows — defensive parsing, consistent rounding, and stable state when editing from results
• Regulated-adjacent accuracy — small bugs in tax, NI, decile, or loan-to-income cap logic become trust incidents, not just UI glitches
• Embeddable on a third-party site without breaking host page layout, scrolling, or analytics expectations

Approach

• Separated the financial model from the wizard UI so rules could be reviewed and adjusted independently of components
• Structured the flow around how brokers actually work — quick estimate, no decision in principle, four clear steps, edit-in-place from results
• Used standard time-value-of-money calculations for loan sizing and repayment illustration rather than hand-rolled amortisation
• Built accessibility into the overlay, stepper, and form patterns from the start — not bolted on after
• Instrumented step views and engagement so product stakeholders could observe journey completion without coupling analytics to core calculations

Outcome

• Live on The Mortgage Lender's site — brokers get a capped lending figure and repayment estimate in minutes, without starting a decision in principle
• Multi-applicant income, edit-from-results, and policy plus affordability combined in one headline number
• Step-level visibility for product and compliance stakeholders reviewing how brokers move through the wizard
• A financial tool where tax, surplus, and loan-to-income cap logic had to be right — not just the UI around it