How Latitude Lane was built

Site 219 of the Generative Assets collection — the fourth of the Industry Demos: a conversion-focused landing page for a fictional Perth mortgage & finance broking practice. Every visual is procedural; every dollar figure is computed by the page itself.

Concept

Latitude Lane Finance Co. is a fictional Subiaco broker for first-home buyers and refinancers who find banks opaque. The page has one job: book a free 15-minute call. The design argument is that on a finance page, honesty is the aesthetic — ledger paper, a banker's bottle-green, no hype, rates plainly labelled illustrative, and a fee section that explains exactly how brokers are paid.

Palette

Argued from ledger and trust, not defaults. Brass is a line-and-mark token only — it never sets body text (it fails 4.5:1 as small type on paper, so copy stays in the greens).

Type

Source Serif 4 carries the display and longform — an editorial serif that reads like considered advice rather than a pitch. IBM Plex Sans does the working parts: labels, forms, figures (tabular numerals in every readout). The typographic bravery is restraint plus one italic — straight — sitting inside the headline, and the big serif numerals in the worked-example card.

Techniques & the signature

The Repayment Visualiser is a canvas-2D chart driven by three keyboard-accessible sliders (loan, rate, term). It computes standard principal-and-interest amortisation — M = P·i / (1−(1+i)−n) — and draws the balance curve at the chosen rate, a dashed brass curve at 0.50% lower, the shaded gap between them, and a measured annotation at the month of maximum divergence. Every displayed figure (monthly repayment, difference, total interest saved) comes from that live code path, never from copy. Slider changes tween the curves over 340ms (cubic ease-out); prefers-reduced-motion renders instantly. A pointer probe reads out year-by-year balances on hover; a static HTML table stands in when canvas is unavailable, guarded by [hidden]{display:none !important}.

Everything else is procedural too: the Perth service-area map is hand-plotted SVG (coastline, Swan River, twelve named suburbs, a dashed brass reach-ring centred on the Subiaco office), the hero's worked-example card draws its cumulative-interest curves from the same amortisation functions, and all iconography is inline stroke SVG in the two inks.

Conversion decisions

• Above the fold at 375px: name + trade + area (the h1's eyebrow), value proposition, "Book a free 15-minute call", and a trust line — all sized to clear the sticky bar, not just the viewport edge.
• Call paths: tel: link in the header, and a two-button sticky bar (call / book) on mobile with 56px targets. A broker's client books rather than emergencies, so "book" gets equal weight with "call" — unlike the trade demos.
• Form fields: name, phone, suburb, and a four-option goal select (first home / refinance / invest / other) — the minimum a broker needs to make the first call useful, and nothing that feels like a credit application. Validation is inline per field; the confirmation is instant and local, and says plainly that nothing was sent.
• The signature sells the call, not itself: the visualiser's closing figure ("interest saved") sits in a bottle-green tile beside a disclaimer that a real comparison includes fees and circumstances — "that's the 15-minute call."
• Fee honesty as trust: "broker fee $0 — lender-paid, disclosed" appears in the hero trust line, the services grid, a dedicated explainer band, and the FAQ's first answer, including typical upfront/trail ranges and the Best Interests Duty.

Local SEO we'd implement for the real business

This demo deliberately ships no LocalBusiness, Review, or AggregateRating structured data — fictional entities don't belong in a real search index; the page carries only WebPage schema naming itself a demonstration. For a real broking client we would ship:

<!-- real client only — never with fictional data -->
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": ["FinancialService", "LocalBusiness"],
  "name": "«Client trading name»",
  "url": "https://«domain»/",
  "telephone": "+61 8 «real number»",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "«street»",
    "addressLocality": "Subiaco",
    "addressRegion": "WA",
    "postalCode": "6008",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates",
           "latitude": -31.95, "longitude": 115.83 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday",
                  "Thursday","Friday"],
    "opens": "08:30", "closes": "17:30"
  }],
  "areaServed": "Perth WA",
  "memberOf": { "@type": "Organization",
                "name": "MFAA" },
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "«from live review feed»",
    "reviewCount": "«count»" },
  "review": [{ "@type": "Review",
    "author": { "@type": "Person", "name": "«real client»" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "«verified review text»" }]
}
</script>

Plus the usual: Google Business Profile linkage, suburb-intent FAQ markup, and per-service landing pages once the single-pager earns them.

What changes for the real client

• CRM: the enquiry form posts into Mercury or Salestrekker (the aggregator CRMs brokers actually run), tagged by goal, with SMS acknowledgement via their workflows.
• Fact-find: the "book a call" flow hands off to the broker's hosted fact-find (Mercury's online forms or an equivalent), so the first call starts informed.
• Booking: a Calendly-style scheduler (or the CRM's native booking) replaces the call-back promise with a picked slot.
• Rates: the visualiser's illustrative rates swap for a maintained feed from the lender panel, with the same "comparison rates and fees apply" honesty rails.
• Compliance: real Credit Representative and ACL numbers, the aggregator's required disclosures, and a review pass against ASIC's advertising guidance — the demo's disclaimer placement is designed so those slot straight in.
• Reviews: demo quotes replaced by a live Google-reviews feed, which then legitimately feeds the AggregateRating schema above.

Iteration log