How Cadence Physiotherapy was made

Concept

Cadence Physiotherapy is a fictional musculoskeletal & sports physio clinic in Applecross, WA. The audience is a person in pain — a runner with a stubborn achilles, a desk worker with a locked neck, a post-op knee — who wants a plan, not a lecture. The page has one job: book an initial consult. Everything on it (the body map, the honest fee anchors, the “typical course” counts) exists to lower the anxiety between “it hurts” and “I booked”.

Palette — argued from the treatment room

The ink/line split (LEARNINGS W2/W5) is applied twice: apricot → #9A520F for eyebrows, sky → #2E6E76 for links. Both derivatives clear 4.5:1 on porcelain; the bright originals only ever draw lines.

Type

Gabarito (display, 700–800) — rounded terminals with real confidence; it reads approachable without drifting into toy-like, which is exactly a good physio's bedside manner. Hanken Grotesk (body, 400–700) — a quiet workhorse with slightly humanist proportions that keeps long condition descriptions comfortable at 17px. Scale is deliberate: 54/38/28/19/17/14.5 with tight display leading (1.12) and relaxed body (1.6).

Techniques — the body map

Every visual is procedural. The figure is a single hand-drawn SVG half-silhouette (four stroked cubic-bézier paths: head, arm, torso-to-foot outline, inner leg) mirrored with <use transform="translate(300,0) scale(-1,1)"> — symmetry for free, half the coordinates to maintain. Front/back is a detail-layer swap (clavicle hints vs spine + scapulae), not a second figure.

The six tappable regions are real HTML <button>s absolutely positioned over the SVG in percentage space — they scale with the figure and stay honest 44×44px targets at 375px, with visible focus states and aria-pressed. Selecting a region toggles its anatomy group: each group's strokes carry pathLength="100" so one dasharray rule draws every path — vertebral stacks, the humeral head, the patella — with a staggered dashoffset transition. Reduced motion removes the dasharray entirely: anatomy renders complete and settled, no draw-on. The condition card swaps from a data object (three plain-language possibilities, first-session description, typical course, prices) and “Book this” pre-fills the enquiry form's region select — the W12 calculator→form handoff, applied to anatomy.

Rest state (for the 7s thumbnail settle and for anyone arriving cold): shoulder selected, rotator-cuff linework drawn, card showing. The figure also breathes — a 7.5s scale oscillation of ~1%, the page's second-read detail and its whole thesis: calmer than a hospital.

Elsewhere: the service-area map is drawn SVG (Melville Water, the Canning, a dashed 10-minute radius), the hero carries one quiet pulse-trace, and the state probe window.__physio exposes region / side / card / form status for QA.

Conversion decisions

• CTA placement: “Book an initial consult — $135” carries its price in the button. Price anxiety is the #1 unasked question in allied health; answering it in the CTA removes the last excuse not to tap. Header repeat, hero primary, card “Book this”, and a mobile sticky call/book bar — never more than one screen from a booking path.
• Form fields: name, phone, region, preferred time — four fields, nothing else. No email (the clinic calls back), no free-text essay while someone's neck hurts. The region select mirrors the body map's six zones plus “something else”, so map → form handoff is lossless.
• Honest anchors everywhere: the card's $135/$98 pills are string-identical to the services grid (asserted in QA); the FAQ's “usually 3–6 sessions” agrees with every card's typical-course line (tendon and post-op regions explicitly run longer, which is the truthful exception).
• Medicare honesty: EPC is stated as a $60.35 rebate with a gap — not “bulk billed” theatre. Prospects who've been burned by that bait recognise the honesty instantly.
• Confirmation state: local, designed, and truthful — “we'd call you back within the hour” plus a plain declaration that this demo sent nothing. Never a fake network spinner.

Local SEO we'd implement for the real business

This demo page deliberately ships only WebPage schema naming it a demonstration — fictional LocalBusiness/Review markup in a real index is dishonest. For a real clinic we would ship:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": ["MedicalBusiness", "Physiotherapy", "LocalBusiness"],
  "name": "Cadence Physiotherapy",
  "url": "https://cadencephysio.com.au",
  "telephone": "+61 8 XXXX XXXX",
  "image": "https://cadencephysio.com.au/clinic.jpg",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Suite X / XX Example Rd",
    "addressLocality": "Applecross",
    "addressRegion": "WA",
    "postalCode": "6153",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.01, "longitude": 115.83 },
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "07:00", "closes": "19:00"
  }],
  "priceRange": "$$",
  "areaServed": ["Applecross","Mount Pleasant","Ardross","Booragoon","Como","South Perth"],
  "medicalSpecialty": "https://schema.org/Physiotherapy",
  "aggregateRating": {                  // fed from the live Google profile, never hand-written
    "@type": "AggregateRating", "ratingValue": "4.9", "reviewCount": "187"
  }
}
</script>

Plus: Google Business Profile with treatment categories, suburb-level service pages (physio Applecross / Mount Pleasant / Booragoon), FAQ schema on the questions above, and review markup generated from the clinic's real Google reviews feed.

What would change for the real client

Iteration log