Customer-first website
OVERVIEW
Gro is a mobile and desktop website for a South London Hair salon primarily used by new clients to view a hair stylists work, and make a decision to book an appointment.
The existing website was created by the owner as a stop gap until a more professional solution was created.
Page retention was poor with a lot of customer feedback about the poor usability of the website
ROLE
Product Designer
Product Strategy, User Research, Interaction, Visual design, Prototyping & Testing, Pitching
"The site is performing very poorly, and the experience on mobile is not good. No wonder customers don't like it"
Roman Ospina (Director)
Background
The salon opened in 2001 and was the only salon in the area. Because of this fact, the website was never prioritised as clients didn't have other options.
As competition increased in the area, new clients bookings began to fall and the business started to struggle.
The current website was created by the salon owner using an "off-the-shelf" template. The site was not designed with mobile in mind and was generally messy, using multiple colours, fonts, button sizes and page styles.
Analytics showed website visitors did not stay long before clicking away, without booking.
Original Mobile Website - October 2022
As part of a marketing push, the salon wanted to redesign their website with the customer solely in mind, with a mobile-first thought process.
I was the sole designer on this project, working closely with the salon director, as well as several senior members of staff. I was given access to some of the salon's regular clients to allow for two usability study rounds.
My brief was to create prototypes for a new mobile and desktop website that prioritised the clients journey while still remaining faithful to the salon's DNA. Upon approval, I was required to create and publish the website on the WIX platform.
Understanding the problem
I conducted a usability study using in-person interviews with the salon team, as well as online interviews with regular salon clients.
The goal was to understand the frustrations with the current website, and understand what the clients primary need is when visiting a salon website, and how best to facilitate that.
User interview
User interview
90% felt the website on mobile was very poor and difficult to navigate
85% wanted to see a picture of the individual stylist before making a booking
70% wanted to see examples of the individual stylists past work, before making a booking
50% wanted a quick booking experience
"I just want to find a stylist who gets me, and gets my style. It is a lottery finding a new stylist"
Sangit Samra (salon customer)
My goal
To create a mobile-first design that allows the customer to see each stylist, with examples of their work before, making a booking.
Persona's
The first-hand user research with the salon's clients meant a lot of insight had already been discovered. It was only a matter of consolidating the findings to form user persona's.
Chloe, Work Hard, Play Hard
Demographic
Age: 29
Gender: Female
Location: London, UK
Marital status: Single
Kids: No
Profession: Marketing Manager
Income: £40K
Story
Works at a fintech in central London. Job is high pressure and highly competitive.
Drinks with friends on a weekend to let of some steam.
Image is very important personally and professionally. No time for mistakes with her appearance.
Goals
A hair stylist that can provide solutions to all her needs.
A hair salon that uses high quality products.
Weekend appointments.
Good hair guaranteed.
Frustrations
Searching Instagram for a stylist with favourable work examples who is in London.
Stylists who do not listen.
Difficult booking processes.
Limited availability.
Over-priced.
David, Dress to impress
Demographic
Age: 35
Gender: Male
Location: London, UK
Marital status: In a relationship
Kids: No
Profession: Investment Manager
Income: £90K
Story
David works at an investment bank in Canary Wharf. He works incredibly long hours.
He enjoys eating out when not at work.
His work environment is very competitive, and he feels looking polished is important.
Goals
A stylist who is easy to get on and chat to.
A salon local to home
Weekend appointments.
On-trend look
Frustrations
Finding "my" stylist.
Being upsold things I don't want.
Not being able to make multiple appointments
Being moved from stylist to stylist.
Not being able to buy the products that get used on my hair.
Claire, Live, Laugh, Love
Demographic
Age: 28
Gender: Female
Location: London, UK
Marital status: In a relationship
Kids: One
Profession: Lifestyle influencer
Income: £60K
Story
Claire has been a lifestyle influencer for the past 3 years based in South London.
She likes to promote black-owned businesses and products to her audience.
She likes to document her hair journey to her audience.
Goals
Stylist with afro hair who has first hand experience in cutting and caring for.
A salon using high quality products
Flexible appointments.
Frustrations
A stylist who is actually skilled in afro hair
Products designed for afro hair.
Being told how I should care for my hair.
Awkward opening hours
Competitor Analysis
Headmasters
Navigation - Outstanding
Simple menu structure
Clear buttons
Simple layout means moving through the website is easy
Rush
User Flow - Outstanding
Book Now CTA first option on home screen
Booking form is clear and easy to use.
Edward James
Brand Identity - Outstanding
Brand is luxury and the website feels expensive.
Simple theme suits the brand style and ethos.
View the full competitive audit excel document
Defining the flow
The flowchart shows how the website will be organised. This allowed discussion with the salon owner to ensure his desired features were included.
Design - Lo-fidelity prototypes
After the flow was defined and the required screens were identified, paper sketches were used to generate a range of ideas that could be developed quickly into a digital wireframe that could be prototyped and tested with users.
Development - Hi-fidelity prototypes
To create the hi-fidelity designs, a mixture of inspirations and design decisions were taken based on the client supplied branding guidelines, the physical salon itself, aswell as direct and indirect competitors uncovered in the competitve audit
UI Kit
Logo
Typography
Colours
Icons
Buttons
Homepage / Meet the Team / Services
Homepage Salon slogan text integrated into the hero image
Meet the Team Hero image added to top of page.
Stylist profile card created - based on the style of a dating profile to create something visually familiar to most people in the target demographic.
Services Hero image added to top of page. Secondary colour added to break up an all white page.
Usability Study - Revision 2 Prototype
At this stage, a second usability study was conducted to review the Revision 2 Prototype. To avoid bias, new customers were interviewed online to understand if the design was meeting the goal. This generated feedback which would guide Revision 3.
Aaron - "I would show more variety of hairstyles you guys do in the gallery. I feel you do a lot more than you show."
Abbie - "The hero images are lovely - but is the salon specialising in niche hair colours? I am not sure the images represent me as a customer".
Sean - "Is there a gallery? I didn't see it. Maybe add something to the homepage."
Clockwise from Top Left:
Homepage - Hero image changed due to second usability study. 3 participants stated the hero images were not indicative of the normal Gro
customer and did not appeal to them. 2 participants asked if the salon was a "crazy colour" only salon.
Meet the Team - Page heading moved to top bar. Hero image removed. 4 participants felt it was "cluttering" the page.
Services - Changes as per Meet the Team
Gallery - Wider variety of images including to better represent the salon's strengths
Homepage - Condensed gallery added to homepage, linking directly to the main gallery page.
Delivery
The client was delighted during the final review stage where the Revision 3 prototype was presented.
The client was happy the original goal had been met - to create a mobile-first design that allows the customer to see each stylist, with examples of their work before making a booking.
The Homepage provides all the information the customer requires in a slimmed down and simple way, without needing to click to a second page. If more detail is required, the customer can navigate to the specific page.
Example left - the stylists name and pictures are all on the Homepage, if this is all that is important to the customer.
However, if more information is required, clicking learn more takes them to "Meet the Team", providing a written profile, examples of the stylists work as well as prices for guidance.
I proceeded to build the mobile and desktop website on the clients chosen platform, Wix, where it went live in January 2023.
The month following launch -
Average engagement time rose by 50% from 22 seconds to 31 seconds
Views by Page Title on "Meet the Team" rose over 200%, from 128 in December 2022, to 306 in January 2023.
Bookings made through the website in January 2023, compared to January 2022 increased by 20%.
Home Screen - Desktop Website - January 2023
Meet the Team - Desktop Website - January 2023
Contact Us - Desktop Website - January 2023
More projects
