Case Study: Enhancing the beauty salon website experience
Introduction
The Product:
I re-designed the website of Saigon Hair Salon — a beauty salon located in Federal Way, WA. Its target users are males and females of any age that are customers of the shop or interested in the business.
Duration
04/2023 to 05/2023
My Role
UX/UI designer. I re-designed a website for local business.
This is the first project that I worked as a freelance UI/UX design. Through this project, I improved a range of valuable skills and insights:
- Conduct research and analysis to understand the needs and preferences of the salon’s target audience.
- Created visually appealing designs that are both functional and user-friendly.
- Learned how to collaborate effectively with clients to ensure that the final product meets all requirements and specifications.
Problem
Here is how the website look like before re-design.
Client’s expectation
After discussing with the client and previewing all the notes that I took, here is the list of what she expects to be improve:
- User experience: optimizing the website’s navigation to make it easy for users to find the information they need quickly.
- Branding and visual design: using more high-quality images and graphics. The client wants to include her brand color on the website
- Reviews and ratings: the client wants to show positive reviews and ratings on her website to help build trust and credibility with potential customers.
Step 1: Understanding the users
User Research
Before moving forward to any design process, I conducted user research to gain valuable insights into the needs and preferences of the website’s target audience.
The participants are current or potential customers of the salon.
Most of the people that I interviewed thought that the navigation of the website is ok, but they think its visual design should be improved.
Pain Points
User Persona
Website Structure
Using the hierarchical model, I drew a layout of the website to make it clear and logical for users to understand the site’s content and navigate through it.
Step 2: Design Process
Paper sketch
After understanding the users and finding out what need to be improved, I started to sketch out the new layout of the website. This step helped me quickly and easily test my ideas and refine my design.
Since there is not much information to be included, I decided to keep the website one-page to eliminate the need for complex navigation menus, making it easier for users to find the information they need quickly. However, I will keep the pricing page separate, since the salon offers a wide variety of services.
Digital Wireframes
To visualize the structure more clearly and make it easier for sharing, I convert my paper sketches into digital wireframes using Adobe XD.
Low-fidelity prototype
Before completing the design by adding more colors, themes, and branding, I created a low-fidelity prototype to showcase the main user flow.
Usability Study
To better understand how users interact with the website, as well as identify user needs and improve their experience, I decided to conduct a usability study.
In this usability study, I asked 4 participations to do a quick task and took note of how they did it.
Here is one of the notes that I took from the participations.
Affinity Diagram
Findings
Based on the usability study, I came up with the following important findings:
- Users want to be able to access the service page right after they open the website because this is the most important section.
- Users need an easier way to find the important informations of the website like hours, address and social.
- User want to reduce the size of the navigation bar so that they can see the content of pages more clearly
Digital wireframe (updated version)
Here is the changes that I made for the digital wireframe
Low-fidelity prototype (updated version)
Step 3: Defining the design
Style guide
I finished the website design by adding some colors and graphics to it. The main color of the website was chosen by the client. I ensured consistency and coherence across all pages of the website, creating a seamless user experience for visitors.
Key Mockups
I made sure the website remains responsive by creating mockups on different devices:
- Web/Desktop: 1920 x 1080
- Ipad Pro 11in
- Iphone 14 Pro Max
High-fidelity Prototype
The final user flow of the website
Step 4: Going Forward
Impact
The stakeholder really love the new design of her website.
“I love it! It looks so pretty and professional now, comparing to the old one that I got.”
Takeaways
As mentioned, this is the first time that I worked with a client as a UX designer. I improved a variety of skills and gain valuable experience in the field of user experience design, including user research, design thinking, wire-framing and prototyping, and UI design. Moreover, I learned how to communicate and collaborate effectively with stakeholders. This project gave me the opportunity to make a positive impact on the experiences of users.
In conclusion:
- I stepped out of my comfort zone and found my first client. I learned how to scheduled meetings, take notes and being professional :)
- I learned a new tool for designing, Adobe XD
- I acknowledged the important of responsiveness while designing a website
- I improved my UX design skills
Next step — things I would like to implement
I would provide users with pricing information in a separate PDF file, which can give users the option to easily print or download the information for future reference. This can be particularly useful for customers who want to compare prices or discuss pricing options with friends or family members.
