How Stillwater Pool Care was made

Concept

Stillwater Pool Care serves busy families across Perth's northern corridor whose pool is one job too many — plus new owners who inherited a mystery, and anyone staring at a green pool a week before a February birthday party. The page has a single job: book a first service. The direction is a backyard at noon in February — pebble glare, frangipani shade, water so clear the tiles wobble — premium quiet competence, zero tropical-resort kitsch.

Palette — argued from the water line

The spec names pool aqua and frangipani gold as line/mark tokens; neither clears 4.5:1 as small text on pebble white, so two darker ink siblings were derived for anything that reads — the collection's standard ink/line split.

Type

Outfit (display) — clean geometry with a soft edge, like good pool coping; it carries the masthead, headings and buttons. Nunito Sans (body/UI) — a warm workhorse that stays legible at 16px+ on a phone by the pool. IBM Plex Mono — litres, dosing figures and visit prices, so every number on the page reads like an instrument, not a slogan.

The signature — Pool Volume & Service Planner

Shape chips (rectangle / freeform kidney / plunge), length and width sliders (plunge clamps them to 3–5 m × 2–3 m) and an average-depth slider (1.2–2.0 m) drive a procedural SVG top-down pool that reshapes live. The rectangle is a rounded-rect path; the kidney is a closed Catmull-Rom spline through twelve control points in a unit box, scaled to the slider dimensions so the bean stays organic at any aspect ratio. Water depth recolours the fill gradient toward deep-end ink; caustic lines are dash-drifted CSS animations clipped to the live pool path, with SVG layout kept on attribute transforms and CSS animation on separate nested groups. A frangipani petal drifts across the water as the second-read detail.

The volume & pricing model (source of truth)

The ×0.85 freeform factor: a surveyed kidney outline typically encloses 80–90% of its bounding rectangle, so the planner uses 0.85 and always presents litres with a "≈". The spec's worked example (8 × 4 × 1.5 ≈ 48,000 L) is what the model computes exactly, so the rest state ships the measured figure.

A deliberately flat dimension: the visit price does not change with litres. That is a pricing statement, not a missing gradient — the visit is priced on the work of the round (weekly $62, fortnightly $78, dearer per visit because a fortnight lets more drift), and it's chemistry that scales with volume: correction doses are billed at cost and itemised. The page says this in the plan card, the services grid and the FAQ, so all three surfaces agree. The planner's cheapest output ($62 weekly) equals the services grid's floor by construction.

Conversion decisions

• Above the fold at 375px: brand eyebrow, an h1 naming the trade and the corridor, the $62 anchor in the lede, gold "Book your first service" CTA, tel: secondary, and three trust chips — all inside the first viewport.
• Sticky mobile bar: below 720px a fixed two-button bar (Call now / Book first service), 56px tall — most pool-service traffic is a phone in one hand in the backyard.
• Planner → form handoff: every planner change rewrites the form's pool-summary field and plan select, so the demo interaction becomes a warmer lead. Name, phone and suburb stay empty so validation still means something.
• Form fields: name, phone, suburb, plan, pool summary, optional notes ("gate code, dog's name, how green it is…") — exactly what a pool round actually needs; the confirmation states the demo would call back within one business hour, and that nothing was sent anywhere.
• Honesty as trust: the chemicals included/at-cost split, the fortnightly-dearer-per-visit reasoning, "no contracts", and the 3–7 day green-pool truth each appear where a sceptical owner would look for the catch.

Local SEO we'd implement for the real business

This demo page carries only WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real Stillwater we'd ship LocalBusiness + Review schema fed by a live review source:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Stillwater Pool Care",
  "telephone": "+61-8-XXXX-XXXX",
  "url": "https://stillwaterpoolcare.com.au",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Duncraig",
    "addressRegion": "WA",
    "postalCode": "6023",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.83, "longitude": 115.77 },
  "areaServed": ["Duncraig","Sorrento","Hillarys","Padbury","Kingsley",
                 "Greenwood","Warwick","Carine","Karrinyup","Joondalup"],
  "openingHours": ["Mo-Fr 07:00-17:00","Sa 08:00-12:00"],
  "priceRange": "$$",
  "aggregateRating": { "@type": "AggregateRating",
    "ratingValue": "4.9", "reviewCount": "187" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "…from Google Business Profile…" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "…live review text, never hand-written copy…"
  }]
}
</script>

Plus suburb-level service pages for the corridor, Google Business Profile with service categories, and review velocity via post-visit SMS.

What would change for the real client

• Visit reports: PoolTrackr or Skimmer for per-visit photo reports and chemical logs — the "on your phone before we've left the driveway" promise, made real.
• Water testing: LaMotte WaterLink Spin integration so probe readings flow into the report automatically.
• Billing: Xero for invoicing, GoCardless direct-debit for weekly/fortnightly plans — no chasing $62 payments.
• Routing: ServiceM8 for round scheduling and on-the-way SMS.
• Reviews & comms: Podium for SMS visit summaries and the review flow feeding the schema above.
• Their photos, their reviews, their real ABN/insurance details — and a backend for the booking form.

Techniques

• Single self-contained file: all CSS/JS inline, no libraries, no build. Google Fonts only.
• Procedural SVG everywhere a real site would use photos: the hero backyard pool with animated caustics, the planner's live-reshaping pool, the northern-corridor service map, icons and the frangipani.
• Kidney outline via closed Catmull-Rom → cubic Bézier through 12 unit-space points, scaled per slider values.
• Depth-reactive water: gradient stops lerped between shallow and deep hexes as the depth slider moves.
• W16-safe SVG animation: position on attribute transforms (outer groups), CSS keyframe animation on separate inner groups; SVG visibility toggled via the hidden attribute with a [hidden]{display:none !important} guard.
• State probe window.__poolcare updated on every interaction (shape, dims, litres, service, prices, chem range, form status, FAQ state) — QA gates on state, not wall-clock.
• Reduced motion: entrance choreography, caustics, petal drift and price pop all disabled; the planner rests fully demonstrated (48,000 L, weekly $62) so the settled frame is complete.

Iteration log