How the run planner
became the meter

Concept

The audience is anyone with a deadline and freight that can't sit in a depot: law firms with settlement packs due at four, workshops dead without a part, florists, e-commerce sellers promising same-day. Courier pricing is usually a black box; this page's argument is the opposite — five honest zone bands radiating from the CBD, a violet run line traced from pickup star to drop star, and a price card that shows the zone maths in full. The whole aesthetic is the depot wall at 7am: a sun-faded laminated metro map, a dispatcher's violet highlighter, run sheets printed and vans nose-out.

Palette

Per the collection's ink/line rule, the violet marks and the green links are split from body ink: copy is set in bitumen (#2C2E30, ~12:1 on paper) with a dimmed #565A5E (~6:1) for secondary text. No other site in the collection marks in violet on a light ground — that's Crowline's slot.

Type

• Archivo (variable, width axis) — display. Set semi-expanded (112–118%) in caps for the masthead and headings: a signwriter's grotesque with road-sign bones, doing the brisk, printed-run-sheet voice.
• Public Sans — body and UI. A government-grade workhorse that stays legible at 14px on a phone in one hand.
• Overpass Mono — zones, ETAs, prices, the run slip. Overpass was drawn from US highway signage; using its mono for road-zone pricing is the joke that isn't a joke.

The signature — Run Planner

The map is a single procedural SVG (460×500): a clipped coastline polygon, a faint street-grid pattern, arterial hint lines, and five zone bands drawn as annulus paths (plus a southern wedge annulus for Peel, because Peel genuinely only exists to the south). Each band is an SVG tap-target carrying role="button", tabindex="0", an explicit aria-label and an Enter/Space handler — and because SVG elements have no .hidden IDL property and no HTMLElement click(), all state is driven through attributes and dispatched MouseEvents.

The run line is generated, not authored: pickup and drop each map to a representative suburb point in their band, the path routes Manhattan-style with 45° corner cuts via a CBD interchange node (couriers radiate through the inner arterials), and the line dash-draws with a travelling head that runs the route on a loop — faster for express, fastest for a direct drive. When the head reaches the drop star, a scan-green POD tick flashes: the delivery, proven. The line uses butt caps so the zero-length dash state can't render a stray dot, holds a 0.8 opacity once drawn (well above the 0.4 never-invisible floor), and the reduced-motion path renders the run complete with the head parked at 65% of the route. First render earns the slow 900ms trace; every subsequent change redraws at 450ms via a firstDraw flag so the planner feels snappy, not laggy.

A live state probe window.__courier carries pickup, drop, service, vehicle, steps, price, ETA and submission state on every interaction.

The pricing model

One meter, said out loud on the card: the map is the meter. The base rate is set purely by the number of zone bands the run crosses; express and direct are flat adders on top of it — never a second meter — and the vehicle is a flat adder chosen by what the load is.

Measured figures (from the running page, verified against an independently reimplemented oracle in the QA harness): rest state Welshpool (inner) → Joondalup (outer), standard van = $69; the same run express = $101; inner → Peel, direct, one-tonner = $209; same-zone standard van = $35, which equals the services grid's "runs from $35" floor. All four match the spec's worked examples exactly — no corrections were needed; the spec's arithmetic was pure anchor maths and it held.

Derived, and declared as derived: the direct-drive ETA is an estimate of 25 min + 15 min per zone step, printed with a "~" hedge because a nonstop drive time is traffic, not a promise. The "door by" clock reads the visitor's real time and, when the computed door time falls outside depot hours (Mon–Fri 6:30am–6pm, Sat 7am–1pm), honestly switches to "next depot day · first van 6:30am" instead of printing a 2am delivery. Each zone maps to a representative suburb for the run line and the booking pre-fill (pickup reps: Perth CBD, Welshpool, Cannington, Midland, Pinjarra; drop reps: Perth CBD, Subiaco, Fremantle, Joondalup, Mandurah) — the real system would geocode the actual suburbs.

Conversion decisions

• Planner beside the hero, not below it — the map shares the first 750px at 1200 wide, so the signature and the value proposition are one glance. The hero's second CTA points into it.
• Two CTAs, one hierarchy: call is primary (violet, solid) because deadline freight is a phone-call trade; "Plan a run" is the self-serve path. On mobile a sticky bar carries both, green for call, violet for plan.
• The planner pre-fills the booking — zones, service, vehicle and price ride along in a summary strip above the form and into the confirmation, so the demo interaction becomes a warmer lead. Suburb fields stop auto-filling the moment the visitor types their own.
• Form fields are the trade's dispatch questions: name, phone (the SMS tracking link's destination — the label says so), pickup suburb, drop suburb, what's moving (it decides vehicle and restraint), ready-time. Local validation, visible errors, and a confirmation that promises a ten-minute call-back — clearly declared a demo, no faked network round-trip.
• Honesty as trust strategy: the express note, the van no-op, the freight refusals, the POD promise and the depot-hours ETA fallback are all conversion copy — a courier that explains its own meter reads as the one that won't invent a fuel levy.

Local SEO we'd implement for the real business

The demo page deliberately ships only WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real courier client, we'd ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Crowline Couriers",
  "description": "Same-day courier runs across the Perth metro",
  "telephone": "+61 8 9000 0275",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Welshpool",
    "addressRegion": "WA",
    "postalCode": "6106",
    "addressCountry": "AU"
  },
  "areaServed": ["Perth", "Joondalup", "Midland", "Rockingham", "Mandurah"],
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "06:30", "closes": "18:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "07:00", "closes": "13:00" }
  ],
  "priceRange": "$35–$209",
  "review": {
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "Verified customer" },
    "reviewBody": "Settlement pack made the 4pm window with eleven minutes showing."
  },
  "aggregateRating": {
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "180"
  }
}
</script>

Plus a Google Business Profile wired to the review flow, suburb-level service pages for the high-intent corridors (CBD legal, Welshpool/Kewdale industrial, Joondalup and Mandurah), and FAQ schema on the real questions above.

What would change for the real client

• Route & dispatch: a Locate2u / vWork-style platform with live driver tracking feeding the "where's my run" page, replacing the demo's simulated head.
• SMS tracking links via Twilio — booked, picked up, delivered, each with the live map link the page promises.
• Barcode scan & photo POD apps in every vehicle, with the POD (photo, timestamp, receiver name) attached to the consignment record and emailed on drop.
• Geotab fleet telematics for the vans — actual ETAs from actual positions, plus chain-of-responsibility evidence.
• Xero invoicing with consignment references, monthly statements for the permanent-run contract book.
• Podium review flow so the POD SMS can become the review request while the delivery is still a good story.
• Real photography of the depot and drivers, real reviews replacing the demo copy, and the booking form posting to the dispatch system instead of confirming locally.

Iteration log