Skip to contentSkip to content
Expedition 01Three chairs, Kettle StreetHair Salon ConceptAlder Bend, BCThe Trailhead· $2,000

Mica Hair Studio

A salon site that shows a client what their colour will take, before they book.

10

Levels on the colour ladder

3

Lights to judge colour in

8

Services priced with a ceiling

3

Stylist pages with open times

mica-hair-studio.vercel.app
Mica Hair Studio live site screenshot
Built for salons, barbers and colour studios

Booking a colour appointment starts with a guess.

01

The menu is written for stylists.

Balayage, foils, a gloss, a root retouch. A first-time client picks by guessing and can book the wrong service for their hair.

And it costs the businessA wrong booking means the wrong block of time. The stylist rushes a four-hour job or loses a chair for two.

02

A starting-at price tells them nothing.

A price that only goes up leaves people unsure what they are agreeing to, so they put the appointment off.

And it costs the businessThe talk about money happens at the till after three hours in the chair, which is the worst time to have it.

03

A saved photo is not a plan.

Reference photos are styled, filtered and lit well. Nobody has told the client what their own hair can reach, or how many visits it takes.

And it costs the businessThe gap between the photo and the result turns into redo appointments and unhappy clients.

The approach

Built to answer what a colourist would ask.

01

A consultation on the homepage.

Pick your current level and tone, then the one you want, and the site says what it takes, including when the answer is no.

02

Every price has a ceiling.

Eight services show a floor and a top, the time they take and what moves the number.

03

Every chair shows its open times.

Each of the three stylists has a page listing the levels they work in, whether they take new clients, and their open times.

04

Access facts before the door.

Step-free entry, the door width, parking, scent days, noise and silent appointments are all written on the directions page.

The thinking behind the build

Mica Hair Studio is a concept build: a fictional three-chair salon in the invented town of Alder Bend, BC, made to show what the Trailhead package can do for a salon. Booking is the part salon sites already handle. Mica spends its effort on the step before it, when someone is unsure what to book, what it will cost and whether the photo on their phone will work on their hair.

Before any design, I read 22 real salon websites in full. They were built around booking, with photos around a button. Few of them helped the person who was still deciding: unsure whether what they want is called balayage, whether old box dye rules it out, or whether the price on the menu is the price they will pay. That gap became the brief for Mica.

The concept came from the colourist's own tool. A swatch ring settles the argument a photo starts, because it shows real colour against real hair. So the homepage is a consultation. A visitor picks the level and tone of their hair now, saves it, then picks the colour they want. The site shows both under salon light, daylight and six in the evening, and says what the change takes, including when the answer is no.

Setting the ring to six in the evening shows how much colour shifts in weaker light, which is why a good colourist carries colour to the window before anyone pays. The line under the ring says exactly that. A client who has watched it happen on their own screen understands the walk to the window before they ever arrive, and a stylist no longer has to explain it from scratch.

From there a first-time client has a clear path. The price page lists eight services, each with a floor and a ceiling, the time it takes and what moves the number. Four questions about the goal, the length and what is already in the hair turn into an estimate. A minute-by-minute account explains the three hours of a colour appointment, and a shelf of six aftercare products says who each one is wrong for. The booking page shows each stylist's openings and a waitlist.

The directions page publishes the access details a client would otherwise phone to ask about: street-level entry, a 32-inch door, parking, which days smell of colour, how loud the room is, and silent appointments with any stylist. The served pages load no booking widget, map embed or outside script, which I checked on each main page. The site is built to work without JavaScript or 3D support, and the ring responds to the arrow keys.

Everything about Mica is invented: the salon, the town, the three stylists and the prices. The build is what transfers. For a working salon, the same pages take their own chairs, their price list with a ceiling on every service, their colour lines, their access details and their booking calendar, with the ring holding swatches from the colour they actually use.

Why it converts

What a client knows before they sit in the chair.

The top of the price

Every service shows the most it will cost, so the number at the till is one they already saw.

A no that makes sense

Having watched colour shift under evening light, a client hears that a change takes two visits as care for their hair.

The room before the door

Step-free entry, parking, noise and scent are written down, so nobody has to phone a stranger to ask.

Everything that shipped.

I built Mica on the Trailhead scope with one signature: a WebGL swatch ring that works as a colour consultation, with ten levels, six tone families and three kinds of light. Around it sit a price page with a ceiling on all eight services and a four-question estimator, three stylist pages with their levels and openings, a booking page with a waitlist, a directions page with full access details, and an accessibility statement that names its own limits.

Highlights

  • A colour consultation on the homepage, with ten levels, six tone families and three lights to compare them under
  • Eight services priced with a floor and a ceiling, plus the time each one takes
  • A four-question estimator that names the service and gives a likely price, with nothing saved
  • A minute-by-minute account of a three-hour colour appointment, from sitting down to the window
  • An aftercare shelf of six products, each saying who it is wrong for
  • A page for each stylist with the levels they work in, new-client status and open times
  • A booking page that shows each stylist's open times, with a waitlist for short-notice spots
  • Access details on the directions page: step-free entry, door width, parking, scent, noise and silent appointments

Pages and surfaces

  • Home (the colour consultation)
  • Prices and services (with ceilings and the estimator)
  • Check the chairs (booking and waitlist)
  • The chairs
  • Three stylist pages
  • Find us (directions and access)
  • Accessibility
  • Privacy
  • Terms

Real code. Real routes. Production ready.

  • The swatch ring is drawn in WebGL2 on the homepage only, so the other pages stay light and quick
  • The pages load no booking widget, map embed, font service or outside script, so nothing reports to another company
  • Map links open the phone's own maps app, which is faster than an embedded map and sets no cookies
  • Built to work with JavaScript off and without 3D support, and the ring responds to arrow keys
  • Stylists, services and prices are stored as data, so a chair changing hands is one edit

Stack

Next.jsReactTypeScriptTailwind CSSWebGL2Vercel

How it was built

Mica Hair Studio is a fictional business built as a concept to show the Trailhead package for salons, and the site says so in its footer. Alder Bend, BC does not exist, and neither do the stylists, prices, policies, phone number or address. No real salon, client or result is implied. Counts read from the live site on October 5, 2026.

Show clients the plan before they book.

The same consultation, price ceilings and chair pages can be built around your salon, your stylists and your colour lines. Start with the free check-up and I will show you where clients get stuck on your current site. No website yet? Tell me about your chairs and I will show you where to begin.

No website yet? Start your first one here

Built as The Trailhead, $2,000. Own It Monthly can spread the build over 12 payments, yours outright at the end.

In this industry yourself? Read the salon and barber website design playbook.

More work

01 / 23