Making Steadfast Dog Training

Palette — the oval at 7am

Every colour argues from the morning training session: the cream of early light, the oval itself, and the kelpie on it. The tan is a line-and-mark token only — body text always sits in the near-black heel ink (13.0:1 on the ground).

Type

Baloo 2 (700–800) carries the display work — a rounded face with real structure, friendly without tipping into children's-book territory, which is the brand's whole argument: warm methods, disciplined outcomes. Asap handles body and UI at 17px. The typographic moment is “SIT. STAY. FINALLY.” set huge with the tan landing on the payoff word, and the program name swapping in beneath it as the planner chips change.

The signature — the Training Planner

An SVG oval scene: boundary line, mowing stripes clipped to the ellipse, a kelpie and handler in tan linework with cream halo understrokes (tan alone dies against the green — the double-stroke keeps the pinned linework legible). Each program redraws the course: a cone circle for puppy school, a down-and-back heel lane for obedience, a figure-eight for private work, and a long recall line for bootcamp that the dog runs out-and-back (ping-pong, not loop). In private modes a 1–6 stepper lights one numbered marker per session; the dog runs the course on a rAF loop with a lead-line trace rendered as a moving dash pair (tan over cream halo, opacity floor 0.55, so the thumbnail can never catch it invisible).

The dog's position comes from getPointAtLength on the course path; the delta is clamped at zero and capped (dt = min(max(now − last, 0)/1000, .05)) per the W29 lesson. Every control bumps a run token as its first act, before any state swap, so in-flight marker staggers and the reward-star timeout die instantly under rapid-fire input. First draw earns the full entrance stagger (110 ms per marker); every later redraw runs snappy at 55 ms with a 520 ms settle cap, and window.__dogtraining.settled flips true when the redraw lands. Second-read details: the kelpie sits for a beat at the last lit marker each lap and a reward star pops above it — the force-free method drawn into the animation — plus a tennis ball parked on the boundary.

The pricing model

Pure anchor arithmetic, measured from the running page: price = 480 × ⌊n/3⌋ + 180 × (n mod 3) for private sessions and bootcamp; group courses are fixed. The 3-session package applies automatically and surfaces as a note, never a control.

Conversion decisions

• Planner beside the fold copy, not below it — at 1200×750 the thumbnail carries the h1, the CTA, the oval mid-run and the $480 badge on the artwork. The price is the commercial argument, so it lives inside the scene.
• Planner → form handoff: chips and stepper pre-fill the program select and a visible “From the planner: Private sessions · 3 sessions · $480” echo, so the enquiry lands warm.
• Stepper disabled with a reason on group programs (“sessions aren't the dial here”) — a control must change the price honestly or say why it can't.
• Sticky call/book bar under 860px, both targets ≥48px — most dog-training traffic is a phone in one hand and a lead in the other.
• Reactive-dog card prices nothing on purpose and the FAQ explains why — the consult-first line builds more trust than a guessed number.
• Confirmation is a designed local panel, hidden until a valid submit; no fake network round-trip, and the demo status is stated inside it.

Local SEO we'd implement for the real business

The live demo page carries only WebPage/WebSite/BreadcrumbList schema naming it a demonstration — fictional structured data in a real index would be dishonest markup. For a real client we'd ship ProfessionalService (schema.org has no dog-training subtype; it's the correct LocalBusiness-family choice) with a live review feed:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ProfessionalService",
  "name": "Steadfast Dog Training",
  "description": "Puppy school, group obedience and private behaviour
    training across Perth's northern suburbs.",
  "telephone": "+61-8-9000-0313",
  "address": {
    "@type": "PostalAddress",
    "addressLocality": "Balcatta",
    "addressRegion": "WA",
    "addressCountry": "AU"
  },
  "areaServed": ["Balcatta", "Stirling", "Karrinyup", "Scarborough",
    "Duncraig", "Hillarys", "Joondalup", "Wanneroo", "Dianella", "Morley"],
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Tuesday", "Wednesday", "Thursday", "Friday"],
    "opens": "06:30", "closes": "18:30"
  }, {
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": "Saturday", "opens": "07:00", "closes": "13:00"
  }],
  "priceRange": "$180-$480",
  "aggregateRating": {
    "@type": "AggregateRating",
    "ratingValue": "4.9",
    "reviewCount": "87"
  },
  "review": [{
    "@type": "Review",
    "author": { "@type": "Person", "name": "— real customer —" },
    "reviewRating": { "@type": "Rating", "ratingValue": "5" },
    "reviewBody": "— pulled live from the Google Business Profile —"
  }]
}
</script>

Plus: a Google Business Profile wired to the reviews feed above, suburb-level landing sections targeting “puppy school + [suburb]” queries, and tel: call tracking so ad spend reports in booked programs, not clicks.

What changes for a real client

• Booking: class enrolment through Gingr or PetExec (purpose-built dog-business platforms), or Setmore/Calendly for private-session slots — the planner's “Book a program” CTA deep-links into the live calendar with the program pre-selected.
• Reminders: Mailchimp class-reminder automations (week-before, night-before) cut group-course no-shows; a post-course sequence asks for the Google review.
• Reviews: the three demo quotes swap for a live Google Business Profile feed with schema above.
• Photos: the procedural oval stays as brand art, but real dogs on the real oval join the reviews and programs sections.
• Payments: Stripe checkout on group courses at enrolment — the $240/$260 price points are impulse-bookable.

Iteration log