How the Squareset demo was made

The concept

Squareset Home Maintenance is a fictional Morley handyman — one bloke, one van, built for the fridge-door list of small jobs no trade will drive out for. The page has a single job: a booking enquiry with the job list and its time already priced. Everything on it — the squared linework, the labelled chips, the tidy pegboard-paper ground — argues that this is a person who leaves things square and put away.

The audience is owners and renters with six small jobs, landlords between tenants, and downsizers proofing a parent’s house. They’re not comparing handymen on artistry; they’re asking “what does my list cost, and can it be one visit?” The page answers both above the fold.

Palette — argued from the pegboard wall

The split does the storytelling: everything timber is the house as found; everything steel-blue is Squareset’s work. Tick a job and blue linework replaces a timber fault.

Type

Archivo 700/800 for display — workwear-label solidity, set huge and tight for “THE LIST. DONE.” with the running time-and-price meter directly beneath it, so the typographic moment and the commercial argument share one glance. Karla for everything else: open, legible, ≥16px body on mobile, weight and letter-spacing doing the hierarchy work instead of extra colours.

The signature — the Saturday List

An SVG house elevation (door, flyscreened window, interior cutaway with a TV wall and a shower corner, back fence) where each ticked job chip draws its repair onto the house: the door re-squares, the mesh crosshatches in, the patch trowels over, the silicone bead re-runs, the TV mounts, the palings swap. Six chips carry their pinned minutes on-card; the meter sums minutes and bills them as first hour $110 (callout included) + $42 per started half-hour. The billed total lives on the artwork as a hanging price tag — the thumbnail is the commercial argument, so the rest state (door + TV mount + reseal = 150 min → $236, “about 2½ hrs”) keeps both the house and the tag inside the first 750px at 1200 wide.

Implementation

Every repair is a marker group of stroked paths with pathLength="100", revealed by transitioning stroke-dashoffset 100→0 — strokes stay at opacity 0 until the draw starts, so no stray round-cap dots. First render earns the entrance choreography (staggered ~130ms per rest-state marker); after it settles a snappy class drops transition times to ~380ms so chip taps feel instant, not ceremonial. A graphite pencil tracer loops the currently-listed markers on a rebuilt path — its opacity oscillates on a 0.55 floor so the signature is alive at any capture instant — and the rAF loop clamps its delta at zero and 50ms, pauses on document.hidden, and goes fully static under reduced motion. Chip handlers bump a state token before the swap, so an in-flight settle can never write a stale frame. The list also pre-fills the enquiry form as text, until the visitor edits the field themselves.

Honest pricing — the meter

One meter, stated on the card and in the FAQ: price = $110 + $42 × ⌈max(minutes − 60, 0) / 30⌉. All figures below were measured from the running page and cross-checked against an independently reimplemented oracle.

• Under an hour shows a note — “under an hour still books the first hour — the callout is in it” — and holds at $110. At exactly 60 minutes (reachable from the chips: door 30 + flyscreen 30) the note correctly disappears.
• Saturday toggle is live in every state; with an empty list the meter shows a designed “tick a job” state and $— rather than computing a price for nothing.
• Renovation-grade work (decks, pergolas, retiling) prints no number anywhere — “quoted as a project” is the designed price-less state, because any figure would be the dishonesty.
• The estimator’s cheapest output ($110) equals the services grid’s “from $110” floor on every card.

Conversion decisions

• Above the fold at 375px: name, the one-line value prop as the page’s only h1, the live meter, a trust line and the primary CTA — with the sticky call/book bar owning the bottom edge on mobile.
• Click-to-call everywhere it’s needed: header, hero, form, footer and the sticky bar, all on the reserved (08) 9000 0316.
• Form fields: name, phone, suburb, and the job-list textarea the planner pre-fills — because the warmest handyman lead is the list itself. The “anything else on the list?” hint invites the jobs the chips don’t cover.
• Confirmation is a local, designed panel (“Thanks — your list is in”) that appears only after a valid submit and says plainly that no enquiry was sent — never a faked network round-trip.

Iteration log

Local SEO we’d implement for the real business

This demo page carries only honest WebPage schema, because fictional structured data in a real index is dishonest markup. A real handyman client would ship the block below — schema.org has no handyman subtype, so the correct top-level type is HomeAndConstructionBusiness, with reviews fed from their Google Business profile.

{
  "@context": "https://schema.org",
  "@type": "HomeAndConstructionBusiness",
  "name": "Squareset Home Maintenance",
  "description": "Handyman services across Perth — sticking doors, flyscreens,
    plasterboard patches, shower resealing, TV mounting. First hour $110
    including the callout.",
  "url": "https://squareset.example.com.au",
  "telephone": "+61 8 9000 0316",
  "priceRange": "$110–$450",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Morley",
    "addressRegion": "WA",
    "postalCode": "6062",
    "addressCountry": "AU"
  },
  "areaServed": "Perth metropolitan area",
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:00", "closes": "17:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "07:00", "closes": "12:00" }
  ],
  "aggregateRating": {
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "Renae T." },
    "reviewBody": "Six items fixed before the rental inspection — one visit."
  }]
}