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:

  1. Hair history

  2. How often do you change hair colors

  3. How long do you plan on keeping this color

  4. How much work do you want to put in to maintain the desired color

  5. 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:

  1. Price

  2. If the hairstylist can do the haircut they want

  3. 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…

  1. Hairdressers would provide photos of their existing work

  2. Customers would provide photos of the hair they wish to have

  3. Customers would need to provide truthful and accurate information about their hair history

  4. 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

<a target="_blank" href="https://icons8.com/icon/78014/queue">Queue</a> icon by <a target="_blank" href="https://icons8.com">Icons8</a>

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:

  1. 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.

  2. 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

  1. 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.

  2. 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