responsive Website redesign

Beauty ai

Khaliman Salons

Reimagining Khaliman Salon’s website experience by making hairstyle decisions for clients easier with Beauty AI

Located in Boca Raton, FL, our hair salon specializes in all curly hair types (2a to 4c). We proudly feature the exclusive Kevin Murphy hair care product collection to guarantee quality care for your curls. With our expertise, we promise a comfortable experience for every client. Join us on a journey to embrace the beauty of your unique curls or sleek, straight locks.

Our Services

About Us

Client Transformations

Shop

Special Offers

Contact

Book Now

Our Services

About Us

Client Transformations

Shop

Special Offers

Contact

Book Now

Home/Services/ Virtual Try-on

3D Virtual Hairstyle Try-on

Get style suggestions

Choose your hair texture

What is my hair texture?

Wavy

(2a-2c)

Curly

(3a-3c)

Coiled

(4a-4c)

Hairstyles

None

Deva Cut

Rezo Cut 1

Rezo Cut 2

Bob Cut

Shag Cut

Color Tone

Located in Boca Raton, FL, our hair salon specializes in all curly hair types (2a to 4c). We proudly feature the exclusive Kevin Murphy hair care product collection to guarantee quality care for your curls. With our expertise, we promise a comfortable experience for every client. Join us on a journey to embrace the beauty of your unique curls or sleek, straight locks.

8:15

What to expect

Each visit includes a soothing scalp massage, aromatherapy, warm towels, and a relaxing shoulder and neck massage. Beverages and snacks are also complimentary.

Free 15 minute consultations are provided before each service. Consultations can be booked together with or separately from other services.

Haircut consultation

Deva or Rezo consultation

Color consultation

Qiqi consultation

Book now

Contact us

8:15

TIMELINE

Q4 (2023)

ROLE

UX/ UI Designer

TOOLS

Figma, Figjam, Miro

CLIENT

Khaliman Salons

ABOUT KHALIMAN SALONS

Khaliman Salons is an up-and-coming hair salon located in East Boca Raton, Florida. The salon specializes in cutting, coloring, and styling curly and textured hair. They also retail a hair product line both in the salon and on their website. The owner's primary goal is to maintain competitiveness in their area and give back to new and loyal clientele.

BUSINESS PROBLEM

Their website is not bringing in new clients

In 2022, the salon’s new owner launched a website in an effort to reach more clients. However, their current website has not been successful in attracting new clients and receiving online bookings. The business primarily relies on social media and word-of-mouth to build their clientelle.

USER PROBLEM

Curly haired clients are unsure which haircut best suits their needs

Based on my user research, I found out that curly haired clients visiting the website lacked the information needed to know which service was the right for them to book. Aside from the UI looking awkward on the website, the lack of hairstyle education and guidance on the services page was one of the main reasons why clients were hesitant to book online and were more likely to call the salon for clarification.

DESIGN GOAL

  • Redesign Khaliman Salon’s homepage and services page with elements that educate clients about the business and provide clear information about the services provided.

  • Utilize AI as a tool that will guide users on what hairstyle option best suits them and inspire them to book their next appointment.

APPROACH

Design that meets both business goals and user needs

The business’ goal is to secure more online bookings. The user, however, needs to feel confident in order to do so.

The two questions I am trying to answer are:

  • What gaps exist in the website design that need to be filled in order to get potential clients to feel confident with booking online?

  • What is the best way to educate clients on their options and help them visualize the end result?

To answer these questions I started off my research with a website audit to identify the gaps in the design and interviewed curly hair clients to understand their motivations and needs.

Research

WEBSITE EVALUATION

As part of the interview, I conducted a website audit by watching the interviewees navigate through the website and asking them questions. These are the following observations I made while listening to the interviewees’ feedback:

The UI came in the way of users’ desire to explore more

All interviewees agreed upon the UI looking awkward. This made it difficult for the user to read through and focus on the content, deterring them from wanting to keep exploring. The bad UI created an impression of unprofessionalism that caused hesitation in users to trust the business and book an appointment.

Services Page

2

1

3

4

5

1

Redundant links that lead to the home page.

The extra Curlyhairsalon and a Kevin.Murphy Salon link leads to the home page making both links redundant.

2

Moving background is distracting from the content.

The background is moving throughout the whole experience, which can be disorienting, especially for users with big screens and those with accessibility considerations.

3

Body text is hard to read.

Body text is a serif font. The low opacity of the white background and the moving background behind it make the text very hard to read.

4

Red color text creates a false sense of error or urgency.

Red color text creates too much contrast with the background color and makes the text hard to read. Red is typically used for error states so it creates the impression that something is wrong.

5

Social media links are not noticeable.

The size of the icons is too small to notice.

Home Page

1

1

Home page only includes CTA’s for the shop and service menu.

Opportunity to add content and links that will increase discoverability and user engagement.

About Page

2

2

About page contains surface level information about the company.

This makes it difficult for users to learn more about and build trust with the business.


Opportunity to introduce the team, the company values and the salon’s process.

USER INTERVIEWS

I conducted user interviews with 5 different individuals to identify their motivations, pain points and needs as hair salon clients.

Age 26-43 years old, with hair textures ranging from wavy to coily hair

  • Have visited or searched for a curly hair salon in the past

  • Visit the hair salon at least once a year

Moderated remote user interviews via Zoom, 1 hour long

KEY FINDINGS FROM AFFINITY MAPPING

User interviews informed me about factors that build trust in curly hair clients

#1. Hair representation is a major motivator

All users have had some sort of negative experience with hairstylists not being able to manage their curly hair. Visuals of clients with similar hair texture to them helps them feel confident that the hairstylists knows how to handle their hair type.

#2. Learning about the hair stylists’ team builds trust and familiarity

Users want to be able to evaluate the hairstylists’ expertise and experience in the field. This knowledge helps them in selecting the right stylist for their unique needs and contributes to the perceived legitimacy of the salon.

#3. Transparent pricing information is key

Sometimes users fall prey of hidden fees and unexpected charges. Users expect clear and transparent pricing information for salon services, including details on factors that can affect pricing.

#4. Curly hair clients desire guidance in understanding which hairstyles suit them best

Users often opt for regular trims because they are unsure what hairstyles are most suitable for their hair type. Whether in the form of consultations or just visual images and descriptions, users felt like that extra guidance would enhance their experience significantly.

Define and Ideate

User Personas

To have a clear image of who I am designing for I created two user personas. Both personas worked as reference points throughout the design process.

Meet Gwen and Mark!

Gwen is a first time client. She is the type of client interested in consultations. Not knowing what hairstyles suit her hair type and overall appearance is her main concern. She generally won’t try a new haircut, unless she is confident that it will look good on her.


Mark is the repeating client. He is the type of client that will get the same haircut because they are afraid of trying something new. However, they are curious to learn what other hairstyles are possible with his hair type.

The aspect that connects both personas is the lack of understanding of their own hair and potential hairstyles, as well as the fear of the end result. Keeping that in mind helped in creating a solution that addressed both users’ needs.

user journey map

I created a user journey map in order to keep my focus on the stages of the user experience that were most troublesome for first-time visitors. This helped the client understand better the user’s pain points navigating through the website and identify opportunities for improvement.

Based on the user journey, I decided to prioritize the following tasks:

Create an engaging homepage with links to other pages on the website to increase discoverability

Improve brand consistency and the UI library (typography, color, iconography)

Improve the visual hierarchy of the Services page to help users quickly learn about specific services and better understand the pricing disclaimers

Brainstorm on ways to help users decide which hairstyle suits them best

IDEATE

How might we guide customers in selecting the hairstyle that suits them best before booking a service?

The feature I imagined had five different aspects to it that I wanted to explore. Those were education, personalization, visualization, exploration and the after-experience. I used a time constraint and spent 1-2 minutes brainstorming for each aspect.

THE SOLUTION

A fun and interactive guiding tool that allows users to try on default hairstyles and colors and receive suggestions based on their hair type and facial characteristics.

Personalization: Default hairstyle options are provided to the user. To make the experience more personal, the AI tool can also scan the user’s face to identify the face shape, hair color and hair texture of the individual. Based on the user’s features, the tool suggests haircuts and color that fit those characteristics best.

Education: Each of the default haircut options from which the user can select has a tool tip that educates the user on the cut’s technique, level of maintenance and provides visual examples. In addition, users are able to learn how to identify their hair texture if they are not familiar with the terms (2a to 4c).

Saving and sharing: User can easily download the image of their favorite hairstyle applied on them or share it with others. User can also share it with their hairdresser prior to the appointment so that both parties know what to expect.

Fast booking: Once the user saves the hairstyle, he is given a base estimate of their hairstyle so that they don’t have to go back to the services page. If the user is satisfied with the look, the user can book the service directly from the AI tool.

Design

How does it accomplish that?

THE TASK FLOWS

I created four simple task flows: the first three are a breakdown of the user trying the default options of the try-on feature and one involves the user trying out the AI tool’s hairstyle suggestions.

THE SITEMAP

In order to redesign the website, I created a sitemap that displayed a new simple architecture. I incorporated all the screens that already existed in the previous website with extra additions noted on the sitemap with a *star* icon. I also renamed certain pages, such as client transformation, instead of client after pictures and promotions and discounts into special offers.

HOMEPAGE - LOW FIDELITY TO high FIDELITY

SERVICES PAGE - LOW FIDELITY EXPLORATIONS

My goal for the service page was to be easily scannable and provide clear information on the services and pricing. In order to do that, I initially thought that having tabs was a way to not overwhelm users with a big list of services.


After feedback from other designers, I came to the conclusion that scrollability is more important when looking through a menu since users will have to do more work finding the services with tabs and, thus, click through more. In order for the user to have control over which services to view at a time, I decided to add a double sticky navigation tab (service page v3), where the user has the ability to jump to whichever section of the menu they’d like.

Service Page v1 - horizontal tab bar

Service Page v2 - accordion tabs

Service Page v3 - with horizontal sticky navigation

AI TRY ON FEATURE - LOW FIDELITY WIREFRAMES

I examined the process from a few different AI try on tools that exist in hair product websites, as well as AI try on applications. I decided on the order presented below. However, I was curious to see if my user testing participants would be confused with the “Apply” button. I intended for the “apply” button to be a button to enables users to save a photo once applying the filter on it, in addition to allowing layering of different filters on top of each other, eg. combining both a hair cut and color.

AI TRY ON FEATURE - high FIDELITY WIREFRAMES

I used high quality animations that were able to depict how the feature would be used realistically.

What makes the feature different from other AI tools

  • After capturing a photo, user can select their hair texture (or learn about it), in order to generate haircuts that would match their texture

  • User is able to learn about the different hairstyles by clicking on the question mark tooltip

  • User is able to combine both cuts, color and styles in order to get an outcome as closely as possible to the one they envision

RESPONSIVE DESIGN ON MOBILE

The experience needs to be the same in all devices, including the mobile version. I, thus, ensured that all of the main screens were also responsive on mobile.

Located in Boca Raton, FL, our hair salon specializes in all curly hair types (2a to 4c). We proudly feature the exclusive Kevin Murphy hair care product collection to guarantee quality care for your curls. With our expertise, we promise a comfortable experience for every client. Join us on a journey to embrace the beauty of your unique curls or sleek, straight locks.

8:15

What to expect

Each visit includes a soothing scalp massage, aromatherapy, warm towels, and a relaxing shoulder and neck massage. Beverages and snacks are also complimentary.

8:15

Home/ Services/ Virtual Try-on

3D Virtual Hairstyle Try-on

Accept the conditions to use the camera or upload an already existing photo.

8:15

Testing and Iterations

User testing was done to the same 5 interviewees that were interviewed in the original website evaluation, since they fall under the target audience and have experience navigating through the original website. Usability testing was moderated and conducted through Zoom.

Success Metrics

  • Tasks tested: viewing the homepage, viewing the services page, capturing a photo using the AI try on feature and saving the photo of an applied hairstyle, analyzing face features to receive hair cut and color recommendations.

  • I tested the homepage in terms of confidence levels to check whether users felt confident enough about the expertise and professionalism of the salon staff.

  • I tested the services page in terms of clarity of information to check whether users understood the different services and their descriptions, as well as the pricing information provided.

  • I tested the AI try on feature tasks in terms of ease in order to see whether users were satisfied with the way the tool was designed.

  • Finally, I calculated the completion rate for all tasks tested as well as the usability of the website as a whole.

Quantitative Results

Completion Rate

100% of participants completed all tasks successfully.

100%

80%

Confidence level

80% of participants rated their confidence of the staff’s expertise a 5 out of 5, with 5 being the highest.

Rate of ease

60% of interviewees rated the ease of both AI try on tasks a 5 out of 5, respectively.

60%

  • The average rating for the clarity of the pricing information increased by 28%.

  • The average rating for the clarity of the service information increased by 21%.

  • The average usability rating increased by 60%.

Qualitative Results

Users mentioned the following words when describing the website:

welcoming

modern

professional

friendly

clean

Overall Impression

“I feel confident about booking a service at this hair salon because it seems that the staff is really passionate about curly hair and knows what they are doing”

“The AI suggestions are so cool because it feels like it makes all the decisions for me!”

“I like a good visual and being able to look at potential hairstyles before booking a service with a salon saves me both money and time.

I like the AI tool a lot, because when I go into a consultation, I will have something to show my hairstylist. This helps a lot since I often don’t have the words to explain what I want.

“I don’t have to dig for any information or do any guesswork..all the information I need is right there”

When asked whether they would consider booking at Khaliman hair salons after browsing through the website,

100%

of participants said that they would likely book a service at Khaliman Salons

REVISIONS

Prioritization

I made revisions mainly on the Services page to improve the visual hierarchy. Most of the issues observed were of low severity and higher frequency, which means that they did not get in the way of task completion but they still enhance the user experience.

The couple changes I made on the Try On feature flow was for more severe and frequent issues that users were experiencing. The AI task flow changes would take higher priority over the changes proposed on the Services page since the issues presented got in the way of task completion.

FINAL PROTOTYPE

Click on each screen to start and pause the prototype.

Homepage and Services Page

AI Try On - Default Selections

AI Try On - Receiving Style Suggestions

Key Takeaways

wHAT i LEARNED

Designing with constraints in mind

Due to my client wanting to utilize the website builder that they are most comfortable with (WIX), I had to consider the limitations of the specific builder and design the website accordingly. Because of it, I chose a simple layout and information architecture to make the website more suitable for the WIX environment.

Responsive is not Adaptive Web Design

I initially designed mobile screens that were missing a few sentences, since the website is generally text heavy, or omitted certain shapes that I thought were not fitting well on the mobile design. I learned quickly that, in order to design responsively I had to keep all elements in the screen accessible to the user and shuffle around the items in a way that fits the screen, such as stacking content vertically.

NEXT STEPS

3 month goals

  • Test revisions during second round of usability testing with a mix of potential and current clients of Khaliman salons

  • Apply design on WIX platform

  • Redesign the rest of the website pages and make them responsive

  • Add more filters in the AI try on tool, in addition to the ability of adjusting hair length

6 month goals

  • Track Wix analytics to evaluate traffic fluctuations, user engagement and retention rates

  • Implement a feature to help users identify hair issues through a picture scan and suggest products that help them solve those issues. This is meant to add on to the educational component of the AI tool and promote the hair salon’s products more.

Let’s connect!

Want to work together or talk over coffee and matca?

GO TO TOP

Copyright © 2024 Artemis M.