Brighton's award-winning salon, completely reimagined online

The salon

K Bella Hair Studio & Spa is a full-service salon and spa in Brighton, Michigan. My wife Kristan and I opened it in 2009, and it has grown into two studios with more than 30 people on staff, voted Best of Livingston County every year since 2021. Kristan is a clinically certified trichologist and a certified cranial prosthesis specialist, so K Bella also serves clients dealing with medical hair loss from alopecia, cancer treatment and autoimmune conditions. No other salon in the local market offers that.

She runs everything inside the salon. I run everything outside it, and the website has always been my half. That is worth saying up front, because it shaped the whole build. I am not a vendor who hands over a site and leaves. I am the person who has to live with it.

The brief I gave myself

A salon produces content constantly. Every client is a potential photograph. Every happy client is a potential review. Every form submission is a person waiting to hear back. Most salon websites go stale because keeping up with all of that is a full-time job that nobody in a salon actually has.

So the goal was never a site that looks good on launch day. It was a site that keeps itself current, and turns work the salon is already doing into content without anyone sitting down to do data entry.

One upload, six destinations

A stylist finishes a client, photographs the work, and uploads it from their phone. From that one upload, the photo is straightened, cropped to a consistent ratio, captioned and tagged, then published to:

• the homepage
• the page for the service that was performed
• the before-and-after wall
• that stylist's own bio page
• the screens mounted around the salon
• the salon's Facebook and Instagram

Nobody re-uploads it anywhere. Nobody files it. Before-and-after pairs are matched by perceptual hash rather than by filename convention, so an "after" photograph finds its own "before" without a human maintaining a list, and every photo carries a permanent link of its own.

Reviews that file themselves

Reviews sync in from the Google Business Profile API on their own. The site reads each one, works out which stylist it is about and which service it describes, and places it on that stylist's bio, on the relevant service page, and on the review wall. When the match is not confident, the review is flagged for a person to confirm rather than guessed at.

There is a filter that keeps a review from ever crediting a stylist who has left, and a rule I do not break: syndicated review text is never edited. Those are customers' words.

Eleven forms, and nothing falls through

This is the part that took the longest and the part I am proudest of.

There are 11 forms across the site. Every submission is captured into a tracker and routed automatically to whoever is supposed to handle it, based on which form it came from. That person gets an email with a single-use signed link that drops them straight onto that lead, with no login required.

They record what actually happened: called, booked, left a voicemail, not a fit. The system keeps a running activity log of who did what, when, and how they got there. Leads can be reassigned, and anything sitting too long surfaces as overdue. Stale leads close themselves out.

A missed inquiry is the most expensive thing that can happen to a salon website, and it is invisible when it happens. This is the part of the build that exists so it cannot.

Everything points back to two things

Underneath all of it is a cross-reference system. Almost every piece of content points back to a team member, a service, or both. Photos, reviews, FAQs, specials, videos, articles, before-and-after pairs and aftercare documents all connect to the same two anchors.

One photograph can legitimately appear on four pages. A review entered once surfaces in three places. Specials expire on their own date. Gallery categories only appear once they have enough real work behind them to be worth visiting. The service and team counts printed on the site are not typed in, they are counted live from the content itself, so they cannot drift out of date.

The structure

Hair and Beauty sit at the top level of the site rather than nested under a services menu. That is one fewer tap from a phone to any service page, keywords at root level, and two independent hubs instead of one diluted parent. Ten hair services, eight beauty services, and Weddings standing on its own, covering 109 individually bookable services.

Booking goes straight into Meevo through per-stylist deep links, so a client who wants a specific person lands in the booking system with that stylist already selected. The Book button appears only when a booking link exists in the CMS, which means there is no second switch to forget and no button that leads somewhere dead.

Built from nothing

The front end is entirely custom. No Bootstrap, no Tailwind, no jQuery, no React. Vanilla JavaScript and hand-written CSS, mobile-first throughout. It ships a complete light and dark theme, resolved before the first paint so a returning visitor never catches a flash of the wrong palette. Every animation sits behind a reduced-motion guard, and the build targets WCAG 2.1 AA.

All 239 database changes shipped as dated, idempotent migration scripts rather than hand edits in an admin panel, so the entire structure can be rebuilt from scratch on any environment.

Still being built

None of this was automated so the site could be left alone. I am in it constantly, and it will keep getting articles, new work and steady optimization for as long as the salon is open. Automating the upkeep is what frees that time up. It is the difference between a website that ages and one that compounds.