How Spanright Scaffolding was built

Concept

Spanright Scaffolding is a fictional Maddington scaffold hire & erection operator — the kind of outfit a renovator finds when their painter says “get me a scaffold and I’ll start Monday.” The page has one job: get the site measure booked. Its signature, the Scaffold Planner, is a procedural SVG elevation where the frame erects bay by bay against a limestone-render gable as you set length, height and hire weeks, with an honest price card doing the arithmetic in public. The mood is “the frame going up at 8am”: galvanised steel against a pale morning sky, safety-orange mesh, a spirit level riding a ledger.

Palette — argued from the frame

Per the collection’s ink/line rule, both accents got a derived darker ink for text duty; the bright tokens are reserved for lines, fills and marks.

Type

Archivo (700–800) carries the display voice — a wide engineering grotesque whose caps read like stencilled plant markings; the h1 and section heads are its moment. IBM Plex Sans does body and UI work without personality clashes, and IBM Plex Mono owns every number the page commits to — metres, m², weeks, dollars — so the pricing reads like a measured drawing, not marketing.

Techniques — the Scaffold Planner

The planner is a single generated SVG (no libraries, no rasters). Three renderers share helpers: a face renderer that lays out standards on 2.4 m bays and ledgers on 2.0 m lifts (counts derived from the steppers via ceil(length/2.4) × ceil(height/2)), then planks, toe board, guardrails and hatch-patterned orange mesh on the working lift, a diagonal brace every third bay, and drilled wall ties marked on every second standard; an edge protection renderer that draws guardrail posts and rails along both rakes of a gable; and a tower renderer with castors, rungs and a platform. Every member is a <g class="m"> with a per-member animation-delay, so the frame visibly erects bay by bay — a 1.5 s choreography on first load, a ~0.5 s re-erect on interaction, and a settled complete frame under reduced motion. Second-read details: the spirit level riding the lift-one ledger with its green bubble centred, the orange scaftag on the first standard, and the faint morning shadows each standard casts on the render.

A state probe window.__scaffolding exposes job, dimensions, weeks, computed price and form status on every interaction, and the planner pre-fills the enquiry form live — the demo interaction becomes a warmer lead.

Pricing model — anchors, derivations, measurements

Measured rest state: two-storey face, 12 m × 6 m = 72 m² × $75 = $5,400 (erect + dismantle + 4 weeks), extension line +$576/week = 72 × $8. Both figures were measured from the running page against an independently reimplemented oracle in the QA harness — they match the spec’s worked example exactly, no correction needed. The planner’s cheapest output (tower, 1 week, $260) equals the services grid’s tower floor.

Derivations this page adds to the spec, documented so QA has a source of truth:

• Bay length 2.4 m and lift height 2.0 m are drawing constants (standard steel-frame modules); they drive the rendering only, never the price.
• Edge protection inherits the 4-week inclusion from the fixed-scaffold structure (erect + dismantle + 4 weeks, then $5/lm/week) — the spec pinned the rate, minimum and extension meter; the inclusion carry-over is our stated resolution, printed on the card.
• The tower weeks stepper runs 1–12 (fixed scaffold runs 4–12, since 4 weeks are included); towers have no inclusion and the card says so plainly.
• Job chips are full scenario presets — switching job resets length, height and weeks to that job’s preset, so every chip lands on a deterministic, honest card.
• Height and single/two-storey share one meter by design — “height changes the engineering, not the rate; under 4 m it changes who can legally build it” — flatness shipped as a stated pricing position, not an invented gradient.

Controls with no honest meaning are disabled with the reason on the page: the height stepper for edge protection (“prices by roof-edge metres, not wall height”), both size steppers for towers (“a set kit — pick the week count and we bring it”). Faces under 16 m² and edges under 18.75 lm clamp up to their minimums with the clamp stated on-card.

Conversion decisions

• Above the fold at 375px: brand, trade + area value proposition, primary CTA, call button and three trust ticks — the planner follows immediately for the second screen.
• At 1200×750 (the thumbnail): the hero shares the frame with the planner — chips, the erected elevation and the $5,400 price card all intersect the first 750px, asserted in QA.
• Click-to-call: tel: in the header (collapsing to an icon at 375px) plus a fixed mobile call bar with a ≥48px tap target.
• Form fields: name, phone, suburb (required — the callback essentials), job type and planner-fed job details (pre-filled, editable), site access notes optional. Front-end validation with per-field messages; a designed local confirmation (“Thanks — request received… we’d call you back within one business hour”) and a plain statement that nothing was sent — never a faked network round-trip.
• Planner→form handoff: the configured scenario lands in the form as a one-line spec and rides into the confirmation, so the demo enquiry reads like a real, warm lead.

Local SEO we’d implement for the real business

The live demo emits only WebPage schema declaring itself a demonstration — fictional structured data in a real index would be dishonest markup. For a real scaffolding client we would ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Spanright Scaffolding",
  "description": "Scaffold hire & erection across the Perth metro — fixed scaffold, roof edge protection and aluminium tower hire, certified handover on every job.",
  "telephone": "+61-8-9000-0261",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Maddington",
    "addressRegion": "WA",
    "postalCode": "6109",
    "addressCountry": "AU"
  },
  "areaServed": ["Maddington","Gosnells","Thornlie","Canning Vale","Cannington","Perth"],
  "openingHours": "Mo-Fr 06:30-16:30",
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "…" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "…"
  }]
}
</script>

Plus suburb-level service pages, Google Business Profile with real job photos, and review markup fed by an actual review pipeline — never hand-typed.

What would change for the real client

• Assignar — crew and asset scheduling behind the “book a measure” flow, so the quote visit lands in a real run sheet.
• ScaffPlan — 3D scaffold design and engineering; the planner’s SVG becomes a lead-in to real drawings and load calcs.
• SafetyCulture (iAuditor) — the 30-day inspection tags become QR-coded digital inspections the client can actually scan on the standard.
• Geotab — truck tracking feeding honest delivery windows.
• Xero — progress invoicing tied to erect / extension / dismantle milestones.
• Podium — the review flow that turns certified handovers into the real reviews this page fakes politely.

Their photos would replace nothing — the procedural elevation stays, because it quotes; but their reviews, licence numbers and ABN would replace the placeholder-patterned ones.

Iteration log