Shearwater Salon
Design study for a hair salon whose price list re-prices itself for each stylist level.
A design study. Shearwater Salon is a made-up business, so the copy, prices and details are invented to show how the design works.
Overview
Project overview
A made-up hair salon in Wilmington with five stylists at three levels. A haircut costs a different amount depending on who cuts it, so one switch re-prices the whole menu for new talent, senior or master stylists, and the booking form picks up the level you chose.
Approach
How I approached it
This is a design study for a hair salon I made up. Many salons charge by stylist level, so a haircut and style might cost $55, $75 or $95 depending on who cuts it. The usual way to show that is a table with three price columns, which is hard to read on a phone. The page’s job is simpler: tell you what your appointment will cost, then let you book it.
So the price list has a switch at the top. You pick new talent, senior or master, and every price on the menu changes to that level, with one line explaining what the level means. The switch stays on screen while you scroll the list, and when you get to the form it already has your level filled in and shows the price of the service you choose.
The look is a fashion magazine cover in chartreuse and black. The display type is a very large italic serif, the menu runs in columns with heavy rules between them, and the prices sit huge in the margin where a magazine prints its feature numbers. The rest of the page stays plain: the stylists as text, the patch test rule for first color visits, the cancellation policy, and the hours.
What was delivered
Deliverables
- A price list with a stylist-level switch: choose new talent, senior or master and every price on the menu changes at once
- A one-line note under the switch on what each level means, in years behind the chair
- The five stylists as text, grouped by level, with their specialties and the days they work
- A first color visit note on the 48-hour patch test, and the cancellation policy in one sentence
- A booking form that starts on the level you picked and shows the price of the service before you send it
Key decisions
- Laid out like a fashion magazine: a huge italic masthead, a cut-out photo of shears on a chartreuse cover, and black rules between the columns
- Each price is set huge in italic where a magazine would put a page number, so the menu looks numbered without pretending to be a sequence
- The switch works without JavaScript; with it, the new prices roll up into place from the top of the list down