top of page
The Hair Colorist Logo

A live and responsive website designed and built for the Hair Colorist, a hair salon in South Carolina. This website was designed to revitalize the salon's client interactions.

Landing Page Screen Thumbnail
Gallery Page Screen Thumbnail
About Page Screen Thumbnail

Introduction

Overview

In 2003, Salena Ardis, a seasoned hair stylist in South Carolina, founded The Hair Colorist. This esteemed salon, located in Sumter, South Carolina, has garnered a reputation over the years thanks to Salena's expertise and the dedication of the talented hairstylists who have honed their craft within its walls. With a wealth of experience, these hairstylists have devoted themselves to perfecting their skills, earning the trust and loyalty of a satisfied clientele.

Although The Hair Colorist has prospered over the past two decades, Salena decided that she wanted to elevate her business to new heights and reach new clientele. With this in mind, we decided to create a dynamic and responsive website that will captivate fresh clientele.

 

This responsive online website aims to serve as a comprehensive resource for individuals seeking a hair salon, offering insights into the stylists at the salon, an overview of haircare services offered, a glimpse into the salon's product offerings, and information regarding how to schedule appointments.

Mobile Landing Page Screen Thumbnail
Desktop Landing Page Screen Thumbnail

View the Hair Colorist prototype in action

06

Prototyping & Testing

My Process

01

User Research

05

UI Design

04

Interaction Design

03

Information Architecture

02

Ideation & Prioritization

My Role

Research, end-to-end UX/UI Designer 

Tools

Figma, Otter.ai, Mural, Optimal Sort, Miro

Timeline

July 2023 - August 2023

Research

Problems Explored

What kind of information do people want to find out when looking for a new salon?

When looking for a new salon, people often have certain information that they want to find out before booking an appointment. 

 

In order to improve the salon's probability of being chosen by a potential client, we want to ensure we provided the kinds of information that potential clients may be looking for.  

What kind of stressors do people face when looking for a salon? How can we address those stressors?

People tend to be very cautious when trusting others to do anything to their hair; therefore, there may be many stressors that people face when deciding which salon to choose. 

For example, some people may feel unsure of which stylists would be best for them to choose if there is no description, others may feel stressed if they cannot book an appointment online. 

 

Therefore, We wanted to make the process of deciding to choose The Hair Colorist as painless as possible by determining the stressors people face when searching for a new salon.

Goals

01

Increase amount of new clients, especially younger clients, that choose to come to the salon.

Build a responsive website that will attract new clients by providing important information and make the process of choosing this salon easier.

02

Reduce the stressors that people face when using the salon's website

Recommend products to users that work safely together, are a good match for the users routine, effectively address the user's skincare needs, and are filled with the best ingredients for their skin. 

03

Provide vital information to potential customers that may be seeking to choose this salon.

Important information provided may include:  services offered, who the stylists are, what products are sold in store, and how to contact the salon.

Research Method

User Interviews

Four in-depth user interviews were conducted with people of varying ages, backgrounds, and cultures who are looking for a new salon or have a salon that they currently go to for hair care services.

 

This method was beneficial in determining what processes people have implemented in order to find a salon, what kind of information users look for when looking for a salon, and what stressors people face when searching for a new salon. 

 

The user interviews also enabled me gain a deeper understanding of user needs, behaviors, and patterns.

User Interview Key Findings

01.

Participants indicated that they like to be able to read a description of the stylists. Specifically, they want to know the stylists level of experience, what kind of certifications they have, and what they have expertise in.

02.

Participants want to be able to see a gallery of client pictures in order to see what kind of work the stylists have done in the past.

03.

In a salon website, users indicated a desire to be able to book an appointment online. 

04.

Participants indicated that they want to know what services are offered at the salon, what each service entails, and a price range for each service.

05.

Users indicated that they prefer when a salon has a products page that shows which products are sold at the salon.

Define

 Task Flows

Next, using the information gained from my research, task flows were developed in order to map out how users would move through the website to accomplish the tasks given to them. Below are the task flows that demonstrate how users will go about finding out more information about the stylists at the salon, services offered at the salon, and how they will book an appointment at the salon. 

Task Flows

Site Map

I created a site map based on user data, perceived user mental models, user goals for accessing the website, and information hierarchy.  

Site Map

Design

Wireframes

Next, I used the task flows and user research to begin developing wireframes.  I first created low-fidelity wireframes, using simple shapes on Figma. For each page, I created three different layouts, and talked with the Salon owner about which design would best suit her needs, and the needs of her clients. Below is an example of the mockups I showed her for the landing page. Then, I created high-fidelity wireframes, also using Figma. After receiving feedback from peers and my advisor, I began developing a prototype. 

Landing Page Low-Fidelity Wireframes

Option 1

Landing Page Screen Thumbnail - Mid Fidelity

Option 2

Landing Page Screen Thumbnail - Mid Fidelity #2

Option 3

Landing Page Screen Thumbnail - Mid Fidelity #3

Final Landing Page Design

Desktop

Landing Page Screen Thumbnail

Mobile

Mobile Landing Page Screen Thumbnail

Branding & UI Kit

In order to ensure that The Hair Colorist's branding would be cohesively and consistently displayed throughout the website, I talked with the salon owner about the values she wanted to convey to clients through the website. I also talked with her about colors she already used in the salon and what her logo looked like. I then took the color of the logo and created three color palettes that would portray the values she mentioned to me. I then talked her through the mood board and we picked out colors, fonts, and an aesthetic that she liked. I then used these elements to create a UI Kit for the website, and to get her thoughts on how each component looked. 

The UI Kit featured below shows:

  • Two versions of the salon's logo

  • the text styles used for the website

  • the color palette

  • icons used on the website

  • an iteration of how a page on the website might look

UI KIT

Prototyping & Testing

Prototyping

After refining my brand identity and component library, I began developing my high-fidelity wireframes for the task flows that I would like to test. After receiving feedback from my mentor and peers, I used Figma's prototyping feature to develop my first prototype. The interactions and screens created were developed to mimic the task flows created previously.  

The prototype included 3 task flows: 

  1. Discover more information about the stylists at the salon.

  2. Find out what kinds of services are offered at the salon.

  3. Book an appointment at the salon.

Services Page Screen Thumbnail
Appointment Page Screen Thumbnail
Stylists Page Screen Thumbnail

Usability Testing Key Takeaways

In order to determine the areas in which my design needs further iteration, I tested my prototype with users. This helped me discover areas in which my design needed some refinement, parts that worked well, and things that could be added or removed from the design. This processed helped me to ensure that my product is user friendly, accessible, and a viable solution that meets the needs of the target audience. 

Below are the main priorities that I needed to address:

Rename the “About us” page to instead read “Stylists.”

This could help with the issue of users having trouble finding more information about the stylists at the salon.

This will help users clearly understand that the button helps them switch between how they are browsing products.

Include a description of services offered for men.

This would provide information for those looking for haircare services for men.

Troubleshoot a screen transition issue with the prototype.

This will make the prototype more cohesive and more realistic.

Final Prototype Features

Finally, I took the insights and takeaways gained from usability tests, and applied those as I iterated on the final prototype displayed below. 

Services Page Screen Thumbnail

Discover information about services offered at the salon.

Gallery Page Screen Thumbnail

Browse through a photo gallery of actual client results

Stylists Page Screen Thumbnail

Learn more about the stylists at the salon

Products Page Screen Thumbnail

View the products page to discover what brands are sold at the salon.

Appointment Page Screen Thumbnail

Book an appointment directly in the website.

Final Takeaways 

Working on this project for a client was an incredible learning experience. Though I have lots of experience working with others on projects, this one was different. Not only did I have to address and meet the needs of the users, but I also had to ensure that I met the needs and desires of the client. 

 

There were in fact a few instances in which the client's desires were seemingly opposite to the user's needs. For example, the client did not initially want users to be able to book an appointment online; however, the users that I interviewed for my research all indicated that this was an important feature to them. I had to figure out how to address this issue while honoring both needs. I decided to present my findings to the client, and I indicated to her that although we can design her salon's website without an appointment booking feature, my research indicated that this feature was very important to the target audience. After showing her the research, she decided to try out an appointment booking feature! I definitely learned the power of solid research and presentation skills through this experience.

There were other learning opportunities to be had through this experience as well. In working with a client, there are things that are out of my control. I had to learn how to work around deadlines despite having to also wait for the client to deliver information, pictures, or opinions. In order to make the best use of my time, I tried to ask my client for pictures and information weeks in advanced. Although I still ended up waiting on a few things, for the most part I received most of the information that I needed before I actually needed it. Planning ahead was a huge help in getting this project done; however, I also learned that next time there are a few other things that I could plan better for in the future. 

Overall, I absolutely enjoyed designing a responsive website for my client, and I am sure that the valuable lessons that I learned along the way will serve me well as I work with other clients in the future. 

bottom of page