UX/UI Designer
Jacqueline Rose Hair Studio
Platform: Responsive Website
Role: UX Research, UX Design, UI Design
Tools: Miro, Milanote, G-Suite, Figma, Usability Hub
Creating a user-friendly website for a hair salon
Background
In this case, I was tasked with designing a responsive website for a client, Jacqueline, who is opening a salon and wants her clients to be able to see her work and book appointments. According to the client, my main goal was to create a seamless online booking process. I also wanted to make sure potential clients would be able to get a good sense of Jacqueline's abilities as a hairstylist.
Constraints
I was the designer, developer, and researcher for this project. I would have to do it all on my own, and learn how to use a website builder if I wanted to have this website done in the three week time frame my client had set. It was going to be a wild ride, but I was up for the challenge. Also, my client wanted to continue using the online booking platform she was currently using. This could prove to be an issue when building on a website builder. (Spoiler alert, it was!)
What do people want to see?
First things first! If I wanted to find out what would attract clients to a certain hairstylist, I needed to conduct some exploratory research. I interviewed three current clients of Jacqueline’s, as well as two potential clients. I then made an affinity diagram based on the findings. Here’s what they had to say:
Who are our users?
Christine is the embodiment of the things I learned during my first user interviews. She’s searching for a new hairstylist since hers just moved away unexpectedly. Christine's goals are to find a stylist that can work with her hair and fits her budget. She also wants to find someone she can connect with on a personal level and can easily book an appointment with.
Problem statement
Journey mapping
Where and how can we help users in their search for a trustworthy, personable hairstylist?
What are other salons doing?
If I wanted to create an appealing and competitive salon website, I needed to find out who the competition was within the beauty industry. My goal with this competitive analysis was to find out what common UI patterns were being used as well as find out what type of imagery was present. My main takeaways from conducting competitive analysis:
Tabbed navigation is the most popular choice for this type of website
Hero images are commonly used and add personality
Professional looking photography with a clean background contributes to an elegant vibe
Most salons featured a bio section for each stylist
Establishing our brand
The client was set on having various shades of pink as her color palette. Working within these guidelines, I created two style tiles for her to choose from. I also asked a few potential users to choose between them. 2/3 users liked the style tile on the left the best, but both the client and the users voiced that they preferred the dark header on the right. Based on that, I decided to combine the style tiles for the final product.
What screens do we need?
I made these low fidelity wireframes to establish information architecture and map out the shell of the interface. After doing some research on website builders, I realized I was facing some design constraints in terms of what was possible since I would be building this out by myself. These low fidelity screens were designed with those in mind. I created a few different options of each screen to test with users later.
Features
After testing the low fidelity prototypes and getting feedback on functionality, I finalized the layout for each screen. Due to time constraints, I tested a low fidelity prototype and then moved into the first round of mock-ups. Some features I added based on what our users said:
A gallery featuring Jacqueline's best work
A section that gives some insight about who Jacqueline is as a person
Access to online booking with pricing clearly stated
Testing the first prototype
I tested our first round prototype with 5 users. 5/5 users got through the flow and said that the website was easy to use. They also liked the look and feel, saying that it reflected Jacqueline's personality well. However, I did get some common feedback from them:
Iterations based on user feedback
After getting feedback from users, I iterated on my design by implementing the three high priority changes.
1. Added a slider featuring testimonials on the home screen
2. Changed text on navigation to improve readability
3. Removed text from about screen
Final Website
Here’s the website, created by me on Wix, with the changes implemented and added micro interactions to enrich the website and provide visual feedback to the users. In final usability testing, 5/5 users got through the flow easily, scored the look and feel very highly, and reported that all the information on the website was relevant and accessible.
Was the project successful?
Since the beginning, the client's idea of success was an easy online booking process for her clients and an esthetically pleasing design. Since it went live 4 weeks ago, she has booked 5 new clients through the website which has generated roughly $1,000 in income so far. Also, around 50% of her existing clients are using the online booking feature to rebook their appointments. Let's call it a win!
Final thoughts
This project was a big challenge because of the website building aspect! It was fun to learn how to use a builder and what constraints it could set for the design. The other challenging aspect was embedding Jacqueline's booking platform into Wix while making sure it was still easy to use. Being the only designer was also an adjustment, as I'm used to working in a team and collaborating. I found myself reaching out for feedback more often to make sure I was on the right track. Overall, creating this website was an awesome experience because it brought the two things I love together. Doing hair and designing awesome products! Thank you for reading!