How Warden Fire Services was made

The concept

Warden Fire Services tests and tags fire equipment for cafés, workshops, offices and strata blocks across Perth. Its customers' real pain isn't the wrench — it's remembering the six-monthly cadence AS 1851 demands, so the page's single job is a servicing-schedule enquiry, and the signature sells the memory: an annual dial that plans the year's two tagged visits and prices them live, itemised per asset.

It's the wave's B2B compliance site and the strongest Sapience Analytics story of the five — the deliverable a real client would buy is the reminder system as much as the servicing, which is why the ledger carries "logbook, register & reminders" as its own line at $0, deliberately.

Palette — argued from the service tag and the placard

The direction is compliance clinical — the page should feel like a well-kept logbook: ruled (the hero's 28px baseline ruling), dated, stamped. Red is spent only where a fire trade earns it; the ink/line token split keeps it off text entirely.

Type

IBM Plex Sans Condensed carries the display — standards-document neutrality with placard-caps confidence; the AS 1851 service months (JAN · JUL) are set in it as tag stamps around the dial, which is the page's typographic moment. IBM Plex Sans does the body work: legible at 16px on a phone, tabular numerals for every ledger figure.

The Compliance Dial — how it works

The dial is one runtime-built SVG. Month ticks and the JAN/JUL tag stamps are generated from day-of-year fractions (frac × 360° − 90°); the swept arc is a circle with pathLength="100" whose stroke-dasharray is plain percentage arithmetic — the year runs top-clockwise from January 1, and the rest state sweeps to mid-May (36.99 of 100), through the January service dot, with a red-pennant flag planted on the July dot and pulsing between opacity 0.58 and 1 — a never-invisible floor, so any thumbnail instant catches it alive.

Site-preset chips (café / workshop / office / strata) set the four asset steppers, which drive the dial's centre readout, the mini asset shelf, and the itemised ledger. Every handler bumps an animation token before swapping state, so a rapid-fire chip sequence can never leave a stale rAF closure painting a dead scene; the sweep runs 1.2s on first draw and 450ms on every subsequent change via a firstDraw flag. Reduced motion paints the settled frame immediately and kills the pulse. The chosen preset and counts pre-fill the enquiry form, so the demo interaction becomes a warmer lead.

The maths is deliberately checkable: window.__firesafety exposes the live state, and the QA harness re-implements the pricing model independently and asserts the rendered DOM figures against it for all four presets, the stepper floor, and two rapid-fire bursts.

Pinned pricing anchors

Annual = 2 × the visit total ("two tagged visits a year" — all four asset classes are six-monthly under AS 1851). Asset floor: minimum 1 extinguisher, with the reason shown on the disabled control. All figures are whole-dollar by construction.

Every figure above was measured from the running page and cross-checked against an independently re-implemented oracle in the QA harness. The services grid's "from $322 a year" equals the one-extinguisher floor — the estimator's cheapest output and the grid floor agree by construction.

Conversion decisions

• The dial lives in the hero. At 1200×750 — the collection's thumbnail viewport — the signature must share the frame with the value proposition, so the hero is a two-column grid: promise and CTAs left, the dial card right, its bounding box inside the first 750px.
• 375px first. The masthead holds two items (wordmark + schedule CTA; the phone moves to the sticky bar), the h1, primary CTA and trust ticks all land above the fold, and a fixed call/quote bar rides the bottom edge with 54px tap targets.
• The form asks for what a scheduler needs — name, business, phone, suburb (for run planning), site type, rough asset counts — and the dial has already filled the last two in. Prefill stops the moment the visitor edits the field.
• The confirmation is a designed local state. Hidden on load and on an invalid submit, shown only after a valid one, and it says plainly that nothing left the browser — never a faked network round-trip. The callback promise ("one business day") also appears as static copy beside the form, which is honest conversion writing, not the confirmation.
• The $0 line is the pitch. "Logbook, register & reminders — included · $0" sits in every ledger render because the reminder system is what a compliance customer is actually buying.
• Real safety numbers stay real. The only emergency reference on the page is 000. The fictional business's own number uses the reserved (08) 9000 0297 pattern, and licence/ABN strings are visibly placeholders.

Local SEO we'd implement for the real business

The demo page carries only WebPage/WebSite structured data naming it a demonstration — fictional business schema in a real search index would be dishonest markup. For a real fire servicing client, this is the JSON-LD we'd ship, populated with their verified details and genuine review feed:

{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Warden Fire Services",
  "description": "Fire equipment testing, tagging and logbook servicing
    to AS 1851 across the Perth metropolitan area.",
  "url": "https://www.wardenfireservices.com.au",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Unit X, XX Example Way",
    "addressLocality": "Bibra Lake",
    "addressRegion": "WA",
    "postalCode": "6163",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.096, "longitude": 115.815 },
  "areaServed": "Perth metropolitan area",
  "openingHoursSpecification": {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:00", "closes": "16:00"
  },
  "priceRange": "$$",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "— from the live review feed —" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "— genuine customer reviews only —"
  }]
}

Why ProfessionalService: a compliance servicing firm is a professional-services organisation, not a construction trade — schema.org has no fire-protection subtype, so the honest pick is the LocalBusiness-family parent that matches what the business is. Rating and review nodes ship only when fed by the client's real, verifiable review source.

What changes for the real client

• Their asset register, live. The dial's counts would read from the client's fire-maintenance platform — Uptick and FireMate are the WA fire-servicing standards, simPRO and AroFlo the generalist alternatives — so "your year" is their actual due dates, not an illustration.
• Reminders that actually send. The included-$0 line becomes SMS/email sequences (MessageMedia, Twilio) fired from the register's due dates — the exact bottleneck this trade wins or loses customers on.
• Real proof. Google Business Profile review feed replacing the demo cards, their DEMIRS-registered licence numbers, their technician photos, and a booking flow writing straight into their scheduling runs.

Iteration log