Overview
Salon Serenity is a hair salon located in Dana Point, CA next to the shores of Newport Beach. My client rents out stations to a team of 10 stylists who manage their own schedule and pricing. Because of their business model, this redesign focuses on the user experience with considerations for each stylist's workflow.
Duration
4 weeks
Team
Me (sole designers)
Naomi (client)
My Role
UX Research
UI Design
Problems
UX Issues from website audit
Outdated design & architecture
The layout and style feels dated and doesn’t accurately reflect the salon, making it difficult for users to navigate.
Inadequate information
Limited information for their services, pricing, and booking creates confusion potentially discouraging users away.
Lack of mobile accessibility
Website is not fully accessible to mobile users that are redirected from other apps, excluding a large portion of the audience.
(Homepage)
Visiting the 'The Ladies' page provides insight into the salon's values and its stylists. However, this level of detail may be overlooked. It could be more effective to highlight key ideas and put them on the hero banner while focusing on the key info users seek about stylists here.
(The Ladies page)
Booking form is not appropriately defined
Booking is an important factor to gaining customers, but this form does not clearly labeled. This form is also found in the contact page and can be elevated to a larger CTA.
(Contact page)
01 Discovery
Defining project goals
Discussed expectations with my client for the redesign and establish early project goals. The focus was on improving the information architecture, including stylist profiles and service pricing, to help users make informed decisions while also enhancing the website’s style.
Access to stylist information
Transparent service prices
Align visuals with salon
Researching UI patterns
Comparing stylist profiles from other websites
Websites that provided information on their team would provide at least a profile picture and their name. Additional information that could be found are their socials, skills, and background bio. However, most profiles would lack a showcase of their previous work, which we would later learn to be imperative for our users during user interviews.
Identifying common services & pricing structures
Almost every website provided pricing for their services, while those that didn’t required users to request a consultation. While we will explore the impact during user interviews, it is evident that displaying service types and starting prices is crucial as it helps users make informed decisions.
Exploring visual styles
Through discussions, we explored various styles to identify which one resonated best with the salon's identity. Determining whether they fit the identity of my client’s salon will be discussed in 03 Ideation, but this marks as a starting line that my client prefers a monotone minimalist feel.
02 Research
Important factors that drive decision making from user interviews
Planning a visit to a hair salon and then hoping for a positive experience can create anxieties for many individuals. To reduce these feelings, we must align the salon's offerings with user expectations. Before a user begins the booking process, they first assess the salon to build trust.
Trust with salon
pricing, store front, location, team
Credibility with stylists
Contact info, socials, showcase
Intuitive booking process
Online booking form, contact info
Visualizing our target audience into a persona
03 Ideation
Key features and informational hierarchy
The structure of the website prioritizes key features that directly support user decision-making. Trust with the salon is reinforced through clear service pricing and transparent contact information. Credibility with stylists is addressed by showcasing their profiles, social links, and past work in an organized gallery. To ensure an intuitive booking experience, the process incorporates insights from our user research.
Focusing on the strengths that define Salon Serenity
Family
•
Warm
•
Friendly
•
Welcoming
•
Casual
My client initially wanted a black and white color scheme with gold accents for a luxurious feel. However, after researching their salon and stylists, I found that this aesthetic didn’t align with their personalities. Instead of forcing a luxury theme, I focused on highlighting the salon’s strengths. Since trust is key for our users, the design needed to reflect their expectations authentically. It’s a family style salon near the beach that welcomes all ages. Their stylists are personable, welcoming and would dress up for different occasions. These are joyful and vibrant characteristics that I want to accentuate to our audience.
Color style
04 Design
Wireframes
Creating wireframes for Salon Serenity focused on key features while maintaining considerations for mobile accessibility. This acted as blueprints for our screens before color and font styling was established and applied. They also acted as a visual guide for user flows.
Usability test goals and prototyping
We invited 7 participants interested in finding a hair salon to test our prototype. They explored it as if they were searching for a salon, while we observed what information they sought and how quickly they found it. To measure success, we focused on 3 key goals: building trust in the salon, establishing stylist credibility, and ensuring an intuitive booking process. The prototype was designed for free exploration, allowing participants to navigate naturally and evaluate the experience as they would in a real search.
1
Trust with hair salon
2
Credibility with stylists
3
Intuitive booking process
05 Results
Test results among 7 participants
Improved trust with hair salon
The biggest impact comes from first impressions, which starts with the hero banner. By adding real images of the storefront, services, and a clear bio, we created a sense of authenticity that made users feel comfortable exploring the rest of the website.
Improved credibility for stylists
Users enjoyed using the selector to conveniently view other stylists quickly.
Users found the ability to contact stylist’s directly to be trustworthy.
Showcasing past work was well received for users to determine credibility.
Compared to previous design
100% increase in user’s trust for stylists
100% interest with booking with stylists
57% wanted to see reviews for each stylist
Streamlined booking process
All of our participants were able to locate the booking form and intuitively followed each step. Although there was a strong need to view stylist’s availability during the booking process, users were still able to successfully complete booking tasks. Booking constraints explain in section 06 Reflection.
Compared to previous design
100% understood the booking interface
100% completed the booking process
43% wanted to see stylist’s availability
Final designs
Now that we've addressed users' needs from usability testing, I want to highlight that we also met our project goals. This redesign significantly improves mobile accessibility and information architecture. Iterative processes are noted in section 06: Reflection.
Improved mobile accessibility
The redesigned website is now fully accessible to mobile users, ensuring a seamless experience for those redirected from other apps and expanding reach to a larger audience.
Improved information architecture
Enhanced the hero banner by highlighting the salon’s ideals and storefront with a clear CTA. The homepage sections are prioritized based on user feedback, starting with services to ensure clarity that this is a hair salon, followed by stylist profiles. Testimonials and general salon information concludes the homepage, helping users make informed decisions.
06 Reflection
Design challenges
I’d like to highlight challenges during the design process that have improved my perspectives when approaching future projects. The first challenge helped me understand the strengths of common patterns, yet slightly deviate from them in order to satisfy the project goals. The second challenge provided new skills within my work flow to organize my thoughts and reasons behind design choices.
Challenge 1: Designing a hero that matches their identity
Some design patterns just didn’t work
Hair salon hero pages often feature full-width images of chic interiors or trendy styles. Since my client’s casual, beachside salon didn’t fit this aesthetic, I instead drew inspiration from their social media and local beach activities for a more fitting design.
Let’s showcase their memorable moments
Seeing how my client’s salon loved capturing fun, candid moments, I drew inspiration from beachside photos and Polaroids. I reimagined their salon images as printed photos for the hero page, adding a warm, nostalgic touch that better reflects their atmosphere.
Challenge 2: Compromising on a booking system
When discussing project goals with my client, I understood their needs and determined that a typical calendar booking system wouldn’t work for their business. However, I never documented the reasoning during the design phase. When users requested a calendar system, I searched for ways to incorporate it, and feedback from my cohorts reinforced the issue. As I worked through iterations, I began writing out my thoughts and realized the core problem.
Original booking form was unfamiliar
Their original booking form was a message box that allowed users to freely write and make requests. It would send an email to the salon where the stylists would discuss who would take that customer. Although this system worked for their business, users found it difficult to use.
But users wanted a calendar picker
However, testing and discussions showed that users preferred to select appointment dates as that was most familiar. In pursuit to satisfy that need, I had forgotten the reason why free form worked better for their business.
To make a calendar system
Stylists must sync their appointments to an online calendar system.
Stylist’s workflow may change
They may have to create, sync and migrate to an online calendar.
What if the stylist declines?
Stylists work independently so they’re not obligated to adhere to changes.
We kept the original form but improved it
Although selecting appointments would be most convenient for our users, the system would be difficult to implement for the business. Therefore, we kept the original form design, but designed steps to guide users through the booking process.
Previous Project
Next Project
