MortgageMate — Mortgage Broker Website

Challenge

MortgageMate is a fictional independent mortgage broker that needed to make home loans feel manageable. The brief specified "swiss grid": rational layouts, generous whitespace, green #16a34a accents on white, Inter throughout. The page needed a payment-breakdown hero visual, services grid, broker-vs-bank comparison, process, transparency band, CTA, and FAQ — with honesty constraints: no invented lender counts, no fabricated rates, no "guaranteed approval" language. The breakdown visual had to be clearly illustrative.

Approach

We built the hero around a pure-CSS donut chart — "Where your payment goes" (principal & interest, property taxes, home insurance, PMI/HOA) — captioned "Illustrative breakdown — your adviser will model your exact figures". The swiss-grid system keeps everything aligned and calm; green accents signal "go" without shouting. Trust is built through transparency copy: "How we get paid (no secrets)", whole-of-market language without invented counts, and a footer disclaimer noting the design-concept nature.

Design highlights

The donut-chart hero opens into a fictional-lender wordmark bar, a six-cell services grid (first-time buyers, home movers, remortgaging, buy-to-let, self-employed, bad credit), a "Broker vs. going direct" comparison table, a four-step "Four steps to your keys" process, and a mint transparency band ("Our promises, in writing"). A dark CTA band ("Let's find your mortgage") and an accessible FAQ ("Straight answers") close a page that treats borrowers like adults.

Outcome

MortgageMate shows WebStackRank's swiss-grid discipline applied to financial services: the rational layout and clearly-labeled illustrative data model compliance-friendly marketing. The donut-chart hero is a reusable pattern for any "explain the numbers" brief, and the structure ports directly to a real broker site. The services grid and comparison table accept real lender data and rate feeds without a redesign, and the transparency band sets the tone for regulated-industry copy. The FAQ answers the questions borrowers actually ask, in language they understand. The same rational system suits financial advisors, accountants, legal services, and insurance brokers.