- Online drum lessons are a commodity market — the pitch has to be credibility transfer, not features, or it competes on price with every YouTube teacher
- Two different funnels sharing one audience: parents and adult learners booking lessons, and artists and MDs hiring remote session work
- Teaching worldwide from a UK village means the site carries all the trust-building a local studio never has to do
- Exactly one strong professional photograph of Jon existed — not enough to art-direct a five-page site the honest way
- No CMS, no database, no booking platform in budget — but the site still had to convert and still had to be editable by us in one place
- A named person is one of the hardest entities for search and AI to disambiguate — a wrong fact in structured data becomes a wrong answer in his name
All client work
Case study · Jon Finnigan
Selling the credits, not the lesson.
How KumoKodo Studio built jonfinnigan.com — a dark, editorial “rock-luxe” site for a world-touring drummer, where every page answers one question before it asks for anything: who am I actually learning from?
5
Pages · all static
3
Lesson plans
10
Generated social images
1
Accent colour
Client
Jon Finnigan · Cambridgeshire, UK
Industry
Music · Drum Lessons & Session Work
Services
Brand, design, build, SEO
Status
Live — jonfinnigan.com
The challenge
A career that outranks the website.
Jon Finnigan was a member of Gang of Four from 2013 to 2019, has played with Deep Purple's Don Airey and Ian Gillan since 2016, and has supported Beyoncé at The O2 and toured with Girls Aloud. He now takes a small number of one-to-one students online. The gap between that résumé and a generic teacher listing is the entire problem.
Our solution
Rock-luxe, one accent, no template.
A warm near-black canvas, bone type, and a single brass accent — a site that reads like a tour programme rather than a lesson marketplace, with the credits doing the selling on every page.
01
Credits above the fold
Gang of Four, Don Airey & Ian Gillan, Beyoncé, Girls Aloud — the headline credits run under the hero as a marquee, not buried in an About page. The conversion argument is credibility transfer, and the design puts it where the eye lands first.
02
Performance video as proof
A video wall of real performances answers "can he actually play this?" without a word of copy. Each clip loads behind a click-to-load facade against youtube-nocookie — no third-party iframe touches the page until a visitor asks for it.
03
Two funnels, one form
Lessons and remote session work each get a dedicated page with their own pitch, pricing, and FAQ, then converge on a single styled enquiry form — so a student and a musical director both land in the same inbox with context attached.
04
Honest pricing, stated plainly
Three plans on the page: weekly lessons at £100, a block of five at £450, and pro mentorship at £175. Money is taken off-site by Jon — no payment layer to maintain and no fee skimmed from a working musician.
Technical approach
Five static pages, one content file.
Next.js 16, entirely prerendered
React 19 server components with strict TypeScript and Tailwind v4 design tokens, animated with Motion and fully reduced-motion aware. Every route prerenders static — no database, no API routes, no runtime to fall over on a Sunday night before a lesson.
- Next.js 16 App Router · React 19 · strict TS
- Tailwind v4 tokens — no config file
- Motion reveals · prefers-reduced-motion safe
- 5 routes, 100% static, Vercel-hosted
One file is the whole site
Credits, pricing plans, career timeline, performance videos, session points, FAQs and contact details all live in a single content module. Pages import and render; they hold no copy of their own. "Change the price" is a one-line edit that moves the page, the schema, and the AI brief together.
- Single source of truth for all copy + data
- Prices feed the page and the OfferCatalog
- FAQ arrays feed page, schema and llms.txt
- Nothing hardcoded twice, anywhere
A form that fails honestly
The enquiry form posts to a Zod-validated Server Action that delivers via Resend. If the mail credentials are absent it does not silently swallow the lead — it tells visitors to email Jon directly, and his email, phone, and Instagram stay visible on the page regardless.
- Zod-validated Server Action → Resend
- Env-gated with a visible fallback path
- Contact details always on the page
- No API route, no client fetch code
Entity-first SEO and GEO
Per-route metadata and canonicals, generated Open Graph and Twitter images for all five pages, a Person / ProfessionalService / Service / WebSite / VideoObject schema graph, FAQPage on both funnel pages, a robots allowlist welcoming AI crawlers, and an llms.txt carrying the key facts and full Q&A inline.
- 10 generated OG + Twitter images
- Person · ProfessionalService · VideoObject
- FAQ schema only for FAQs that render
- AI-crawler allowlist + llms.txt brief
Key decisions
Why we built it this way.
His likeness is never generated
Only one strong real photo of Jon exists, treated several ways. Everything else in the image set is deliberately atmospheric — cymbals, hardware, haze, brass texture. A personal brand built on a synthesised face is a brand built on a lie, and the rule is written into the project docs so it survives us.
No schema for facts he hasn’t confirmed
Answer engines quote structured data verbatim, so a guessed rate or opening hour becomes a wrong answer attributed to Jon. Unconfirmed fields are left empty and listed openly as absent — and no Review or AggregateRating schema ships until real student reviews do.
Video facades over raw embeds
A page full of YouTube iframes costs hundreds of kilobytes and sets third-party cookies before a visitor presses anything. The click-to-load facade keeps the first paint fast and the privacy posture clean, at the cost of one extra click nobody notices.
One accent, held under pressure
A single brass accent against near-black and bone. The temptation on a music site is a second colour for energy; resisting it is what makes the design read as a tour programme instead of a template. The token file says so explicitly.
Built with
Technology stack.
Next.js 16React 19TypeScriptTailwind CSS v4MotionZodServer ActionsResendschema.org JSON-LDllms.txtVercelBricolage GrotesqueHanken Grotesk
See it live
Visit Jon Finnigan.
Take a look at the live site — or tell us about a personal brand of your own that deserves a site with a point of view.