Blown runs four premium salons in Bengaluru. They had moved their brand upmarket and needed a site to match. The brief: make a ₹2,599 haircut worth booking from a phone, and let a team with no web developer run the site themselves. I did it solo, from research to the last deploy.
Google Analytics 4. Taps are clicks, not completed bookings, and one visitor can tap more than once.
A ₹2,599 haircut starts on a phone.
The first screen has to feel worth it.
Four salons. No web team.
Every change is made from a phone, then published.
Six months on the new site.
People don't just look. They tap Book.
Read the client's brief and old content, then mapped three journeys: a first-time visitor, a regular, and someone who only comes to shop.
Explored five art directions for the home page, locked Cinematic Dark on the brand's platinum and black, and designed for the phone, where most visitors arrive.
Built it in Next.js with Payload CMS inside the app, tracked every booking tap, deployed it, and handed the team a written guide.
Client’s Problem
Four salons, one brand, and three places to send people: the salons on the site, bookings on Fresha, products on Shopify. Most visitors arrive on a phone, the menu runs to dozens of services, and the offers change every month, with no one in-house to update the site.
About five weeks from the first commit to a live, tracked site, then one change request in June.
Mar 20 - Mar 27
Research
1
Mar 28 - Mar 29
Directions and Design System
2
Mar 30 - Apr 10
Build and CMS
3
Apr 21 - Apr 23
Tracking and SEO
4
Jun 2
Change Request
5
- Brief and existing content
- Three user journeys
- Information architecture
- Scroll behaviour study
Each journey maps what the visitor does and thinks at every stage, and what each screen has to earn. The home page is built around the first-time explorer.
The hero
Lands on the first screen and is asked to find the nearest salon.
“Which Blown is most convenient for my visit today?”
Design: Share a location and the page moves on to the salons. Without it, scrolling stays manual.
1
The salons
Scrolls the salon cards and reads what each one is known for.
“Indiranagar is closest to me.”
Design: The closest salon, or the flagship, is the highlighted card.
2
A salon
Opens a salon to see its artists and its menu.
“The menu is clear and premium.”
Design: On a phone the salon opens full screen, with no page reload.
3
Book
Picks Book or a WhatsApp chat from the bar that stays on screen.
“I'll chat to the specialist first, then secure my slot.”
Design: Book and WhatsApp stay pinned at the bottom of the screen.
4
Knows what they want. Book Now sits beside the main path and goes straight to Fresha or WhatsApp, so a regular never has to browse.
Only wants to restock. A Restock pill stays on every screen and opens the shop, so a product never waits behind a booking.
Blown's brief was platinum on black. The system keeps to one typeface, Inter in three weights, and one colour stepped by opacity, so menus, prices and photos all sit in the same dark.
The Blown Experience.
Inter 200, display
Inter 300, body
Inter 500, labels
#050505
#080808
#0A0A0A
#E5E4E2 platinum
80
60
40
20
12
8
The menu runs to more than twenty categories, priced by hair length. On a phone it filters in place, and Book and WhatsApp stay pinned under it. 1,580 visitors used the filters, 8,199 times.
Book is on the first screen, and Book and WhatsApp are on every salon, the menu, the sidebar and the footer, with Call in the footer. Over six months that came to 2,761 Book taps, 536 WhatsApp and 69 calls.
The CMS lives inside the site. From a phone, the team edits salons, hours, menus, artists, the monthly edit, hero media, SEO and the legal pages, with a guide written for them. Every Book, WhatsApp and Call tap is tracked with the salon, artist or product it came from.
Next.js
TypeScript
Tailwind CSS
Framer Motion
GSAP
Payload CMS
Postgres
GA4
GA was never told which taps count as a booking, so its own funnel reads every booking as a drop-off. Every number here comes from the raw taps instead. Next: tell GA that Book, WhatsApp and Call are the goals, and pull Fresha's bookings, so taps can be read as bookings.