How this demo
was built

Concept

The direction is the yard at 7am: galvanised bins in ranked rows, the hook truck idling, gloves on the rail. No rubbish-pile imagery anywhere — the product being sold is the empty space after. Every price on the page is the whole price (7-day hire, delivered and picked up), and the signature Bin Picker exists to put an honest number on screen before the phone call, because in this trade the quote is the trust signal.

Palette

The spec's line/mark accents (skip yellow, gal blue-grey) both fail 4.5:1 as small text on concrete, so each got a derived ink sibling — the W2/W5 ink/line split applied at build time, not patched after.

Type

• Anton — display. One-weight industrial caps, the stencilled bin-side number writ large. The four-line hero alternates tyre black and yellow ink with no punctuation at any line end (the W19 phantom-diacritic rule at tight leading).
• Asap — body and UI. A workhorse with enough roundness to keep the industrial register from going cold.
• Space Mono — cubic metres, days, dollars. Everything measured or invoiced renders in mono, so the honest numbers read as a system, not decoration.

The Bin Picker

The signature is a fully procedural SVG: a hook-lift truck drawn in tyre black on the yard slab, carrying a skip whose geometry is computed from the selected size. Five size chips map to real-world dimensions at a fixed scale (1 m ≈ 56 px): the 2 m³ bin draws 51 px tall against a 1.75 m figure at 98 px, the 8 m³ at 96 px — so the person-for-scale comparison is honest, not decorative. Waste chips recolour the fill band drawn level with the rim (the level-load rule is stated on the price card), a hire stepper runs 7–21 days, and the mono price card recomputes from a single pricing object. The hook arm's path is recomputed per size so the truck actually holds the bin it's carrying, and the skip's stencil (TL-02…TL-08) tracks the size — a second-read detail beside the gloves left on the chassis rail.

The rest state is mid-demonstration per the wave rule: 4 m³, mixed C&D, 7 days, $420 showing — hard-coded into the SVG markup and reproduced identically by the JS draw function (the QA harness asserts the idempotency). Selecting a bin then "Book this bin" pre-fills size, waste, days and delivery date into the booking form: the demo interaction becomes the warm lead.

Honest disables

Clean fill disables the 6 and 8 m³ chips with the reason on the page — a big bin full of sand is over the truck's legal lift, so 4 m³ is the honest maximum. If you're on 8 m³ when you pick clean fill, the picker clamps to 4 m³ and says why. The booking form mirrors the same rule on its own selects, so neither surface can compose a dishonest order.

Pricing model

Shape of the model: the general matrix is pinned; green waste is a flat −$20 at every size (clean green is cheaper to tip, and the discount is the tip saving, not a percentage game); mixed C&D is a flat +$70 (sorting labour plus C&D tip fees are roughly constant per load); clean fill has its own matrix and stops at 4 m³ (legal lift). Extended hire is linear: +$10/day beyond the included 7, capped at 21 days. Every price above is the job minimum — there is no separate delivery line, which is itself a pricing statement. The $/m³ curve falls from $120 (2 m³) to $71 (8 m³) because the truck movement is the fixed cost being amortised.

Measured worked examples (from the running page, asserted against an independently reimplemented oracle): rest 4 m³ mixed = $350 + $70 = $420; cheapest output 2 m³ green = $220, equal to the services grid's "green waste from $220" floor; 8 m³ general at 14 days = $570 + 7 × $10 = $640; 4 m³ clean fill at 14 days = $450. The FAQ's two-bin claim is the same model: 2 m³ green + 2 m³ general = $460 against $530 for one 6 m³ mixed.

Trailer-load equivalence

A 6×4 box trailer has a 1.8 × 1.2 m bed; a legal level load runs about 0.3 m deep, giving ≈0.65–0.7 m³ per trip — we use 0.7 m³. Dividing each bin by 0.7 and rounding to how a person actually talks: 2 m³ ≈ 3 loads (2.86), 3 m³ ≈ 4 (4.3), 4 m³ ≈ 6 (5.7), 6 m³ ≈ 8–9 (8.6), 8 m³ ≈ 11 (11.4). The same figures appear in the picker's scale line, the FAQ and the form's size options — one source of truth, three surfaces.

Conversion decisions

• Picker in the hero, sharing the thumbnail. The signature's bounding box starts at y≈125 at 1200 wide, so the 1200×750 capture shows the truck, the chips and the top of the price card — the demo sells itself in the preview.
• Call and book, in that order. Header tel: link, yellow call CTA first in the hero, and a fixed mobile bar (58 px tap targets) with Call now leading — skip hire is still a phone trade; the form is for people planning ahead, which is why it leads with a delivery-date field.
• "What's going in it?" is a required form field. It reads like admin but it's prohibited-load screening — the one question that saves a wasted truck roll, asked before the driver arrives.
• The asbestos band is unmissable by design — tyre-black panel, yellow rule, no softening. It routes to "your council or WorkSafe WA" in words; a fictional page must never invent a hotline.
• Local confirmation, honestly local. Submit renders a designed confirmation ("Thanks — request received, we'd call you before 5pm…") with the priced summary; no fake network delay, and the demo status is stated inside the confirmation itself.

Local SEO we'd implement for the real business

This demo page carries only WebPage schema declaring itself a demonstration — fictional structured data in a real index is dishonest markup. For a real operator we'd ship LocalBusiness + Review schema fed by their actual details and review stream:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "«Real Business Name» Skip Bins",
  "telephone": "«real number»",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Bibra Lake",
    "addressRegion": "WA",
    "postalCode": "6163",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.09, "longitude": 115.82 },
  "areaServed": "Perth metropolitan area",
  "openingHours": ["Mo-Fr 06:30-16:30", "Sa 07:00-12:00"],
  "priceRange": "$220-$640",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "«from live review feed»",
    "reviewCount": "«from live review feed»"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "«verified customer»" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "«pulled from Google / Podium, with consent»"
  }]
}
</script>

Plus suburb-level service pages (skip bin hire Fremantle / Cockburn / Canning Vale…), a bin-size guide targeting "what size skip bin do I need", and Google Business Profile posts driven off the run sheet.

What would change for the real client

• Waste Logics — the booking form writes straight into their booking & run-sheet system, with live date availability instead of a free date field.
• Geotab — truck tracking feeding an honest "your bin is 3 stops away" SMS on delivery morning.
• Square — card payment at booking or tap-to-pay on the driver's phone; the picker's price becomes the actual charge.
• Xero — invoices and reconciliation off the same booking record, no re-keying.
• Docket OCR — transfer-station dockets photographed and digitised, so the "two-thirds recovered" claim becomes a live, auditable number on the page.
• Podium — the review request rides the pickup confirmation; the demo's written reviews become a real feed (and the schema above goes live).

Iteration log

Final tally: 39/39 harness checks green · signature bbox top ≈125 px at 1200 wide · rest card $420 == oracle