How the Wideroad page was made

Palette · the limestone yard and the road north

Colour argued from the subject

The workshop at open-roller-door morning: a limestone ground, iron-red for the outback the van is headed toward (it carries every CTA and nothing else), and steel-blue for the van linework and dimension callouts — workshop-drawing blue, not decoration. Body text gets its own chassis-ink token; the accent never sets small type.

Type · road-sign flavour without cosplay

Barlow Condensed + Barlow

Barlow Condensed 600–700 for display — it carries the road-sign flavour honestly (Barlow is drawn from Californian public signage) without becoming a highway-sign pastiche. The typographic moment is the service price set huge inside the road-sign-shaped estimate badge on the van. Barlow is the workhorse: same skeleton, comfortable at 16.5px body, so the page reads as one voice.

Signature · the Service Planner

A check-pass that travels the van

The van is a hand-plotted SVG side profile — drawbar, coupling, gas bottles, solar panel, 12V hatch, wheels, tail light — with eight system callouts on dotted dimension leaders, workshop-drawing style. The selected service defines which systems are covered; a check-pass sweep travels the covered set left-to-right, pulsing an iron-red halo on the active system (opacity floored at 0.55 so the scene is alive at any capture instant) and leaving a green tick behind it. Chips swap the covered set, the tandem toggle draws the second axle, and the price recomputes from the pinned anchors into the speed-sign badge on the van's flank — the number lives inside the artwork, not in a ledger below the fold.

Engineering: every control handler bumps an invalidation token before the state swap, so a mid-sweep animation can never index a stale covered set under rapid-fire clicking. The entrance (0.85s dash draw-in via pathLength="1", then the first ticking pass) runs once; subsequent changes redraw in under 450 ms. The rAF delta is clamped at zero and capped, the loop idles when the tab is hidden, and reduced-motion renders the settled frame: van drawn, all covered systems ticked, one static halo at 0.75. A no-JS visitor gets the fully drawn van — entrance classes are gated on a .js root class.

Honest numbers · pinned anchors

The pricing model

All worked figures are pure anchor arithmetic and every one was measured from the running page against an independently reimplemented oracle: rest state annual + tandem + gas certificate = $680; annual single = $380; overhaul + tandem + at-home = $940; pre-trip + tandem + solar = $270 with the flat statement visible. The grid floor "servicing from $180" equals the planner's cheapest output (a pre-trip alone). The pre-trip tandem toggle is the W20-style honest no-op: it never changes the price, but it draws the axle and the card says why the price holds.

Conversion · why the page is shaped like this

Decisions

Planner in the hero. Most caravan-service enquiries start with "roughly what will it cost?" — so the pricing tool shares the first viewport with the value proposition, and the computed total sits inside the drawing where a thumbnail or a skimming eye can't miss it. Planner → form handoff: "Book this service" writes the configured scenario into the booking message and syncs the service select, so the enquiry arrives pre-qualified. Form fields are only what a workshop actually needs to call back usefully: name, phone, suburb (travel for at-home jobs), van make/length (bearing kits differ), service, and a "heading off when?" date — urgency is the real scheduling axis before school holidays. Confirmation is a designed local panel that promises a call-back within one business day and plainly states no booking was sent — never a fake network round-trip. Click-to-call in the masthead, repeated beside both submit buttons, and in a sticky mobile bar — trade traffic is a phone in one hand.

Local SEO · what we'd implement for the real business

The would-ship schema

This demonstration page carries only WebPage/BreadcrumbList schema naming it a demo — fictional structured data in a real index is dishonest markup. For a real client we'd ship AutoRepair (the LocalBusiness subtype that covers trailer and caravan servicing) with their real NAP, hours, geo and review feed:

{
  "@context": "https://schema.org",
  "@type": "AutoRepair",
  "name": "Wideroad Caravan Services",
  "description": "Caravan servicing, repairs and pre-trip safety checks
    in Bibra Lake, serving the Perth metropolitan area.",
  "url": "https://wideroadcaravans.com.au",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "(real street address)",
    "addressLocality": "Bibra Lake",
    "addressRegion": "WA",
    "postalCode": "6163",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.09, "longitude": 115.82 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:30", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "12:00" }
  ],
  "areaServed": { "@type": "City", "name": "Perth" },
  "priceRange": "$180–$940",
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "(real count)" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "(real customer)" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "(pulled from their Google Business Profile feed)"
  }]
}

Plus suburb-level service pages (caravan servicing Baldivis / Rockingham / Joondalup), a Google Business Profile tuned for "caravan service near me", and FAQ schema off the real questions their phone rings with.

For the real client · what would change

Swapping the demo parts for their business

The booking form would post into their workshop system — Workshop Software or ServiceM8 both handle caravan workshops well (job cards, digital checklists that become the "signed checklist — you see what we saw" promise, photo attachments from the hoist). Invoicing flows to MYOB or Xero. Automated SMS reminders via Podium (or ServiceM8's own messaging) close the loop the trade always drops: "your van's 12 months since its last service — school holidays start April 10, want a slot?" — annual servicing is a literally recurring revenue model that almost no caravan workshop actually schedules. Their real reviews replace the demo copy via a Google reviews feed, and the planner's anchors become their live rate card, maintained in one JSON block.

Process · build, then three passes

Iteration log