How Straightline Panel & Paint was made

Concept

Straightline Panel & Paint is a fictional smash repairer in Wangara, serving Perth's northern corridor — the audience is a not-at-fault driver holding a claim number, a car-park dent victim deciding whether to claim, and fleet operators with sign-written utes. The page has one job: get a photo estimate or an assessment booked. The art direction is the spray booth at noon — craft under even light, zero crash-scene drama; the wreck is the past, the page is about the repair.

Palette — argued from the booth

Type

• Saira Semi Condensed (display) — the condensed capitals of a workshop hoarding. The hero's three-line stack ("Straight lines. Matched colour. Like it never happened.") is the page's one moment of typographic bravery.
• Karla (body/UI) — a warm workhorse grotesque that stays legible at 16px on a phone in a car park.
• Overpass Mono — panel codes, price bands, hours, the booth stencils. Everything that would be lettered on a job card is set in mono.

Techniques

Everything is procedural: the sedan, the booth, the map and every icon are inline SVG; the light cones and wall are layered gradients; motion is CSS transitions gated on document.fonts.ready with a no-JS fallback and a full reduced-motion path. No canvas, no libraries — a conversion page for a 4G phone.

The signature: the Damage Mapper

A hand-plotted sedan side profile (920×340 viewBox) carries eight tappable panel paths — each with role="button", tabindex="0", aria-pressed and a keydown handler that dispatches a real MouseEvent (SVG elements have no .click()). A transparent 14px stroke widens each hit area for thumbs. Damage renders on the selected panel into a layer clipped by that panel's own path via <clipPath><use>: scuffs are hatched strokes, a dent is a radial-gradient shadow with a highlight arc, a crease is a butt-capped line pair along the swage, and "smashed" builds crumple facets plus radiating crack lines. Respray severities also tint the neighbouring panels in dashed primer — the blend zone, which is the trade's honest answer to "why does one panel quote three surfaces". A booth job-tag (PNL 03 · FRONT GUARD) tracks the selection — the second-read detail. Every selection pre-fills the enquiry form with panel, severity, payment mode and the current band, and updates the window.__panelbeater state probe.

The pricing model — derivation

The spec pinned the severity "from" anchors; the panel factor table is derived here and documented so QA has a source of truth. Private mode computes band = severity base × panel factor, rounded to the nearest $10. Insurance mode disables the price output with the on-page reason that the assessor sets the figure — a disabled control with a reason beats a dishonest number.

Severity base bands (steel panels)

Panel factors

Bumpers (plastic substrate — override table)

Measured worked example (rest state): front guard × crease = $580×1.07 = $620.60 → $620; $730×1.07 = $781.10 → $780. The spec's ≈$620–$780 hypothesis measured out exactly under the derived factors — shipped as $620 – $780. The model's cheapest output (scuff × factor 1.00 = $150) equals the services grid's "from $150" buffing floor, and the $180 / $450 / $580 / $980 grid anchors are each the model's own minima for their scenario — the page never argues with itself. Blend honesty is stated where it applies: a resprayed steel panel quotes three surfaces; a bumper doesn't.

Conversion decisions

• Mapper in the hero. At desktop the Damage Mapper is the hero's right column, mid-demonstration at rest (front guard, crease, private, $620–$780 showing) — the "that could be my site" moment happens in the first viewport, and the estimate card's CTA hands straight into the form.
• Private/insurance toggle up front because "repair or claim?" is the real first question — the FAQ's excess-vs-range maths backs it.
• Form fields: name, phone, suburb, vehicle make/model (parts pricing), optional claim number, and a description that the mapper pre-fills — "photos help" framing because photo estimates are how this trade actually triages. Confirmation is local, instant, and clearly a demo: "Thanks — that's received … we'd call you back within the hour."
• Sticky mobile bar pairs Call with Photo estimate — a smash customer is standing next to the damage with a phone in hand.
• Choice-of-repairer honesty gets its own banner: it's the single most valuable thing a WA driver doesn't know, and saying it plainly is the trust play.

Local SEO we'd implement for the real business

This demonstration deliberately ships only WebPage schema naming it a demo — fictional structured data in a real index is dishonest markup. A real Straightline would ship LocalBusiness + Review schema like this:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "AutoBodyShop",
  "name": "Straightline Panel & Paint",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "[real street address]",
    "addressLocality": "Wangara",
    "addressRegion": "WA",
    "postalCode": "6065",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.79, "longitude": 115.83 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:30", "closes": "17:00"
  }],
  "areaServed": ["Wangara","Landsdale","Madeley","Darch","Wanneroo","Joondalup"],
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "[real customer]" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "[real review, with permission]"
  }],
  "aggregateRating": {
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "[real count]"
  }
}
</script>

What would change for the real client

• Estimage — assessor quoting straight from the photo-estimate form, so the claim path on the page maps to the shop's actual workflow.
• PartsCheck — parts procurement feeding honest lead-time answers into the "how long" conversation.
• iBodyShop — shop management: bookings, courtesy car allocation, job status SMS.
• PPG colour retrieval — the spectro story on the page is their real mixing bench.
• Xero for invoicing, Podium for the review feed that replaces this page's demo copy.
• Photo upload on the form, their real licence numbers, their real before/afters shot in their own booth.

Iteration log