How First Gear was made

Concept

Driver training sells calm, not horsepower. The whole page is designed to feel like the instructor who never raises their voice: a quiet chalk-sky morning street, soft-cornered road-sign type, and prices said plainly enough that a nervous 16-year-old (or their parent, who is really the buyer) can see the whole cost of getting licensed before anyone calls anyone.

The signature Hours Planner is the conversion engine: a 0–50 slider fills a 50-cell log-book grid, a suburban route map extends from carpark laps through lane changes to the freeway merge and test routes as the learner's stage advances, and a mono recommendation card names the honest package for that stage — including, prominently, the WA fact this trade trades on: an instructor hour counts 1:1 in the log book here. No 3-for-1 multiplier. A school that says that plainly earns the booking; one that lets you assume eastern-states arithmetic doesn't deserve it.

Palette — learner-laps suburban morning

Argued from a quiet Cannington backstreet at 9am: chalk sky, fresh bitumen, the L-plate in the window, and the instructor's calm. Deliberately distinct from skipbins' industrial gal-yard yellow — this yellow always reads as an L-plate, often literally framed as one (the favicon, the wordmark, the map base marker, even the slider thumb).

Type

The Hours Planner — technique

The progress board is one hand-built SVG (640×460) in two halves. The top is a 50-cell log-book grid — ten columns by five rows, cells built in JS and styled ONLY via CSS classes (never presentation attributes, the W16/W17 discipline), so the yellow fill transitions cleanly as the slider climbs. The bottom is a suburban route map: a carpark with a practice loop, a two-lane street with a lane-change weave, an on-ramp merging onto a stylised Roe Hwy, and a dashed test-route branch past the (real) Cannington DoT centre.

• Route reveal: each stage's segment is a yellow path with stroke-dasharray = pathLength drawn in by transitioning stroke-dashoffset — butt caps, so there's no stray round-cap dot at zero drawn length (LEARNINGS W15). Grey dashed ghost paths keep the whole map readable at every stage, so "ahead" is always visible.
• The car marker: a top-view dual-control car with an L-plate on the roof. Its position is an outer-group transform ATTRIBUTE set from JS; the front indicator blinks via a CSS keyframe on an inner circle that sets no competing attribute — attribute state and CSS animation never share an element (W16/W17). The blink floor is opacity 0.5, so the signature's live pixel never disappears at any capture instant (W18).
• In-board readout: the map's corner plate carries the live plan ("BUILDING · $910") so the 1200×750 thumbnail sells the meter, not just the art.
• Second-read details: jacaranda shade on the street edge; slide to 50 and the grid stamps "50 IN THE BOOK — A FLOOR, NOT A FINISH LINE" — the honest-hours promise rendered as a rubber stamp.
• Reduced motion: segment transitions are disabled and the rest state renders fully settled — 15 cells filled, route drawn to lane changes, blinker steady. No canvas or WebGL anywhere; animation is CSS-only and cheap on a 4G phone.

The planner exposes window.__drivingschool (hours, stage, transmission, plan items, total, single-lesson option, cells filled, form status) as the QA state probe, and every interaction pre-fills the booking form's transmission, starting-point and notes fields — the estimator becomes a warmer lead (the W12 handoff contract). Pre-fill fires only on interaction, so a fresh load still fails an empty submit on all seven fields (W15).

Pricing model — shape and derivation

Pinned anchors from the spec: single lesson $80 (60 minutes, pick-up and drop-off included, no call-out fee — the single lesson IS the pinned minimum), 5-pack $380 ($76/lesson), 10-pack $740 ($74/lesson), manual +$5/lesson (packs +$25/+$50), practical test package $170. Stage logic: 0–10 h recommends the 5-pack, 10–35 h the building plan, 35–50 h the test-ready plan.

Derived (not spec-pinned), documented per W15: the spec's stage list names the 10-pack for the building stage, but its own pinned rest figure ($910) is 10-pack PLUS test package — so the building recommendation includes the test package, itemised on-card, on the logic that ten lessons from mid-book lands you at the test window with a date worth booking. The test package is deliberately flat across transmission — test day is one drive either way; the +$5 covers pack-lesson clutch wear — shipped as a stated flatness, not an invented gradient. Stage boundaries are half-open: 10 h is building, 35 h is test-ready. All figures were verified against an independently reimplemented oracle at rest and across eleven driven scenarios, including both boundaries and the manual pack arithmetic.

Cheapest-output contract (W12): at the first-lessons stage the card visibly offers the single lesson at $80 — "no lock-in, no call-out fee" — which equals the services grid's "lessons from $80" floor. The page never argues with itself.

Conversion decisions

• Two buyers, one CTA: the learner browses, the parent pays. The hero CTA prices the commitment ("Book a first lesson — $80") so the parent's first question is answered before the first click; the planner then prices the whole journey.
• Form fields: name, phone, pick-up suburb, transmission, a type=date preferred first lesson (min = today, plain ISO — the wave harness contract), a "where are you starting from?" line, and notes. The starting-point field exists because instructor matching is the product — a nervous adult returner and a 16-year-old need different instructors, and asking early says so.
• Empty submit flags all seven fields with styled errors; filled submit shows a local "Thanks — received" confirmation that plainly says nothing was sent and a real site would call back within one business day. Never a fake network round-trip.
• 375px first: value prop, $80 CTA and the licence trust line all inside the first screen; the desktop ghost CTA is dropped on mobile in favour of the sticky bar's "Plan hours" twin; every tap target ≥44px.
• Honesty as positioning: the 1:1 log-book fact, "the log book is a floor, not a finish line", the DoT-fee-is-yours line and the "some drivers need two lessons, not twenty" conversion copy all say the quiet part out loud — for a trade selling trust to parents, the honest sentence is the highest-converting sentence on the page.

Local SEO we'd implement for the real business

This demo ships only WebPage schema naming itself a demonstration — fictional LocalBusiness/Review markup in a real index would be dishonest. For a real school we'd ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "additionalType": "https://en.wikipedia.org/wiki/Driving_school",
  "name": "Real Driving School",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Cannington",
    "addressRegion": "WA",
    "postalCode": "6107",
    "addressCountry": "AU"
  },
  "areaServed": "Perth south-east corridor",
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],
    "opens": "07:00", "closes": "19:00"
  },
  "priceRange": "$$",
  "makesOffer": [{
    "@type": "Offer",
    "name": "Driving lesson (60 min)",
    "price": "80", "priceCurrency": "AUD"
  }],
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "214"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Parent" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Fed from the live Google reviews profile."
  }]
}
</script>

Plus a Google Business Profile wired to the review flow, suburb-level pages for "driving lessons [suburb]" across the corridor, and the test-centre head terms ("driving test Cannington") — the queries this trade actually wins on.

What would change for the real client

• Lesson booking & instructor diary with pick-up zones — the planner's "book this plan" lands on a live calendar showing which instructor covers which suburbs on which afternoons.
• Square pre-paid lesson packs — the 5- and 10-pack cards become checkout, with the balance visible to the learner and the parent.
• SMS lesson reminders (Twilio) — the single highest no-show killer in this industry, sent the evening before with the pick-up spot.
• Digital progress cards shared with parents — the planner's stage logic becomes a real record: what was covered, what to practise before next lesson, hours banked.
• Xero — packs and test packages sync as invoices; GST on the school's side, receipts with the instructor's DI number on the parent's.
• Podium review flow — an SMS after the pass photo, feeding the real reviews that replace this page's demo copy.

Iteration log