Review cards a short quote, a star rating and the client's name
Component 01
Work / Case study 09 / Website
Cool Heads Salon website
A hair salon booking platform for a men's grooming brand with many shops. Customers find a shop, pick a barber and book a chair. My design won 1st prize in a Freelancer.com design contest, chosen from more than 480 entries.
What I did
UXWireframesWeb design
Design systemPrototyping
Find a shop, pick a barber, book a chair
Cool Heads is a men's grooming brand with many shops. It needed a website that works as a booking platform: show the brand, help people find the nearest shop and get them into a chair. The brief was run as an open design contest on Freelancer.com.
I wireframed nine pages first, then built a small design system and designed the final pages in Figma. The entry won 1st prize.
- Project
- Cool Heads, men's grooming brand
- Type
- Hair salon booking platform
- Result
- 1st prize, Freelancer.com design contest (480+ entries)
- Deliverables
- 9 desktop pages, wireframes, components
- Tools
- Figma
Context
Many shops, one brand
Each Cool Heads shop has its own address, hours, phone number, team and waiting time. A customer needs to find the nearest shop, see who is free and book, often on a phone.
Goal
A premium barbershop feel, with booking always one tap away
The site had to feel like a premium men's barbershop and turn visits into bookings. The red "Make an Appointment" button sits in the header of every page, and every shop card ends in a booking action.
Challenges
Twelve locations, one clear path
Showing twelve areas without a wall of addresses was the hardest part. I put the area list, the shop cards and a map side by side, so people can scan by name or by place. Each card shows the waiting time, so people can choose the quickest shop.
The look had to stay warm while feeling premium. Dark barbershop photos and one script word carry the mood in the hero, and calm cream sections keep the rest easy to read.
Process
Wireframes first, polish second
- 01Read the brief and listed what customers come to do
- 02Wireframed all nine pages
- 03Set the colours, type and components
- 04Designed the final desktop pages
- 05Reviewed every page against the brief
- 06Submitted the entry, which won 1st prize
"Every page leads to one thing: a booked chair."
Wireframe to design
From grey boxes to a finished site
Each page started as a grey wireframe to settle the content and order. The final design added the photos, the brand and the location finder. Drag the line to compare them.
WireframeFinal design
Design direction
Four rules for the whole site
BOOKING FIRST
Book from every page
"Make an Appointment" lives in the header, and every shop card and hero ends in a booking action.
LOCATION FINDER
List, cards and map together
An area list, shop cards and a map sit side by side, with the waiting time on each card.
WARM, PREMIUM
Dark photos, cream pages
Moody barbershop photos and a script word set the tone. Cream sections keep reading easy.
ONE GRADIENT
Red to magenta, for actions only
The brand gradient is kept for buttons, so red always means book or act.
Design system
Built once, reused on every page
The Figma file has Wireframe, Final and Components pages. Colours and text use styles: 21 colour styles and 15 text styles in Plus Jakarta Sans. More than 20 components, from shop and review cards to the nav bar and footer, build all nine pages.
Colour a red-to-magenta gradient, navy, ink and warm cream
Component 02
Type Plus Jakarta Sans everywhere, one script word in the hero
Component 03
Booking a shop card above one big gradient button
Component 04
Shop cards a team photo, the address and two actions
Component 05
Location card address, hours, phone and a map pin
Component 06
Career card the role, how and where, and one Apply button
Component 07
Hero a badge, a three-line title with a script word, one Book Now button
Component 08
Result
1st prize out of 480+ entries
The client chose this design from more than 480 entries sent in by designers worldwide. The final file holds nine desktop pages, a matching wireframe for each and the component library.
What I took away
- 01With many locations, the list and the map have to work as one.
- 02One clear action on every page makes a site easier to use, and to judge.
- 03Wireframes first left more time to polish the final pages.
Keep exploring
Next: Seller Dashboard
Previous: Voizzit App