Metal Mortgage
Mortgage broker website design for a Canadian brokerage that looks like nobody else in the business. We cleaned up a compromised WordPress site first. Then we wrote down the black-and-gold brand so it could be used properly, rebuilt the strategy around one idea and a strict evidence rule, and designed and built a full site around a published board of real funded files.
Keep the metal. Make it read as credible, not as costume.
Metal Mortgage Inc. is a licensed mortgage brokerage led by principal broker Daniel Char. It arranges prime, alternative and private mortgages, and its speciality is the file a bank branch sends back: business owners, the self-employed, people paid in draws and deposits, and investors past their fourth property. Its brand is black and gold with a heavy-metal voice, and its tagline is "Rock Solid Advice". No other brokerage we looked at sounds like it.
Daniel came to us wanting to keep all of that, and wanting a proper website instead of a single page. He also wanted to own everything outright, having been left by developers before, and no page builder. Before any of that, though, we found something more urgent on his existing site. So the work ran in the order it had to: make the domain safe, write the brand down, decide what the site has to prove, and only then design and build it.
Visit metalmortgage.ca →
Six weeks, played in the order the work had to happen.
Every stage ended in a document the client could read, sign off and keep. Nothing was designed before the stage underneath it was agreed.
- 0119 AugThe proposal
Security first and priced on its own, whatever Daniel decided about the redesign.
- 0220 AugThe clean-up report
What got in, what was removed, what was closed and what was still open.
- 03AugustBrand guidelines & style guide
The existing brand written down, from the logo to the last component.
- 0425 AugDiscovery call
Twenty-one decisions with Daniel and his team, each recorded in the strategy document.
- 0527 AugStrategy, architecture & wireframes
One controlling idea, two audiences, a route map and fifteen templates drawn in grey.
- 0611 SepVisual design
Twenty-four screens and a clickable prototype of the whole site, dark and light.
- 0717–20 SepClient comments
Applied, and three of them written up as standing rules so no later rewrite could undo them.
- 0824 SepThe build
The full-site theme, built to the design, with every unconfirmed claim held back.
A new theme on a compromised database is a compromised website with better typography.
From the proposal, which put the clean-up first and priced it separately, whether or not the redesign went ahead.
The old site was publishing pages nobody at the brokerage had written.
When we first looked at the old site from outside, Google had indexed over a thousand gambling and betting spam pages under the brokerage's domain. For a regulated financial business, a search for its own name was turning up casino content. We cleaned the site, closed the ways in that we could find, and wrote up exactly what we did and what was still open. That report belongs to the client, and it is confidential, so this is a summary by type.
- Pirated copies of paid plugins and a pirated theme, one of them set up to stop the site's own security scanner from looking at it
- Plugins running versions with publicly known security holes
- Administrator accounts the brokerage had never created
- Malicious code kept in the database rather than in files, where file scanners never look
- A full forensic snapshot taken before anything was touched
- Every spam page deleted, set to return 410 Gone and taken out of Google's index
- Backdoors, bad accounts and database-stored code removed, with legitimate code checked and kept
- Vulnerable software patched or removed, WordPress hardened, credentials rotated where access allowed
- The site came back clean in Google Safe Browsing, Sucuri and Search Console
- A written list of what still needed hosting access to close
- The case for replacing the pirated theme, not patching it, which is the redesign that follows
A one-page site to stand in while the real one was planned.
The pirated theme had to go, and the full site was weeks away. So we built a clean, custom one-page site to go live first, and it is what metalmortgage.ca shows today. It kept the brand Daniel already had: the black and gold, the gold monument on a black ridge, and lines like "The bank said no? That is not the end of the song." What it added was a structure. It has eleven mortgage solutions, twenty funded files on a sliding rail, four kinds of borrower, a four-step process, the broker and his team, the FAQ and an enquiry form.
- Every fact in one filePhone, email, licence, solutions, deals, team, process and FAQs all come from one content file, so the client can be handed a single document instead of a dozen templates
- Updates that install themselves, behind a human gateThe theme updates from tagged GitHub releases. A named reviewer has to approve each release before it exists, the build actions are pinned by commit and each ZIP's checksum is recorded
- Testimonials that stay realThe reviews section shows only real, attributable reviews, copied word for word, and is built to stay empty rather than be padded
- Schema and analytics from day oneMortgageBroker, FinancialService and FAQPage structured data, and GA4 lead events that carry the visitor's situation, goal and timeline
A loud brand needs stricter rules than a quiet one.
The logo and the voice already existed. What didn't exist was anything written down, so every new ad or flyer was a fresh guess. We wrote an 18-page brand guidelines document covering the logo, colour, type, voice, art direction, graphic elements and applications. Its job is to let any designer, printer or copywriter get it right first time. It is printed on white on purpose, so the black and gold appear as specimens to judge rather than as wallpaper behind the instructions.
- Gold is a ramp, not a colourSix steps sampled from the lit metal of the mark, from #F7E7B4 to #7A561A. Large areas take the gradient and small ones take a single step. There is no third accent and no seasonal variant
- Gold on light, measuredThe brand gold is 11.2:1 on near-black and 1.82:1 on white. So any gold word on a light ground uses the darkest step, which passes AA, and gold keeps to roughly a tenth of any view
- Loud in form, never loud in claimFive voice principles, a vocabulary list and worked before-and-after examples. The design can shout, but the promises never do, and the bank is a system with limits, not a villain
- Compliance written inWhat every public piece must carry and what it must never claim: no promised approval, rate or timeline, and no "guaranteed", "instant" or "easy"
- Honest about the gapsThe only logo master on file was a small PNG. The guidelines say so, and set out what vector and print artwork is needed before any signage or large-format work
The design system, written up from the code that runs it.
Alongside the brand guidelines we wrote a 34-page design system document for designers and developers. It was taken straight from the production stylesheet, so it describes what actually ships. It is printed dark, because the brand is dark-first and every contrast ratio in it is measured against near-black.
- Five principlesBlack and gold and nothing else. Gold is a gradient, not a flat colour. Corners stay at 0–3px. Never pure white or pure black. Motion is weight, not decoration
- Two familiesOswald for headings, buttons and labels, and Inter for reading, on a fluid type scale
- Six signature treatmentsThe gold fill, the gold rule, the riveted steel plate, the deal card and the guitar-pick social icons, each one specified
- Accessibility and governanceContrast, focus and reduced-motion rules, plus how to extend the system without drifting from it, and an appendix listing every token
Nothing on the site may claim anything the evidence ledger does not carry.
We sorted every fact the brokerage gave us by where it came from. If something couldn't be backed up, we still designed the space for it, but the copy waited. For a regulated brokerage whose whole pitch is checkable funded files, one number nobody can check would undermine twenty that they can.
On the site, in the code or on the public record. Published.
- The brokerage licence and the principal broker's own licence
- Twenty published funded files, each with a municipality, an amount and the named agent who placed it
- Eleven solutions, four borrower types, a four-step process
The brokerage's own word. Published only where the reader can tell it is theirs.
- Years of experience
- The lender panel across prime, alternative and private
- Rush closings as a core part of the work
Agreed on the call, and the strongest numbers available. Not published.
- Two career-level figures across the team that no visitor could check against the board
- Any promise about out-of-hours availability
- Recruitment economics, until there is a current, documented source
- Any client count, which the client ruled out, and any street address, because the brokerage is virtual
"The file the branch sends back is the file we are built for."
We wrote a 31-page strategy and architecture document and revised it after the discovery call. It records all twenty-one decisions from that call, including dropping Business Loans, adding Pre-Construction, and sending every lead through the brokerage's CRM. It starts from one controlling sentence. The visitor has a file a bank refused, and the site has to move them from "a decline is a verdict on me" to "a decline is one lender's rule". It does that with a published board of real funded files.
- One idea, two audiencesFor a borrower, the funded board is relief. For a licensed agent, it is opportunity, because it names the agents who placed each file. So the same proof does both jobs, and recruitment is pitched on deal flow, not on commission split
- Beliefs in orderNine borrower beliefs and six agent beliefs, each with the evidence that earns it and the page where it lives. One of them was added later: some shift workers are never assessed at all, because the branch is shut when they're free
- From one route to about ninetyFour solution pillars over eleven service pages, four borrower pages, the funded board and a page for each deal, town pages, The Band, a recruitment section, articles, calculators and the FAQ
- Town pages that have to be earnedA town page only exists where a deal has actually funded there. That keeps the local pages from becoming a doorway-page farm, and it means every one of them carries proof
The old site asked a declined borrower to apply. The new one lets them check first.
- Read
- Check No credit pull, no name until the end
- Ask
- Apply
- Read
- See the proof
- Confidential conversation Not a CV sent to a rival
- Apply
The landing page went straight from reading to "Book a Free Consultation". The architecture adds a lower-commitment step for each audience, and it is the biggest single conversion gap the strategy found.
Every screen drawn in grey, with the actual words on it.
The wireframes were drawn in Figma and delivered as a 41-page document, with the copy written in place rather than lorem ipsum. They are deliberately greyscale. The only colour is in the markers: yellow pins for annotations, green for sections that are new, red for sections whose copy is waiting on evidence. So the review was about structure and argument, not taste.
- Annotations you can hoverEach numbered pin opens a card in the Figma prototype explaining what the section is for, which belief it carries and what evidence it needs
- A copy deck that matches the live pageSource copy for every page, checked against the landing page so nothing that already worked was lost, plus a list of exactly what blocks each line that isn't written yet
- Mobile isn't the desktop squeezedOn a phone the funded proof moves above the explanation, because visitors coming from search want proof first
Twenty-four screens, every one on a stage lit from one side.
The visual design came in Figma as twenty-four screens and a clickable prototype covering desktop, mobile and the light theme, built from a single foundations page. The client's team had already approved several blocks on the landing page: the hero, "Who we ride for", the four-step chain, the team and the guitar-pick social icons. Each of those stayed a full block of its own rather than being squeezed into a summary row.
- One art direction for every imageNear-black grounds, one warm gold light source, deep shadow and film grain. We generated the new scenes to that brief and added one rule: no people. A generated face next to a funded file would read as an invented client
- The metaphor as structureThe process is a setlist, the team is The Band, the eligibility check is a soundcheck, and articles are liner notes. It is in the navigation and the section names, never in a claim
- A real map, not a picture of oneThe tour map is drawn from OpenStreetMap data in a black-and-gold style, with Edmonton shown as an inset
- Client corrections that became rulesNever promise "no T4s", because the prime lenders do ask for them. Cover the straightforward files as well as the difficult ones. Keep the agent route in the header, not in the middle of the homepage
Every file, named. Nobody's name but the agent's.
The landing page had twenty funded files on one sliding rail. The architecture turned that rail into a system. Every card gives the municipality, the amount and the agent who placed it, and never the client. The same records feed the board, the map, the town pages, the service pages and each agent's profile.
These are the brokerage's own published figures, added up from the cards. Anyone can check every one of them on the board.
One dataset, filtered six ways.
The board sorts every file largest first and filters by town, agent and amount, and the grid and the map update together. Each deal has its own page, and each town with a funded file gets a page that lists its files and the people who placed them. A service page, a borrower page or an agent profile shows the files that match it, so the proof always sits next to the claim it backs up.
- Filters that never dead-endIf a filter combination has no funded file, the page says so and shows the closest real one instead of an empty grid
- The tour mapMapLibre on OpenFreeMap vector tiles, with clustered stops, labels showing the file count and total for each town, and a list version underneath for keyboards and screen readers
- The evidence gate in codeTown pages return a 404 unless a published deal carries that town. As the board grows, the site's local footprint grows with it
- One graded lookEvery deal photograph carries the same golden grade, so the CLOSED stamps baked into the source images sit with the page instead of fighting it
Ten sections, each answering the next question a declined borrower asks.
The service template is the workhorse: eleven pages, grouped into four situations a file arrives in. Declined by the bank, self-employed and business, equity and restructuring, and property and portfolio. Each page runs in the same order. It names the situation in the reader's words, answers it plainly, explains how the three tiers of lender read a file, says who it fits and who it doesn't, shows matching funded files and states the honest cost. Then come the check, what happens next and the questions people actually ask.
- Three tiers, three rulebooksPrime, alternative and private, each with what it counts, what it costs and when it's the right route. So a decline reads as one lender's rule rather than a verdict
- Who it does not fitEvery service page says plainly when it is the wrong route, including when a bank would be cheaper
- The price of admissionLender fees, broker fees on private files, appraisals and shorter terms, all written down before anyone applies
- 57 FAQ answers in six groupsMany of them supplied by the brokerage's own team, attached to the services they belong to, and output as FAQPage schema wherever they appear
Four questions, one straight answer, and no name until the end.
The check is the new step between reading and asking. Step one asks about the situation, the goal and the timeline. Step two plays it back with the kind of lender a file like that usually goes to and what that kind of lender usually costs. Only step three asks for a name, and step four confirms what happens next. Its last line closes off the obvious misreading: "This is not an approval and it is not a quote."
- One rule table, two languagesThe read in step two comes from a single table of rules that PHP and JavaScript both use, so the browser's answer and the server's answer can't disagree
- Private by defaultAnswers are kept for the session so the Back button works, but name, phone, email and message are never stored in the browser
- Embedded everywhere, one flowStep one sits on the home, service, town and article pages and hands off to the full flow with the answers and campaign source attached
- Built for the CRMEvery lead is saved in WordPress and raised as a hook for the brokerage's CRM. Spam is caught with a honeypot, not a puzzle, and GA4 records form starts, step views and leads
A recruitment pitch built on the files, not the split.
Brokerages recruit agents with near-identical offers: split, leads, training and licensing support. The recruitment section, "Join The Band", argues something they can't copy. An agent who can only place prime files gives away every decline they take, and here the board shows agents other than the principal funding files under their own names. The team page is written for both readers. A borrower uses it to check the brokerage is real, and an agent uses it to see whether people here get credit for their own work.
- Profiles linked to the boardEach agent's profile lists the funded files they placed. The principal broker's portrait and the team headshots each have their own grade, because they came from three different shoots
- The first call is confidentialNo CV and no application form, just one conversation with the principal broker. An agent won't send a CV to a competitor of their current employer as a first step
- The unflattering part first"What we do not provide": no handed-out leads, no call rota, no promised volume. If a lead pipe is what you want, the page says another brokerage will make you a better offer
- Economics left out on purposeSplit, fees and support aren't on the page until there is a current, documented source, because earnings claims on recruitment pages are a compliance risk
Pages that do the explaining before anyone picks up the phone.
A light theme taken from the brand's own paper palette.
The brand lives on black, but some people read better on a light page. A sun and moon toggle in the header switches every surface, line and piece of text to the paper palette from the brand guidelines, and remembers the choice. Photographs never invert. Any section that sits on a photograph stays dark in both themes, so the art direction holds either way.
- Colour roles, not coloursText, line and surface colours are CSS custom properties, so a component written once works in both themes
- Contrast in bothText meets 4.5:1 in the dark and the light theme, and gold text on light switches to the darkest step of the ramp, as the guidelines require
- Motion with a fallbackSections ease in with a sharp start and a soft landing, nothing bounces, and every animation has a reduced-motion version
A small admin for a busy team, and everything else kept in code.
The client asked for a site they own outright, with no page builder. The full-site theme uses WordPress's own content types and its own meta boxes, with no plugins required. The brokerage's team only ever needs to do three things in the admin: add a funded deal, add a team member and read leads. Everything else, from solutions and borrower pages to FAQs and articles, lives in version-controlled data files that seed the site.
- One content modelSolutions are a single tree, with pillars at the top and services underneath. Deals, agents and borrower types are their own types, and towns are a taxonomy that only appears when a deal uses it
- A seeder that can run twiceThe whole site builds itself from the data files, and running the seeder again changes nothing. A small launch plugin wraps it for the move to live
- A brief, then parallel buildersA written build brief covers the shared APIs, who owns which template and every banned claim. Six template builds ran against one foundation without forking it
- Structured data for a brokerMortgageBroker, FinancialService, Service, OfferCatalog, FAQPage, BlogPosting and BreadcrumbList schema, and no street address, because the brokerage is virtual
- Thumb-first on mobileOn a phone a Check Your Situation bar stays pinned to the bottom of the screen, stepping aside only on the forms themselves, and the agent route stays in the header
The volume goes up on form, not on claim.
Eight ads to the brand guidelines, measured against them.
The brokerage was running six ad graphics from a third party. We replaced them with eight, built to the brand guidelines: five direct replacements, with two self-employed ads merged into one, and three funded-deal cards. Funded-deal cards are a standard format in the guidelines that the original set never used. Each ad speaks to one audience with one idea, and every one is rendered from code, so a change of wording doesn't mean a redraw.
- Gold coverage, measuredThe guidelines cap gold at roughly a tenth of any frame. A script counts the gold pixels: the new layouts run 4.5–7.2%, against 7.3–20.4% for the set they replaced
- One segment, one ideaSelf-employed, declined by a bank, debt consolidation in square and story formats, and licensed agents
- Proof as an adFunded-deal cards for Oshawa, Markham and Sudbury, using the same published figures as the board
A brand on paper, a strategy on record, and a site built to prove it.
These are counts of what was built and delivered. The landing page is what's live at metalmortgage.ca today, and the full site is being prepared for launch, so we aren't publishing traffic, ranking or enquiry figures. We'll add them when there's enough data to report honestly.
