Nova Home Loans · Build

Nova Home Loans

Nova approved one design: a homepage. What got built from it is not a homepage. It is a kit of parts that assembles that page and every page after it, so the second page costs a fraction of the first. This is a live document covering work still underway, and it says plainly what has not been done.

17Reusable blocksfrom one approved page

4Page types that can use all 17no block is page specific

0Plugins to maintainno theme, no PHP

RoleDesign system and build

SectorMortgage lending

Stack

Next.jsSanityTypeScript

The decision that shaped everything

A design handoff invites you to build the page you were given. Do that and the next page is a fresh negotiation: which parts can be salvaged, what gets rebuilt, why the spacing is subtly different this time.

The homepage was instead read as twelve independent sections that happen to be stacked in that order. Each became a block an editor can place, on any page, in any order. The homepage is now one arrangement of the kit rather than a thing that was built.

The kit currently holds 17 block types, the twelve the homepage uses plus five the boilerplate contributed for blog, calculator and form layouts. All 17 are available on all four content types: homepage, standard page, loan officer profile and blog post. That is one shared list imported by every document schema, not four lists that must be kept in agreement.

What exists today

Twelve blocks, twelve distinct types: the homepage repeats nothing. Alongside them are eight content types, six mortgage calculators, the form builder carried over from the boilerplate, and the loan officer profiles with their own routes.

The starting point was Kaleidico's mortgage boilerplate, stripped to its useful parts. Loan officer directories, team pages, product pages, guides and campaign landing pages were removed rather than left dormant, on the grounds that an unused content type is a thing an editor has to ignore every day and a thing a developer has to keep working.

12Blocks on the approved homepage

50Design tokens

30Routes building

Matching the design

Figma gives pixel values. Pasting them into code is the fastest way to build something that is correct at exactly one screen width. Three separate bugs on this project came from precisely that, each one a measurement lifted from a 1440px frame into a container that was not 1440px wide, so the offsets held and the proportions did not.

Positions are now expressed as percentages of the frame they were measured in. A panel is not 610px wide, it is 42.4% of the viewport. An image inset is not 60px, it is 4.1667% of the container width, which keeps it proportional when the container is 1024px instead of 1440.

Letter spacinga worked exampleFigma reports it as a percentage, not pixels. Read as pixels, every uppercase label on the site would have been roughly six times too wide. Caught by checking one known value against its rendered width.

TypographyA responsive scale for H1 to H6 plus named utilities, so a heading level and its visual size can differ where the design calls for it without the markup lying about the document structure.

Colour50 tokens. Contrast was checked rather than assumed: the brand bronze as a primary surface failed on 16 counts, so indigo carries surfaces and bronze is an accent.

Consent that blocks

Nova's consent behaviour was specified by an existing WordPress plugin. Rather than approximate it, the plugin's logic was read and ported: the same categories, the same defaults, the same cookie, the same treatment of a returning visitor.

It emits all seven Google Consent Mode signals, and it emits them before any tag loads, which is the part most implementations get wrong. A consent signal sent after the tag has already fired is a formality. It also honours Global Privacy Control at the browser level, so a visitor whose browser says no is refused even if something later presses Accept on their behalf.

Denied by defaultNothing non-essential runs until the visitor chooses.

Browser signal bindsA browser-level opt-out stays in force regardless of what the banner is told afterwards.

Live inspector?inspect=1An on-page panel that reports what is actually running against what was consented to, and flags a category as still active if scripts or cookies survive in it. Evidence rather than assertion.

What the editor controls

The test of a block system is whether the client can use it without calling anyone. Every block exposes its content, and images expose their framing.

Image framingAn editor sets the focal point and crop in the editor and the site honours it. This sounds automatic and is not: the usual approach silently discards it, and did here until it was found and fixed.

FormsThe boilerplate's form builder, kept intact: conditional fields, multi-step with branching, real address and contact verification, and per-field webhook mapping.

CalculatorsSix kinds, placeable as a block on any page: affordability, refinance, HELOC, FHA, DSCR and buydown.

Loan officersA content type with its own profile routes, and a slider block that either names specific people or falls back to whoever is flagged as featured.

RedirectsManaged from the editor, so an address can be moved without a deployment.

A note on the review process

The corrections on this build have mostly not been matters of taste. They have been geometry, and the useful ones were found by measuring the rendered page in a browser and comparing the numbers to the design, rather than by looking at a screenshot and forming an impression.

The distinction earns its keep. An overlapping card that looked wrong was diagnosed by eye as a cropping problem and was not one: it was a panel 41.4% wide where the design said 42.4%, from a percentage taken against the image rather than the viewport. Adjusting the crop could never have fixed it. Three fixes on this project were verified by reading back the rendered dimensions, including deliberately breaking them first with eight times the copy to confirm the layout degrades safely.

What is not claimed

Because a case study that only reports wins is not worth reading.

No performance figures are claimed. Nothing has launched, so there is no traffic, no Search Console history and no speed measurement worth reporting. Any number quoted now would be a lab result on a prototype.
The typefaces are not licensed yet. The design calls for fonts the client is purchasing. Everything currently renders in fallbacks, so the type on screen is correct in size, spacing and weight but not yet in face.
The photography is placeholder. Stock images stand in for art direction that has not happened. Several are the wrong shape for the slot they sit in and will crop badly until replaced, which is expected at this stage rather than a defect.
Only the homepage is approved. Interior page designs have not been delivered. The block kit is built to absorb them, which is the claim being made, but it is a claim until a second design arrives and is assembled without new components.
One navigation state is unbuilt. The scrolled variant of the header, the last of five states in the design, is outstanding.