A website makeover for the hair salon

View Prototype

Role 🙋🏻‍♀️
UX/UI Designer
Tools đź› 
Figma, Maze
Project Type đź—“
Client, Responsive web design
Project Timeline ⏳
4 weeks
Giving the website a responsive makeover
TONI&GUY HK’s website not only serves as a platform for lead generation, where users can learn about the brand, its service offerings, price and stylists.
FOR THE PAST FEW YEARS, the hair salon has attracted a lot of expats and young working professionals especially those who work in Central through its global brand name, word-of-mouth and its instagram account exposure
HOWEVER, with expats leaving Hong Kong in recent years, the business is looking to expand its target audience. The hair salon is looking to attract more new customers and promote the brand via its website
THE PROBLEM
The website is lacking visual references and reliable information about their stylists' work. People aren't able to relate the website style to the global TONI&GUY brand, and some parts of the website aren't easy to navigate to.
A preview of the final product
Visual References
Users can access a library of images featuring different stylists’ work. People rely heavily on visual references of stylists’ work when exploring a hair salon. This gives them a good idea of a stylist’s style and whether it would suit them
Reliable Information
Users can access more informative and reliable information about the stylists via Google reviews, tags, descriptions. Most people would only consider a new hair salon if it was recommended by a friend or family member. Therefore, Google reviews provided by other customers can serve as a reliable source of recommendation
Reliable Information
Users can access more informative and reliable information about the stylists via Google reviews, tags, descriptions. Most people would only consider a new hair salon if it was recommended by a friend or family member. Therefore, Google reviews provided by other customers can serve as a reliable source of recommendation
More accessible and digestible information
80% of website visitors are viewing the website from their phones. Therefore, instead of long paragraphs about the stylists, users can now quickly scan through the key information and roles about the stylists via tags
BEFORE
AFTER
Alignment with global branding
People expect to be able to associate the website style with the global branding. As a result, all font styles are replaced with Futura PT, which is what is used in the global website
BEFORE
AFTER
Alignment with global branding
People expect to be able to associate the website style with the global branding. As a result, all font styles are replaced with Futura PT, which is what is used in the global website

View Mobile Prototype

View Desktop Prototype

My Process
Week 1
Research
Market Research
Competitive Analysis
Website Analysis
Survey
User Interview
Website Testing
Week 1
Define
Affinity Mapping
POVs, HMWs
User Persona
Venn Diagram
Week 2
Ideate
Feature List
‍Prioritisation Matrix
Sitemap
Task Flows
Week 2
Prototype
Sketch
Mid-fidelity wireframes
High-fidelity wireframes
Week 3-4
Testing
Usability Test
Frequency-Severity Matrix
Final Iterations
After understanding what the client wants
which is to increase lead generation and promote the brand through the website
User interview with non-existing TONI&GUY customers instead
I also want to understand how current customers are perceiving the brand and its website. However, given the website’s main objective is going to be lead generation I decided to interview non existing TONI&GUY customers instead
I interviewed 6 participants who fit the salon’s target audience. They are working professionals who would visit premium hair salons like TONI&GUY and are not oppose to visiting TONI&GUY HK in the future.
2 rounds of screening to ensure valuable and accurate insights
I conducts 2 rounds of screening survey with my network by asking questions such as: How much they usually spend on a haircut Which hair salons they visit Hair salon considerations
From the surveys, more than 70% consider Quality, Stylists and Friend/Family Referral as top factors to consider
My User Interview goals are to understand
How do people make an appointment for hairdressing services online
How do people explore a new hair salon
How do people see premium hairdressing and treatment services in Hong Kong
How do people perceive the current TONI&GUY HK website

View Competitive Analysis

From assumption to presumptions
Getting to know the premium hair salon industry better

View Affinity Mapping

What I learnt from User Interviews
1. Visual References
Are very important to people when exploring a new hair salon, as it is a reliable and effective way for them to see a stylist’s work. People especially love seeing the before and after comparison.
Instagram Presence
This explains why a lot of Hong Kong hair salons rely heavily on their instagram page for brand exposure and some don’t even have their own website
Most local hair salons don’t have their own website
I referenced a lot of overseas hair salon websites to see how they feature their stylists’ work. Abue Hair Group (Canada)’s website stood out to me for the way they organise their visuals
As a result, I added options in the Gallery Page for users to be able to view images by hair style. Options are specific to TONI&GUY HK’s styles such as Balayage, Effortless Classy etc.
Adding a Gallery Page means that users are able to have that visual reference within the website instead of having to navigate to their instagram page
2. Reliable information about stylists
80% of user interview participants prefer to stick with the same stylist. In fact, 2 of them had been following their stylist for more than 10 years even if that means switching hair salons
Stylist credibility is very important
In order to provide more reliable information about the stylists, the Home Page now features a customer testimonial section
Users are able to also read reviews specific to the stylist in their respective stylist page
Friends and family referral is a top hair salon consideration
Adding customer testimonial is especially important to participants who felt that trying out new hair salons often feels like trial and error. They would be more willing to try a new hair salon only if it was referred by their friends or family.
3. More Accessible Information
During user interviews, apart from asking participants about their hair salon experiences and considerations, I also got them to test out the current website by giving them 3 different scenarios
1. You are looking to do a hair treatment and you want to see whether they offer it and how much it would be
2. Now you are reminded that one of your friend is keen to find a new hair stylist, so you want to see more information about their hair stylists and whether there would be someone who would fit your friend’s criteria.
3. Going back to doing a hair treatment, say you’re happy with the fact that they do offer the service and want to make an appointment
I noticed some parts of the website wasn’t easy for users to navigate to and some information can be more accessible
The “Meet The Team” page is hidden within the menu bar under the “About” page
Users have to view information about Service Offerings and Price on 2 separate pages. 100% participants indicated that they prefer to view these information on the same page
As a result, the “Meet The Team” page, now called “Stylist” page can be accessed in the menu bar.
And users are now able to access both price and service information on the same page
To make call-to-action (CTA) buttons more accessible and also help drive lead generation for the business, users are able to access a CTA button on almost every page
Respective CTA buttons leads to a whatsapp page with a default message that already includes either the stylist’s or service offering name
90% of usability test participants enjoyed having the CTA buttons very accessible and didn’t feel overwhelmed
The initial design wasn’t very responsive to the mobile interface
One image would take up a few scroll lengths
Text heavy sections about stylists would require users to keep scrolling before they can get through the content
80% of the website visitors browse the website from their mobile phone
Tags are used on the Stylist Page such that users can quickly view key information about stylists at first sight and have the option to read through more details afterwards
4. Alignment with global brand
80% participants shared how they’re not able to relate the website’s styling with the impression of the global TONI&GUY brand they had in mind, especially the choice of color and font style
Referenced the global website
(https://toniandguy.com)'s
font choice and replaced all existing font styles to Futura PT
It was tempting to also replace the website’s current tan primary color with black as well. In the end, I decided to keep the color as it is to retain its unique branding as the Hong Kong branch of the global hair salon
Meet Amy
The hair salon hopper

View Define Phase Details

Deprioritising High Value, High Effort features
With Amy (user persona) in mind, I came up with many features and shared with my client to review together
Given the 4 weeks timeline constraint, there were features I had to forgo, such as a whatsapp chatbot that asks users to indicate their timeslot preference
Client prefers not to add an appointment booking system to the website
It was common for hair salons in other countries to incorporate an online booking system to their website such that users can make an appointment straight away
However, the client prefers to keep their stylists’ schedules confidential
With many features, I reminded myself to prioritise features that
Impact the user and business more
Some of the features include
Add a Gallery page to the website showcasing different stylists’ work
Add filter options for viewing stylists and their information by stylist expertise
Add reviews/
testimonials for individual stylists

View Prioritisation Matrix

Putting the pieces together
Improve website navigation and access to information
As mentioned earlier, from the website testing I noticed some parts of the website navigation could be more straight-forward and information can be more accessible
As a result, I made 2 changes to the sitemap with the intention to retain most of the current sitemap structure so that users who visited the website before would still find it familiar
Gallery Page
The new page - Gallery, is now placed as the first option given people’s emphasis on visual references when it comes to exploring hair salons
Stylists Page
The Stylists Page used to be hidden under the About section can now be accessed right after the Gallery Page.
This page is given more hierarchy given more than 70% survey respondents consider Stylists as one of the top factors to consider
Services Page
The Services Page now combines the previous “Services” and “Price List” page into one, such that users can view both information in one page
3 task flows that aim to explore as many touch points as possible
To help make sure the user flow is smooth and accessible with the new sitemap and new features added

View Sitemap & Task Flow

Bringing back the global branding, retaining the “local” tone
80% user interview participants find the current style of the website different from their impression of the global brand
I’ve decided to replace all fonts with Futura PT, which is the font style used for the global website and logo. The color palette remains the same, as the beige color helps the hair salon stand out as the Hong Kong (local) branch
With the focus on
visual references, reliable information about stylists, smooth and accessible navigation, alignment with global branding
I was able to transform the key pages of the website starting from sketches to high-fidelity wireframes
Home Page
Keeping the current navigation the same but also adding links across the Home Page for users to easily access other parts of the website
Stylists Page
Services Page
Utilising the website’s existing color palette to make content more digestible and primary buttons more visible at the same time
Gallery Page

View Mobile Prototype

View Desktop Prototype

Conducted 4 usability tests and discovered
The need to prioritise visual content
Participants prefer to explore images before anything else
“I prefer to see the images first and then check out the stylist. The current design did not help me to browse through the previous work and I was only given information on the price and stylists.”
The need to access stylist information easily
Participants prefer to have more context about the stylists on the stylist page
“I like the stylist page view but will be good to have something in writing, like how many years of experience etc.”
The need to make it easy to navigate to the Gallery Page
Participants weren’t able to directly locate the Gallery Page
The heatmap shows that they navigated to other pages initially before eventually selecting the Gallery Page for this task
The Final Product
“I had the pleasure of working with Adeline on revamping the UX/UI of TONI&GUY Hong Kong’s website and I cannot recommend her enough. Her expertise, attention to detail, and commitment to creating a user-friendly and attractive website was evident throughout the entire process. She was able to take my vision for a stronger call to action and turn it into a reality. Throughout the project, Adeline was responsive, communicative, and professional.”
Kathy Yue
Senior Marketing Manager, TATCHA
“Always walk through life as if you have something new to learn and you will.”
Vernon Howard
What I learnt
Design with client constraints in mind
Sometimes features that are ideal for the user might not work for the business
Prioritise important features amongst important features
What I Enjoyed
Never done learning
Working with and learning from the client about their business
Conducting user interviews and learning so much more about the premium hair dressing industry in Hong Kong
Constructive feedbacks from DesignLab facilitators, classmates and my mentor
What I’d Do Differently
Bringing ideas to life
If i have more time and get to do what i want i would want to add booking feature because it opens a lot more opptunity not just for the brand but also the business
And next step could be how can we solve the problem of featuring a booking system but still safe guard the stylist’s privacy in terms of their schedules
If time allows I would like to continue building the design for the client on wix
Thanks for reading all the way till here!
Wanna check out my other projects?
RESEARCH
DEFINE
IDEATE
PROTOTYPE
TESTING
Brewing designs that give different types of people joy everyday
Interactive Design - Black Sheep RestaurantsResponsive Design - CybersecuritySite Design Revamp - TONI&GUYNew Feature Design - Video StreamingMobile App UX - EdTech
HomeAbout
Let’s Chat!
đź‘‹
a.pm.tang@gmail.com
🤓