- Two businesses in one building — a lesson studio for beginners and parents, and a professional recording room for artists and film scoring — each needing its own pitch without splitting the brand
- The inherited site carried a stale address, an instrument the school no longer teaches, and pricing nobody had checked in years
- Every call to action was a mailto: link, in a business whose owners may never create domain mailboxes — leads were landing nowhere
- Eight teachers, some in-studio in Santa Barbara and some teaching online worldwide, with no consistent way to present credentials
- No sitemap, no robots.txt, and no structured data at all — a local business effectively invisible to both search engines and AI answers
- A hard client rule after one bad experience: no placeholder copy, no invented testimonials, no guessed prices may ever reach the page
All client work
Case study · Detar Music Studios
Lessons by day. Records by night.
How KumoKodo Studio built detarmusic.com — a music school that happens to live inside a working Santa Barbara recording studio, with five instruments, eight teachers, and a booking flow that replaced every last mailto: link.
5
Instruments
8
Teacher profiles
20
URLs · generated sitemap
0
Email addresses in copy
Client
Detar Music Studios · Santa Barbara, CA
Industry
Music Education · Recording
Services
Design, build, content, SEO
Status
Live — detarmusic.com
The challenge
A school and a studio, on one site.
Detar Music Studios teaches piano, guitar, bass, drums, and voice at 146 Powers Ave — inside a room that cuts records and scores films at night. The old Squarespace site sold neither, and half of what it said about the business was wrong.
Our solution
One venue, two doors.
We built the site around the thing that actually makes Detar different — that the lessons happen in a real studio — and made the roster a data file so adding a teacher is a one-line change.
01
A hero that states the whole business
Full-bleed studio footage under one line — "Lessons by day. Records by night." — with the address, the age range, and the free first lesson sitting directly under the booking button. A visitor knows what this place is inside three seconds.
02
An interactive ticket printer
The homepage centerpiece prints a physical-feeling lesson ticket — complete with a scannable QR stub — instead of yet another feature grid. It graduated out of an internal design lab where three concepts were built and compared side by side.
03
A faculty that reads like a bill
Eight photo-led teacher cards with tilted portrait heroes split into in-studio and online rosters, each linking to a full profile with real bio copy, videos, and socials — including a Berklee assistant professor and a world-touring drummer teaching remotely.
04
The studio sells itself
Dedicated programme pages for recording, film work, and the band program, with a click-to-play Selected Work video wall — proof that the room behind the lesson door is the real thing.
Technical approach
A content model, not a page pile.
Three arrays run the whole site
Instruments, teachers, and a single SEO facts module are the content model. The roster pages, nav dropdowns, instrument pages, sitemap, llms.txt, and every JSON-LD node derive from them — so adding a teacher or an instrument is a data-only change, and the schema can never drift from the page.
- instruments.ts · teachers.ts · seo.ts
- 5 SSG instrument pages · 8 SSG profiles
- Nav, sitemap and llms.txt all generated
- Adding a teacher = one array entry
Booking forms replaced every mailto:
One /book route serves five variants — trial lesson, studio time, teaching application, band camp, and general contact — with instrument and teacher prefilled from wherever the visitor clicked. A single API route sends via Resend behind a honeypot, a per-IP rate limit, and a field whitelist, and never silently drops a lead.
- 5 form variants, one route
- Honeypot + per-IP rate limit + field whitelist
- Verified end-to-end against production
- Payload shaped to QuarterNote’s lead model
Built to be found — by search and by AI
The site shipped with no structured data at all. We added sitewide MusicSchool + LocalBusiness and WebSite JSON-LD, Service nodes on each instrument and programme, Person on each teacher, and BreadcrumbList on interior pages — plus visible FAQ blocks that emit their FAQPage schema from the same array they render.
- Generated sitemap (20 URLs) + robots.ts
- MusicSchool · LocalBusiness · Service · Person
- FAQ schema generated from visible copy
- robots allows 11 AI crawlers · /llms.txt
Next.js 16, hand-written CSS
React 19 server components with strict TypeScript, every route prerendered. Styling is bespoke CSS in one file rather than a utility soup — the ticket printer, the video wall, and the teacher cards all needed art direction a framework default would have flattened. Fonts are self-hosted woff2.
- Next.js 16 App Router · React 19 · strict TS
- Bespoke CSS, one stylesheet, no template look
- Self-hosted Zodiak + Familjen Grotesk
- Vercel · push to main is the deploy
Key decisions
Why we built it this way.
Absent beats wrong
The old Squarespace site listed a previous address. We treat every fact that reaches structured data as quotable-verbatim by an answer engine — so the founding year and the map coordinates are simply left out until the client confirms them, rather than guessed to fill a field.
No email address renders as text
The studio may never create domain mailboxes, so a published address would be a dead end and a spam magnet. Every path to the business is a form, and the API route is the only thing that knows where mail actually goes.
The design lab stayed in the repo
Three ticket concepts were built as a real, noindexed page and compared in the browser rather than in a deck. The winner shipped to the homepage; the lab stayed behind so the next iteration starts from evidence, not memory.
Wired for what comes next
The enquiry payload is already shaped to the lead model used by QuarterNote, our music-lesson marketplace — so if Detar ever wants online booking, payments, and AI lesson recaps, the plumbing points the right way from day one.
Built with
Technology stack.
Next.js 16React 19TypeScriptHand-written CSSnext/font/localResendschema.org JSON-LDllms.txtVercelZodiakFamiljen Grotesk
See it live
Visit Detar Music Studios.
Take a look at the live site — or tell us about a studio, school, or local business of your own that deserves better than a template.