How Deepsand Bore Co. was built

A fictional Perth garden bore driller — Wangara yard, five suburbs of the metro sand plain — built as a conversion-first landing page for one job: get a "what would a bore cost at my place" enquiry. The page's whole argument is geological: show the customer what's under their lawn, and the price stops being a mystery.

Concept

The ground is the pitch

Every Perth gardener knows two facts: bore owners water three days a week (scheme sprinklers get two), and drilling cost depends on what's under the suburb. So the hero is a drilling cross-section, not a stock photo of a rig. Pick a suburb and the drill string descends through Bassendean sand, coffee rock and Tamala limestone to the water table — with the itemised installed price beside it. The interaction answers the exact question the visitor arrived with.

Palette

Argued from the sand plain

The ink/line split: ochre and teal carry lines, marks and fills; body text always sits in the coffee-rock ink (or a derived #6B6353 muted ink at 5.5:1). Small ochre-family text uses the darkened #8A5A26 ink variant.

Type

A geological ledger

Bitter (slab serif, 600–800) for display — it reads like a core-sample label, and the huge drilled-depth figure ("30 m") set in Bitter against the metre ticks is the page's typographic moment. Public Sans carries body copy: plain, legible, government-form trustworthy — right for a trade that quotes in writing.

Signature

The Strata Finder

An SVG cross-section (no libraries — hand-built SVG + vanilla JS) with five suburb chips. Each suburb carries a strata profile (layer boundaries), a water table depth and a drill depth. Choosing a suburb:

• Rebuilds the strata instantly — turf strip, sand with a speckle pattern, coffee-rock band, limestone with ochre banding lines (SVG <pattern> fills), the water table as a pulsing dashed teal line with a translucent water fill below it.
• Animates the drill string to the suburb's depth. Dual-speed: the first draw gets the full 1.5 s entrance descent; every later change redraws in 480 ms (a firstDraw flag). The animation is token-invalidated in the click handler, before the state swap, so rapid-fire suburb changes can never leave a stale frame loop indexing dead data.
• Itemises the price — drilling at $95/m (18 m minimum billed, with the clamp note rendered only when it binds), pump package chosen by the water table (centrifugal ≤ 7 m suction limit, submersible below), and the flat $380 electrical line.
• Pre-fills the enquiry form — "Use this in my quote" writes the scenario into the suburb and notes fields, turning the demo interaction into a warmer lead.

Second-read details: once the bit reaches depth, the bottom three metres of casing become a slotted screen and the standing water rises inside the column to the water table — which is exactly what a real bore does — and a cuttings mound grows beside the collar in proportion to the hole. The water table line pulses with an opacity floor of 0.58, so the signature is visibly alive at any thumbnail capture instant. Reduced motion renders the fully settled frame with a static line.

State probe: window.__bores exposes suburb, all computed figures and a settled flag; QA gates on state, never on seconds.

Honest numbers

The pricing model

All figures are pinned anchors, cross-checked in the harness against an independently reimplemented oracle. Drilling $95 per metre, minimum 18 m billed (a length clamp — stated in the meter's own unit). Submersible pump & headworks $2,450; centrifugal $1,650, eligible only where the water table is within the 7 m suction limit. Licensed electrical $380, always itemised.

The cheapest output — Spearwood's $3,740, where the clamp binds and the shallow coastal water table earns the centrifugal pump — equals the services grid's "new bore + pump from $3,740" floor, so the page never argues with itself. All five totals were measured from the running page and matched the oracle exactly; the clamp note renders only for Spearwood, and the centrifugal eligibility note states the suction-limit rule it applied.

Conversion decisions

Why the page is shaped this way

• Above the fold at 375px: name, "garden bores drilled and serviced across Perth's sand plain", call + quote CTAs, and three trust chips — before any scrolling. The Strata Finder follows immediately; on desktop it shares the hero so the signature lands inside the 1200×750 thumbnail.
• The roster band (3 days vs 2) is the emotional close — it's the one regulatory fact that sells bores in Perth, so it gets the biggest type on the page after the h1.
• Form fields are the four things a driller actually needs before quoting: name, phone, suburb (geology = price), and block access notes (rig access decides whether the job is standard). No email — this trade calls back.
• Sticky mobile bar: call and quote, 56 px tall — most bore enquiries happen standing on the dead lawn, phone in hand.
• The winter switch-off, iron staining and centrifugal questions in the FAQ are the three objections that stall real bore enquiries; answering them honestly on-page shortens the call.

Local SEO

What we'd implement for the real business

This demonstration deliberately ships only WebPage schema naming it a demonstration — fictional review or business data in a real search index would be dishonest markup. For the real client, we'd ship LocalBusiness + Review structured data like this, fed by their actual Google reviews:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Real Bore Drilling Co.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": { "@type": "PostalAddress", "addressLocality": "Wangara",
               "addressRegion": "WA", "postalCode": "6065", "addressCountry": "AU" },
  "geo": { "@type": "GeoCoordinates", "latitude": -31.79, "longitude": 115.83 },
  "areaServed": ["Wanneroo", "Morley", "Spearwood", "Canning Vale", "Duncraig"],
  "openingHours": ["Mo-Fr 07:00-16:00", "Sa 07:00-12:00"],
  "priceRange": "$$",
  "aggregateRating": { "@type": "AggregateRating",
                       "ratingValue": "4.9", "reviewCount": "87" },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "Real Customer" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "Pulled from the live Google reviews feed."
  }]
}
</script>

Plus suburb landing pages keyed to the bore-log database ("bore drilling Morley — typical depth 30 m"), Google Business Profile with service areas, and review-request automation off job completion.

What changes for the real client

Their rig and crew photography replaces nothing structural — the cross-section stays, because it converts. The suburb table extends to their full bore-log history; the enquiry form posts to their job-management system (ServiceM8, Tradify or AroFlo all take webhook leads); reviews pull from their Google profile; and the watering-roster copy deep-links to the Water Corporation roster lookup so the "three days" claim is one tap from proof.

Process

Iteration log