Dream Glow Atelier
Responsive Web Design
A responsive portfolio and booking website for two hair stylists, Dawn and Grace — with a complimentary self-service consultation questionnaire
Project Date: December 2022 / 5 weeks
Company: Dream Glow Atelier
My Role: UX Researcher/Designer
Responsibilities: Research, personas, sketching, wireframing, prototyping, and user testing
Team: Mentor, Group Crit Peers
Overview
Dream Glow Atelier is a hair salon run by two hair stylists, Dawn and Grace, who both specialize in haircuts, styling and creative color. They have been working in the industry for about 10 years and have been taking appointments via Instagram direct messages. Their social media following has increased tremendously after a stellar review from one of their customers and they are now receiving an influx of requests for appointments — much more than they can currently handle.
The Problem
❌
Dream Glow Atelier is spending more time consulting and booking customers than they are actually doing hair.
All consultations at Dream Glow Atelier is complimentary and both hair stylists continually go back and forth with potential customers over direct messages.
Dawn has noted that she spends at least 5-6 hours of the week just booking and consulting customers. If we are comparing that to her rate of a 1-hr service costing about $60, Dawn is losing out on a minimum of $300 per week for a task that can be automated or at least cut down in time.
The Main Goal
🎯
Create a responsive website that houses an online booking service, a self-service consultation, and a filterable portfolio for each hairstylist.
What do we need to understand to achieve this goal?
What does a hairdresser need to know about their customer prior to an appointment?
What are customers looking for when booking a hair service?
What is the best way to bridge the customers wants and expectations with the hairdresser’s capabilities and knowledge?
Understanding the users through research
What does a hairdresser need to know about their customer prior to an appointment?
Research Methods
1 on 1 interviews
During a consultation, hair stylists will generally ask about:
Hair history
How often do you change hair colors
How long do you plan on keeping this color
How much work do you want to put in to maintain the desired color
Has henna been used in the hair
Research Details
-
Only one interview was conducted. Participant was a 35 year old woman living in San Jose, CA working as both a production support coordinator and a hairdresser. Participant has been doing hair for 10 years and specializes in haircuts, creative color, and hair extensions. 80% of their clientele came in for hair color services.
For color and hair extensions, participant always required a consultation for first-time customers before booking appointments.
They did consultations 3 different ways:
Online via Zoom/FaceTime (45 minutes)
In person at the salon (45min - 1hr)
Social media direct messaging/texting (1-3 days due to asynchronous communication)
If the consultation was through text or direct message, user would need to send photos of their existing hair in natural light (preferably outside) and any type of good lighting inside.
Pain Points
Participant’s main pain point was spending too much unpaid time doing consultations. Most questions they asked could be filled out in a simple questionnaire, but their online solution did not have that as a feature. They would spend 7-11 hrs a week doing the following:
Reaching out to non-confirmed appointments
Consultations
Inquiries through social media
Phone calls (making appointments or consulting)
What are customers looking for when booking a hair service?
Research Methods
Secondary Research
User Surveys
The top 3 factors users consider when looking for a hair stylist is:
Price
If the hairstylist can do the haircut they want
Quality and amount of reviews on Yelp/Google
Users also vastly prefer making appointments via online booking or via text messaging.
Research Details
-
A survey was conducted via Google Forms asking users about their methods of searching for a hairstylist, what they look for before booking, and how they go about making appointments. 19 responses were received: 74% of the participants identified as female and the other 26% identified as male. All participants currently live in North America.
Findings
Majority of participants only get their hair cut but not colored
Online booking systems and texting the stylist directly are vastly preferred compared to calling in or walking in to book
The top 3 factors users consider when looking for a hairstylist is price, if the hairstylist can do the haircut they want, and how many good reviews they have on Yelp/Google
The 4th top factor is if the hairstylist specializes in a specific hair type (Worth mentioning since participants did add additional notes regarding it)
Only 4 of participants have done a consultation prior to an appointment and 3 of those participants did the consultation in the salon while the other 1 did it through text message.
Full Survey Results
When asked how often users got their hair cut, the top three responses were
Every 6 months (36.8%)
Once a year (21.1%)
Every 2 months (15.8%)
When asked how often users colored their hair, the top three responses were
Never, N/A (63.2%)
Sporadically/As needed (15.9%)
Every 6 months and Every 2 months (5.3% each)
When asked where users go first to find a hairstylist, the top three responses were
Ask a family member or friend for recommendations (47.4%)
Google (31.6%)
Yelp (10.5%)
The top three factors users consider when looking for a hairstylist/hair salon is
Price (78.9%)
If the hairstylist can do the haircut they want + how many good reviews they have on Yelp/Google (63.2%)
If the hairstylist specializes in a specific hair type (curly hair, thick hair, thin hair, etc.)
When asked how users make appointments with their current hairstylist, the top three responses were
Online booking system (36.8%)
Calling the business directly (26.3%)
Texting the hairstylist (21.1%)
When asked what method users preferred to make their appointments, the top responses were
Online booking system (57.9%)
Texting the hairstylist (21.1%)
Calling the business directly (15.8%)
In regards to consultations:
Only 4 of the participants had a consultation prior to coming into a salon
50% of those were for hair color, 25% was for a haircut, and 25% was for a perm
75% of the participants had their consultation done in person at the salon and 25% was done through text message
What is the best way to bridge the customers wants and expectations with the hairdresser’s capabilities and knowledge?
Research Methods
Secondary Research
1 on 1 interviews
The best way for customers and hairdressers to have the same vision and understanding of expectations is to…
Hairdressers would provide photos of their existing work
Customers would provide photos of the hair they wish to have
Customers would need to provide truthful and accurate information about their hair history
Stylists would need to be truthful about whether or not the desired hair color/style is feasible with the customer’s current hair health and history
Research Details
-
Only one interview was conducted. Participant was a 35 year old woman living in San Jose, CA working as both a production support coordinator and a hairdresser. Participant has been doing hair for 10 years and specializes in haircuts, creative color, and hair extensions. 80% of their clientele came in for hair color services.
For color and hair extensions, participant always required a consultation for first-time customers before booking appointments.
They did consultations 3 different ways:
Online via Zoom/FaceTime (45 minutes)
In person at the salon (45min - 1hr)
Social media direct messaging/texting (1-3 days due to asynchronous communication)
If the consultation was through text or direct message, user would need to send photos of their existing hair in natural light (preferably outside) and any type of good lighting inside.
Pain Points
Participant’s main pain point was spending too much unpaid time doing consultations. Most questions they asked could be filled out in a simple questionnaire, but their online solution did not have that as a feature. They would spend 7-11 hrs a week doing the following:
Reaching out to non-confirmed appointments
Consultations
Inquiries through social media
Phone calls (making appointments or consulting)
Personas
Research Takeaways: What did we learn from the research?
Customers care most about price, making sure they get the hairstyle they want, and the credibility of the stylist
People prefer making appointments via online booking or via text
Consultations were usually complimentary and take around an average of 45 minutes
Here’s how we translate that into design goals…
Customers care most about price, making sure they get the hairstyle they want, and the credibility of the stylist
Prices need to be clearly stated
Users should be able to easily identify if hairdresser suits their needs
Reviews should be easily accessible
↓
People prefer making appointments via online booking or via text
↓
Easy to use online booking system that has enough information for customer to make bookings and also fill out appropriate consultation info as needed
Consultations were usually complimentary and take around an average of 45 minutes
↓
User should be able to fill out a questionnaire that takes less than 45 minutes but still properly answers all questions that a stylist would have
And then translate design goals to features…
Clear prices for each service, a filterable portfolio for customers to browse for desired hairstyles and social media account links clearly displayed
Online booking system with an automatic questionnaire trigger whenever booking certain services
A 15 step questionnaire asking all questions related to a customers hair history and desired hair style — a time saver for both the stylist and the customer
Wireframes
Initial Design
Design Highlight: Portfolio Page
Stylist specializations listed underneath the bio — a feature that most review sites do not have listed.
Preset filters above the image allows for easy searching and filtering of desired hairstyles and hair colors
Why design it this way?
Photo Grid: Designing the portfolio with a grid system is visually pleasing and mimics the same look as an Instagram profile, which is where many others often browse for hairstyle inspiration or when looking at a stylist’s work.
Stylist Specializations: Back when I worked in a salon, many customers would come in asking if there are stylists who were trained to cut and dye curly hair.
There is a specific way to cut each hair texture to bring out the best look, so I wanted to make sure that users would be able to quickly identify if the stylist could do so.
User Testing
Total Participants
9
Total Time Spent
4 hrs
Number of Tasks
2
The high-fidelity wireframe above was tested by a total of 9 people. Each tester was given the following tasks:
View Dawn’s portfolio via the home screen
You are currently viewing the homepage of Dream Glow Atelier. You want to find out more about Dawn, one of the stylists. You would also like to view her past work! Please navigate to Dawn's portfolio.
Filter Portfolio by Creative Color and Balayage
Dawn specializes in balayage and ombre color. You would like to get a balayage color, but you want it to be a creative color rather than a natural one. Filter Dawn's portfolio in order to see photos that include creative color AND balayage hair.
A link to a unmoderated user test via Maze.co was sent out to stylists, peers, and other 1 on 1 interviewees.
Unmoderated Testing (Maze.co)
User testing was conducted both face to face and via Zoom. Users tested the prototype via Maze.co for recording clicks and paths.
Moderated Testing (In-Person/Zoom)
Affinity Map/Feedback Analysis
All feedback from user testing was compiled and sorted into three different categories: successes, pain points/confusion, and suggestions.
Here are the key patterns that we observed in the feedback…
For the first task, majority of users clicked many different places to find the portfolio
The top of the stylist’s portfolio takes up too much space — users did not know they needed to scroll down
Some element sizing/styling was off — specifically some of the buttons and colors
↓
↓
↓
…and here are the priority revisions that we made!
Change prototype to snap to the stylist section of the homepage upon clicking “Stylist” navigation bar button
Add stylist profile so that filters and photos are above the fold
Adjust button sizes to be more uniform
Priority Revision
Move Items above the fold + color changes
Before
After
Design Highlight: Self-Service Consultation
Final Design
Lessons Learned
Not all users will take the same path through a site — it is necessary to have multiple ways to achieve the same end goal. If a user is expected to complete a task without much direction, it is necessary to give them the tools to be able to do so, otherwise it becomes frustrating on their end.
Visual hierarchy is essential to great design — consistency in sizing and spacing and change the look of a design greatly. I did not notice that some of my buttons were mis-sized initially, but those both experienced and still new to design noted it almost right away. Even if it may appear right at first, getting someone else to look at it or combing through the design can help identify those mismatches.
Future Steps and Features
Add wildcard search feature for photos
Add video visuals for homepage
Separate page for each photo (similar to social media)
Before and After photos
Caption for the stylist to elaborate on their work
Comment section for users to ask questions