Industry demo · Tiling · Perth

How the Setwell Tiling demo was made

Setwell Tiling & Waterproofing is a fictional Myaree wall-and-floor tiler built to show a real one what their landing page could be: one page, one job — book the free measure — with an estimator that prices labour the way a tiler actually quotes it.

Concept

The audience is a renovator who has already picked the tile and now needs someone to lay it straight — plus the builder who needs a wet-area sub who turns up. The page owns the craft (the mid-job wall, the laser line, the membrane the tiles hide), not the lifestyle-bathroom gloss, and its single job is converting that trust into a booked measure. The signature is the Tile Estimator: a procedural SVG wall-and-floor cutaway that re-tiles itself live in the chosen format while an honest labour-only price card shows its working.

Conversion decisions

• Estimator beside the hero, not below it — it shares the first viewport (and the 1200×750 thumbnail) with the value proposition, because the working demo is the trust signal.
• Labour-only stated on the card, not in fine print. "You pick and buy the tiles" removes the price-anxiety a supply-and-lay figure creates, and it's how this trade actually works.
• Every control is honest or disabled with a reason: splashback greys the floor stepper ("splashbacks are wall work"), floors-only greys the wall stepper, alfresco greys waterproofing ("outdoor tiling wants falls and flexible grout, not a wet-area membrane"). No control silently no-ops.
• Estimator→form handoff: the scenario pre-fills the measure form's job type and description (until the visitor edits it themselves), so the demo interaction becomes a warmer lead.
• Form fields: name, phone, suburb — the minimum a tiler needs to call back — plus the pre-filled job description. Empty submit flags all three required fields; a valid submit renders a local confirmation that plainly says nothing was sent.
• Mobile-first: sticky call/measure bar (56px targets), full number in the header at desktop, a "Call" pill at 375px so the masthead never wraps.

Palette — wet-glaze morning

The spec's LINE/MARK accents held: cobalt draws the laser and the CTAs, aqua draws the membrane, and both were kept off body copy — the derived inks above carry all reading text at ≥4.5:1.

Type

Bricolage Grotesque (display) has chiselled terminals that read like a cut tile edge — set tight at −0.022em for the masthead moment, where "the laser line" carries a literal cobalt rule under the words. Mulish is the legible workhorse for body and UI. Martian Mono sets every m², joint and dollar figure, so the numbers read like a measured quote rather than marketing.

Techniques & the signature

Everything is procedural — no raster images. The cutaway is a single inline SVG: the wall is a flat elevation, the floor a skewed plane (matrix(1,0,0.45,1,…)) so a plain rect grid reads as perspective. On every input change the tile layer regenerates: the chosen format sets tile pitch and bond (600×600 grid, subway half-bond courses, fine mosaic, two-man 1200×600), courses fill bottom-up to a laser datum recomputed to keep the wall two-thirds tiled, and each tile is a rect that fades in on a per-index transition delay — a re-tiling animation with no keyframe conflicts, because tiles carry no SVG opacity attribute (position lives in attributes, animation lives entirely in CSS, per the collection's W16/W17 rule). A grout-coloured backing bed under the tiled zones makes the joints read at thumbnail size. Above the top course, generated arc paths draw the trowel's combed adhesive; the aqua membrane shows in the untiled shower zone and as the floor's cross-section edge. The laser line's glow pulses via CSS on an inner line (opacity floor 0.62 — never invisible at any capture instant), while its position is set as a transform attribute on the outer group. Second-read details: the laser emitter unit on the left wall edge, spacer crosses still sitting in the top course, and a movement joint across the floor plane that the grout-crack FAQ explains.

No canvas or WebGL is used, so no DPR/context handling was needed; reduced-motion renders every tile settled and the laser static. The page exposes window.__tiler (job, format, areas, membrane, rates, total, clamp and form status) so QA gates on state, not wall-clock.

The pricing model, honestly

Pinned anchors from the spec: floors $62/m², walls $85/m², mosaic +$30/m² and 1200×600 large format +$25/m² on either rate, waterproofing $55/m², strip-out $45/m², minimum call-out $450. The model's derived shape, documented so the numbers can be checked:

• Membrane area is derived, not dialled: for a full bathroom it is floor m² + a 4 m² shower-wall allowance (walls to 1.8 m around the shower — the assumption is stated on the card); for floors-only it equals the floor area (laundry/ensuite floors); splashbacks and alfresco have no membrane, each with its on-page reason.
• Format chips only modify the laying rates — subway and 600×600 lay at base rate; the surcharges are the two pinned ones.
• Strip-out is a toggle at the pinned $45/m² across whichever areas are live — off at rest so the rest-state card is pure laying + membrane.
• The clamp: any subtotal under $450 displays as $450 with the minimum-call-out line item and reason on the card, matching the services grid's "regrouts & repairs from $450" floor exactly.

Every figure below was measured from the running page and independently re-derived by a separate oracle implementation in the QA harness:

The spec's worked example ($2,675) matched the implemented model exactly — pure anchor arithmetic, no correction needed.

Local SEO we'd implement for the real business

The demo page itself carries only honest WebPage schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real tiler, we'd ship LocalBusiness and Review schema like this, fed by their actual details and review stream:

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "@id": "https://example-tiler.com.au/#business",
  "name": "Real Tiling & Waterproofing Pty Ltd",
  "description": "Wall and floor tiling and AS 3740 waterproofing
                  across Perth's southern suburbs.",
  "telephone": "+61-8-XXXX-XXXX",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Myaree",
    "addressRegion": "WA",
    "postalCode": "6154",
    "addressCountry": "AU"
  },
  "areaServed": ["Myaree","Melville","Applecross","Booragoon",
                 "Fremantle","Willetton"],
  "openingHours": "Mo-Fr 06:30-16: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": "Fed from the live review platform, never hand-written."
  }
}

Plus suburb-level service pages, a Google Business Profile wired to the same NAP, and review markup fed from a live platform so the stars are earned, not asserted.

What would change for the real client

• Tradify — the measure form books straight into their quoting and job-scheduling pipeline, with the estimator's scenario attached as the job note.
• Xero — quotes convert to invoices with the waterproofing line itemised; progress claims for builder work.
• Supplier trade-account ordering — the estimator's areas become a take-off list (tiles +10% cutting margin, adhesive, membrane) pushed to the tile shop's trade account.
• Waterproofing-certificate PDF workflow — AS 3740 certificates generated per job, stored against the address, and attached to the invoice automatically.
• Podium — post-job review requests by SMS, feeding the reviews section and the schema above with real words.
• And their photos: the procedural cutaway stays as the estimator, but finished-job photography earns its place in a gallery the demo deliberately does without.

Iteration log

Links

View the Setwell demo · Back to the collection index