Palm Beach Nails Responsive Website
Background:
Palm Beach Nails is a new nail salon located in Palm Beach Gardens, Florida. As their business and popularity grow, they have realized their need for a website.
Goal:
Palm Beach Nails wants a beautiful and functional website to attract new customers, inform existing customers, and allow for a quick and easy appointment booking.
Time: 65 hours, Nov 2023
Role: UX/UI Designer and Researcher
Tools: Figma, FigJam, Whimsical, Maze, Google Meet
Research
To start my research, I wanted to know what nail salon customers value when looking at a nail salon’s website. I also wanted to know what information they found important in their decision-making process when deciding to be a patron of a new salon.
For my research, I used the following methodologies: Competitive Analysis and User Interviews.
Competitive Analysis
For my competitive analysis, I compared three local nail salons where I live. I looked at their various strengths and weaknesses, features on their website, and areas for improvement.
Strengths:
I found each website excelled in listing its various services.
This included the price with a brief description of the service.
Each website also offered a convenient portal to book an appointment online.
Opportunities:
The opportunities I discovered included the following:
For Slyvia’s and Salon 54, I found doing a content refresh as a great area of opportunity. This will bring a new and fresh take to the websites!
Venetian Nails also has a great opportunity to build out pages and websites for their various locations. This can help with attracting new customers when they are looking for a new salon to go to in their local area.
Weaknesses:
I found all three of the websites I looked at struggled with the overall design of their website.
Sylvia’s Nails has some old photos on its website and has not been updated in a while.
Venetian Nail Spa does not have pages or websites for its multiple locations.
Salon 54 uses a lot of stock photos in its visual design.
Threats:
The only threat I discovered could be applied to all three salons I looked at. These threats included other area salons competing to get customers. Other threats included customers deciding to stop going to the nail salon to save money and cut extra expenses.
User Interviews
For my interviews, I interviewed five people to learn more about their nail care routine, how much they visit their local nail salon, and how they selected the salon they currently visit. I also asked questions to learn more about how they make a decision when picking a new nail salon to go to and the information they seek out and find important to make a decision.
Patterns & Pain Points:
Easily booking appointments online was very important to users. Participants also valued knowing if the salon allowed walk-in appointments or not.
Participants expressed frustration with unclear information. This includes pricing information and other salon policies.
Many users found their current salon through reviews and word-of-mouth recommendations from friends.
Participants expressed that reviews were important in making their decision to go to a salon.
A gallery or portfolio of work was also an important factor in making their decision to go to a salon.
Participants were deterred if a website overly relied on stock photos rather than real photos of the salon and the work their staff produced.
Define
From my research, I began to synthesize my findings to identify common pain points and other problems a typical nail salon visitor might have.
Affinity Map
I created the following affinity map from the common themes and answers brought up in my user interviews.
This included topics such as:
Information looked at before booking an appointment
Turns offs when looking at a website
Features they find important
Current nail care routine
Problem Statements
I finalized the following problem statements to help guide my overall design for Palm Beach Nails, as well as what information to include on the website.
Potential nail salon customers value reviews and recommendations in their decision-making process. New customers, as well as existing customers, also value clear transparency in details such as prices, cancellations, and other salon policies.
Nail salon customers are busy individuals with their current life, jobs, and families. It is important that they can easily and quickly book their next appointment in advance and online at their own convenience. It is important that the form works and looks good across screen sizes.
How might we add content to the website that is valuable and important to customers?
How might we add convenience to the appointment booking experience?
How might we create an easy-to-use booking form for clients to use?
How might we build trust in those looking for a new salon
User Persona
Tiffany West was created as a typical client of Palm Beach Nails. By creating this user persona based on my research I was better able to understand what clients and customers might need and want on a website.
Tiffany’s biggest needs are an easy to use booking system, as well as a gallery of work done by the salon staff. She loved getting nail art done sometimes on her manicures.
She is mostly frustrated by unclear information on salon websites, such as no pricing on services or unclear salon policies.
Ideate
After synthesizing and understanding my research findings, I began to develop ideas on how the Palm Beach Nails website would look. To begin creating the website, I started by creating task flows, as well as sketching what the website would look like.
Task Flows
Before I started sketching, I created the following task flows. These were used to imagine and plan what the user would go through as they navigate various flows on the Palm Beach Nails website.
Book An Appointment
Contact Salon
View Services
Sketches
I took the opportunity to do some sketches to get the overall look and feel of the Palm Beach Nails website. My primary goal with these sketches was to find a way to organize and present the information on pages such as the About and Services page, as well as create a book appointment flow.
Design
After creating my initial sketches, I began to further build out my ideas. This included creating the Palm Beach Nails brand, as well as designing my hi-fidelity wireframes for testing.
Branding
Getting the branding and overall look of Palm Beach Nails was super important. My main goal for branding was to convey a sense of luxury while also having a simple and clean look to the website. I selected complementary colors green and pink to be the main brain colors of Palm Beach Nails to do this. I used my logo design to lean into the simple and clean look I was aiming for. I didn’t want anything too distracting or hard to read on different sized screens.
Hi-Fidelity Wireframes
With my branding finalized, I created my hi-fidelity mock ups for both desktop and mobile. I created the five pages for both desktop and mobile: Home, About, Services, Contact, and Book Appointment.
My primary goal when designing the pages of Palm Beach Nails was to present large amounts of information in an easy to read way for users. I made sure to take this into account for pages such as the Services and About page.
I also found it really important to make use of images and reviews on the Home page. These were both pieces of content my interview participants expresses as important when visiting a nail salon’s website.
Test
I conducted my user testing with five participants on the desktop version of Palm Beach Nails. I tested the following flows during my user test:
Book An Appointment
Explore The Website
Results
I found my user test to be a success! My two flows were completed with no errors from my participants. I also used my tests as an opportunity to receive further feedback on how I could improve my overall design.
Book An Appointment
Users expressed how they liked the multiple opportunities to book an appointment across the website.
Feedback on the UI included making appointment availability more clear on the booking calendar.
Explore Website
Users had little to no issues completing this task.
Users felt they had all the important and necessary information they would need to book an appointment at a new nail salon.
Feedback included some of the following points:
More information about the services offered on the ‘Services’ menu. Such as how long each service is and a more detailed description.
More information about the staff of the salon. Such as the services they specialize in, pictures of their work, and a way to book with them directly.
Iterate & Final Version
From my findings and user tests, I was able to make the following changes to my final high-fidelity frames. The primary I changed was to the booking calender.
My primary iteration was to the overall UI and design of the appointment availability calendar when booking a new appointment.
On my new calendar, I made the availability more pronounced through brighter colors and a circle around the date on the calendar. I also added a green and yellow color was well to show days with best and limited availability.
Final Prototype
Reflection
Overall, I really liked the challenge of creating a new brand and website from the ground up! It was challenging and I liked the experience this entire project gave me. I felt this helped me continue to improve upon my visual design and branding skills.
I also liked the challenge of designing to present large amounts of information in an orderly way to potential and recurring visitors. I am very satisfied with how my designs turned out for the Services and About page. They were both pages with the most information and I feel my designs are organized and present a clear information hierarchy.