Case study / 11 — Website · Lifestyle

SALON website experience.

A stylish hair-salon website experience — brand warmth, service discovery and effortless booking.

Role
UI/UX Designer
Platforms
Web · Responsive
Category
Website · Lifestyle
Type
Booking Website
0
Platforms
0
Process phases
0
Key decisions
0
Research insights

OVERVIEWThe idea

A salon website is a booking engine wearing a brand. This concept pairs an editorial, warm visual identity with a frictionless path from inspiration to appointment.

THE PROBLEMWhat had to be solved

Salon sites often look beautiful but bury the booking. Visitors browse styles on the phone and decide in seconds.

MY ROLEWhat I owned

Full site design: brand-led art direction, services and stylist showcase, and the booking flow.

DESIGN PROCESSFrom idea to interface

01 Brand mood & direction
02 Site IA
03 Service & stylist pages
04 Booking flow
05 High-fidelity UI
06 Responsive polish

METHODThe workflow, end to end

01
Step 01
Brand mood & direction
02
Step 02
Site IA
03
Step 03
Service & stylist pages
04
Step 04
Booking flow
05
Step 05
High-fidelity UI
06
Step 06
Responsive polish

KEY DECISIONSWhat made it work

💇

Style-first imagery

Real results sell the chair before the price does.

📅

Two-tap booking

Service, time, done — no account required.

🧑‍🎨

Stylist profiles

Choosing a person, not a slot, builds loyalty.

📱

Thumb-reach layout

Designed for the phone in the coffee queue.

RESEARCH & INSIGHTSWhat shaped the direction

Positioning research came first: what should a visitor believe about the brand within five seconds, and what should they do within thirty? Analysis of comparable sites showed interchangeable layouts and stock messaging — differentiation itself became a design requirement.

Five seconds to credibility

Visitors judge the organisation by the craft of the site before reading a word. The design must be the proof.

🧭

One journey per visitor

Each audience arrives with a different question; the IA gives each a clear next step instead of a generic tour.

📱

Most first visits are mobile

The phone experience is the brand experience — designed first, not adapted later.

WHO IT'S FORDesigning for real people

PRIMARYThe evaluating decision-maker

Arrives from a referral or search, scanning for credibility signals: work, results, people. Needs a clear story and an easy way to make contact.

SECONDARYThe researching visitor

Compares several options in one sitting. Needs fast answers — what, for whom, at what quality — without hunting through pages.

DESIGN LANGUAGEThe visual system

An editorial layout built on generous whitespace, a disciplined type scale and full-bleed imagery where the work speaks. Motion is purposeful — reveals and transitions that guide reading order — and every section ends with a clear, unpushy next step.

Editorial whitespace
Disciplined type scale
Full-bleed imagery
Purposeful motion
Clear next step per section

TESTING & ITERATIONPressure-testing the design

The design was pressure-tested for the scan, not the read: five-second impression checks, scroll-depth reasoning, and mobile-first passes. Copy and layout were tightened together — every section had to justify its scroll.

PROJECT SCREENSInside the design

Cool Heads — home page
Cool Heads — about us page
Cool Heads — styles page
Cool Heads — team page

Each page auto-scrolls — hover to pause

OUTCOMEThe result

A salon site that books while it charms — full design on Behance. (This concept relates to my Freelancer.com 1st-prize salon redesign.)

View full project on Behance

KEY LEARNINGSWhat I'd carry forward

01 A website is an argument; every section is a claim with evidence.
02 Whitespace is a credibility signal, not wasted space.
03 Design the five-second visit first; the five-minute visit follows.
← Previous
Data Management Dashboard