How Cadence Podiatry was made.

Concept

Cadence Podiatry treats heel pain, running injuries, ingrown nails, kids' intoeing and diabetic feet from a single Applecross room. The audience is a heel-pain sufferer at 6am, a parent watching a child trip, a diabetic due their annual check — people who want calm clinical honesty, not a sales funnel. The page's single job is the booking enquiry, so the signature element is the triage: pick what hurts, watch the pressure map re-weight to your problem, read exactly what the first visit involves and costs, and the form is already filled in.

Tone rule for a health page: no overclaiming. "Most ingrown nails don't need surgery" and "chemist insoles are genuinely enough for some feet" do more converting on this page than any superlative could — they're also simply true of good podiatry practice.

Palette — the clinic and the plate

Organic-clinical warmth: a room with plants and clean lino, and one instrument that glows. The coral is reserved for pressure — it never colours text, so the page stays quiet and the map keeps all the drama.

Ink/line discipline: moss is the mark-and-CTA colour; small text on sage uses pine ink or the muted #54645A (≥4.5:1); labels on the dark plate use #DDE8DE and #9FB3A4, both clear of the coral blobs.

Type

• Display moment: the walking-cycle phase words set letterspaced along the moss gait rail inside the SVG, the active phase snapping to white as the blob rolls through it.
• Fee figures on the care card and grid are set in Bricolage at 800 — the numbers are content on this page, so they get the display face.

The Gait Line — how the signature works

The pressure plate is a single inline SVG: two mirrored plantar footprint paths (one <path>, reused via <use> with a scale(-1,1) group for the left foot), four pressure-zone ellipses per foot (heel, arch, forefoot, hallux) plus a rolling blob, all filled with coral radial gradients, softened by one feGaussianBlur filter and clipped to the footprint outline. A rAF loop advances a stride accumulator: during the stance fraction (62% of a 2.4s stride) the blob's centre and radii interpolate along a heel → arch → ball → hallux skeleton with a sine loading envelope; the two feet run in antiphase, so one foot is always mid-stance — and the blob's opacity has a designed floor of 0.55, so the signature is visibly alive at any thumbnail capture instant.

Symptom chips re-weight the map: each symptom defines target opacities for the four zones (heel pain weights the heel to 0.95; the diabetic check flattens all four to ~0.5 because neuropathy doesn't pick a zone; kids' intoeing also rotates both footprint groups 9° toes-in about their midfoot pivots). The chip handler token-invalidates the in-flight cycle before the state swap, then the frame loop crossfades zone opacities toward the new targets — slow on the entrance (first draw), snappy (~half a second) on every subsequent swap via a firstDraw flag. The same handler swaps the care-plan card (title, fee, honest visit lines, pathway figure) and pre-fills the booking form's symptom chips. State probe: window.__podiatry exposes symptom, cycle phase, fee, blob opacity and a settled flag.

Honest numbers

Every figure on the page is pinned arithmetic from the fee schedule — measured from the running page and cross-checked against an independently reimplemented oracle in the QA harness.

The Medicare line is a designed price-less state: the rebate is authority-set and item-dependent, so any printed figure would be the dishonest choice. The declaration appears wherever fees do — the care card and the grid.

Conversion decisions

• Above the fold at 375px: name, "foot & gait clinic in Applecross" value line, the $135 booking CTA and the AHPRA trust chip — the pressure plate follows one scroll later on mobile, beside it on desktop.
• The signature is the triage. Every chip ends at the same place: what the first visit involves, what it costs, and a pre-filled form. Art in service of the enquiry.
• Fees printed in full. Health pricing is usually hidden behind "call us"; printing all six fees plus the $95 floor is the page's biggest trust move.
• Form fields: name, phone, suburb, a required what's-hurting chip row (mirroring the map), preferred time, optional notes. Front-end validation with per-field messages; the confirmation states the demo plainly and promises a call-back within one business hour.
• Click-to-call everywhere: header, hero, book panel, footer, and the mobile sticky call/book bar. The book-panel line "answered by the person who'll treat you" is the small-clinic advantage, stated.
• No emergency-line treatment — podiatry isn't a 9pm trade; the after-hours slot goes to Saturday morning hours instead.

Local SEO we'd implement for the real business

The demo page ships only honest WebPage/CreativeWork schema naming it a demonstration — fictional structured data in a real index is dishonest markup. A live clinic build would ship the precise schema.org subtype with real NAP, geo, hours and review feed:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Podiatrist",
  "name": "Cadence Podiatry",
  "description": "Foot and gait clinic in Applecross — heel pain,
    custom orthoses, ingrown nails, kids' gait and diabetic foot care.",
  "url": "https://cadencepodiatry.com.au",
  "telephone": "+61 8 XXXX XXXX",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Suite X, XX Canning Hwy",
    "addressLocality": "Applecross",
    "addressRegion": "WA",
    "postalCode": "6153",
    "addressCountry": "AU"
  },
  "geo": { "@type": "GeoCoordinates", "latitude": -32.014, "longitude": 115.840 },
  "openingHoursSpecification": [
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
      "opens": "07:30", "closes": "18:00" },
    { "@type": "OpeningHoursSpecification",
      "dayOfWeek": "Saturday", "opens": "08:00", "closes": "12:30" }
  ],
  "priceRange": "$95–$560",
  "areaServed": ["Applecross","Ardross","Mount Pleasant","Booragoon","Melville"],
  "review": {
    "@type": "Review",
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "author": { "@type": "Person", "name": "Real Patient" },
    "reviewBody": "Sourced from the clinic's live Google reviews feed."
  }
}
</script>

Podiatric is schema.org's MedicalBusiness subtype for exactly this clinic — more precise than LocalBusiness, which is what a careful SEO build chooses. Review markup only ever wraps the clinic's real, attributable reviews.

What changes for the real client

• Real bookings: Nookal or Cliniko practice-management embed, or HotDoc/HealthEngine for marketplace bookings — the form here posts to their API instead of a demo confirmation.
• Live Google reviews feed replacing the demo quotes; real AHPRA registration number; real ABN.
• HICAPS/Tyro terminal details, health-fund logos as licensed, and the real Medicare CDM item schedule at booking.
• Their photography can replace the procedural plate — though a real pressure-plate export rendered in this style is the better hero.

Iteration log