Skip to content
All client work
Case study · Alex Nishi

A stage-lit site for a life made in music.

How KumoKodo Studio built alexnishi.com — a dark, stage-lit personal-brand site for a working musician teaching online from Thailand, routing three very different audiences — music students, working musicians, and people seeking sober coaching — to the right booking path.

3
Practices · one brand
5
Instruments taught
5
Countries performed in
0
Rebuilds to swap booking
Client
Alex Nishi · online worldwide
Industry
Music Education · Coaching
Services
Brand, design, build, SEO
Status
Live — alexnishi.com
The challenge

Three audiences, one musician.

Alex Nishi has spent two decades playing in five countries and now teaches guitar, bass, drums, vocals, and piano online from Thailand. But his working life is really three practices — and they don't fit one generic funnel.

  • Three genuinely different offers — music lessons, musician career services, and sober coaching — each speaking to a different person in a different frame of mind
  • Lessons sell on craft and stage energy; sober coaching needs a quieter, more personal register — one tone can’t carry both
  • A generic one-page template would flatten a two-decade, five-country career into a bio and a contact form
  • Teaching online from Thailand to students worldwide — the site has to carry all the trust-building a local walk-in never needs
  • Booking had to work on day one (inquiry form) without boxing out tomorrow (a scheduling-and-payments marketplace)
Our solution

A dark stage, three doors.

A stage-lit brand built on Alex's real performance photography, with a homepage that routes each visitor to a dedicated funnel — and every CTA landing on a booking action.

01

Stage-light brand system

A near-black canvas, bone type, and a single signal-red accent set in Anton and Inter, built around Alex’s real live-performance photography — the site feels like the venues he plays, not a lesson-marketplace template.

02

Three doors, routed by intent

The homepage asks where you want to go and routes students, working musicians, and coaching clients to dedicated pages — lessons, for-musicians, and sober-coaching — each with its own pitch, tone, and booking path.

03

Every CTA books something

Lessons at $100/hr with 4- and 8-lesson packages and teen band coaching; every "book / start / inquire" button funnels into an inquiry pre-filled with the exact product the visitor chose.

04

Sober coaching in its own register

The coaching practice gets its own band and a quieter tone — 1:1 peer support from a musician who’s lived it — deliberately separated from the sales energy of the lessons funnel.

Technical approach

A fresh stack with future-proof booking.

Next.js 16 App Router

Built on the newest App Router with React 19 server components, strict TypeScript, Tailwind CSS v4, and Motion for scroll reveals — fully reduced-motion aware. Deployed on Vercel with Analytics and Speed Insights.

  • Next.js 16 App Router · React 19
  • TypeScript (strict) · Tailwind CSS v4
  • Motion reveals · prefers-reduced-motion safe
  • Vercel · Analytics + Speed Insights

Booking as configuration

Every "book / start / inquire" CTA routes through one thin booking abstraction. A single env var switches the whole site between the on-site inquiry form, an external scheduler link, or a future marketplace integration with scheduling and payments — no refactor, no redeploy of new code.

  • One booking abstraction behind every CTA
  • inquiry → link → marketplace, switched by env
  • CTAs carry the chosen product with them
  • Marketplace-ready without a rebuild

Server Action contact form

The inquiry form posts to a Zod-validated Server Action with a honeypot field. With an email key set it delivers the inquiry; without one it validates and logs server-side — so nothing broke before launch and nothing breaks after.

  • Zod-validated Server Action
  • Honeypot spam trap
  • Email delivery — optional by env
  • No API route, no client fetch code

Built to be found — by search and AI

A sharp pipeline turns Alex’s source photos into responsive WebP with blur placeholders. Per-page metadata, a dynamic OG image, sitemap, robots rules that explicitly allow AI crawlers, an llms.txt, and Person / WebSite / ProfessionalService JSON-LD make the site legible to search engines and AI answers alike.

  • sharp → responsive WebP + blur placeholders
  • Dynamic OG image · per-page metadata
  • robots.ts AI-crawler allow rules + llms.txt
  • Person · WebSite · ProfessionalService JSON-LD
Key decisions

Why we built it this way.

Route by intent, not by scroll

A teenager’s parent booking guitar lessons and a musician seeking sobriety support arrive with nothing in common. Splitting the site into three funnels lets each page speak plainly to one person instead of vaguely to everyone.

Booking is a config value

The practice will eventually live on a scheduling-and-payments marketplace. Wrapping every CTA in one abstraction now means that move is an env change, not a rebuild — and the interim site still converts today.

Real photography over stock

The design leans on genuine stage photos of Alex performing, processed into fast WebP. A personal brand sells on the person — stock imagery would undercut the entire pitch.

Honest placeholders

Testimonials, proof numbers, and the intro video ship as designed "coming soon" states until Alex supplies the real thing. No invented five-star quotes — credibility that survives scrutiny beats copy that invites it.

Built with

Technology stack.

Next.js 16React 19TypeScriptTailwind CSS v4MotionZodServer Actionssharpschema.org JSON-LDVercelAntonInter
See it live

Visit Alex Nishi.

Take a look at the live site — or tell us about a personal brand or practice of your own that needs a site with a point of view.