Providing a Rainbow Hair Artist an Opportunity to Showcase her Brand and Book New Clients with Ease
Timeline- 2 Months
My Role- Product Designer
Tools- Wix, Figma, Miro
Project Background
Samantha Devore is a budding hairstylist in Huntsville, Alabama also known as "Rocket City". Sam calls herself a "rainbow hair artist" because she specializes in outrageous, fun hair and now she wants to branch out and build her own identity. Her goal is to start growing her clientele when she starts renting her own booth in July 2022.
The Challenge
Samantha works at The Red Door Salon and they have a very cluttered and confusing website. They have UX problems such as distracting pop-ups and an overwhelming amount of information on every page.
Sam feels that this is stunting her growth and because of this, she is missing out on booking more clients.
This is where I come in.
The Solution
Capturing the mood
I ran a collaborative workshop with Samantha to understand the tone she wants to be evoked through her website.
Since she specializes in fantastical hair, she wanted the site to be fun and colorful, yet professional and clean at the same time. I asked her to build up a Pinterest board and look on dribbble for inspiration so I could get visual aids on the style she wants. I was then able to make a mood board to capture the right tone and use it as a guide moving forward.
I knew my greatest UI challenge would be keeping things clean and sophisticated yet funky and colorful at the same time. I was excited to take on the task.
Understanding the Business
To start off the research process I interviewed Samantha to find out what her "need to haves" were for the project. I also wanted to find out more about her process with booking clients to see how we can tailor the experience to enable new clients to book in the easiest way possible.
Key Takeaways:
- The 3 things new clients always ask up front are cost, duration time of hair service, and how to book. The cost and duration of these hair services vary, so I wanted to ensure that information was as transparent as possible, and that the booking process needed to be laid out efficiently.
- There needs to be separate booking processes for new clients and returning clients because new clients need to provide more information
- Social links needed to be displayed in areas of importance so she can grow her following on social media
Understanding the Competition
Next I conducted competitive analysis on the two top competitors for her salon, as well as the salon she currently works at. I thought it was especially important to analyze the website for the salon she currently works at because this would help me understand exactly why she wanted to have her own in the first place. This helped me to analyze what they do well that we could implement, and what they do wrong that we definitely want to avoid.
Key Takeaways:
- Excessive pop-ups are very distracting and take away from the overall experience
- Too much information and choices become overwhelming and clutter up the booking process
- The less clicks it takes for the user to perform their chosen task the better
Journey Mapping
Next I created a customer journey map so I could better understand the user's journey and gain valuable insight regarding common customer pain points and what they go through when it comes to booking a hair appointment.
Storyboard
After understanding the customer's journey, I made a storyboard to get a better articulate the experience a user goes through when booking an appointment. This has really helped me see the user's point of view, and this would help me tailor the website to them.
Sketches
Samantha and I looked at other hairstylist websites with good UX to gain inspiration and to get a feel for which direction we wanted to go in. With those in mind, I created multiple sketches to use as a blueprint.
Lo-Fi Wireframes
After sketching out ideas as a starting point, I looked into what was and was not possible for me to build using the premium plan Samantha uses with Wix.
This was good practice designing within constraints.
I wasnt desigining in Figma so I knew I wouldn't have as much creative freedom.
Because Samantha does not have the highest subscription with Wix, that meant there were going to be some limits to what I could do.
There were some other ideas such as file uploads directly in the booking form, that we wanted to implement but ultimately could not due to since it was not offered in this plan.
After figuring out what I could do within Wix, I was then able to create lo-fi wireframes in Figma to give myself a blueprint.
Style Guide
The site needed to come across as funky and playful. Samantha expressed a desire for "groovy fonts" and rainbow colors.
So I made sure to deliver.
Rocket City Rainbows Prototype Video
Key Takeaways
Working on this project was good practice for collaborating with stakeholders and working with constraints.
For instance,
-I could only do so much with Wix and the budget for her subscription plan.
-I needed to showcase the funky personality of her brand while keeping things clean and professional.
-It had to be up and running by July 1st. (Happy to report that I finished it 4 days ahead of schedule!🎉🥳)
I enjoyed the design process on this project, I had fun designing with bold colors and fonts, and I enjoyed working with Samantha and learning a bit more about the hair industry. Samantha was so happy with the finished product that she cried a little so I feel like that was a good sign of a job well done.
Next Steps
- Run google analytics and HotJar on the site to track user activity
-Keep iterating and testing
Key Takeaways post Website Launch
-I was pleasantly surprised to see the number of users interacting with the contact forms and the book now button. These features are the gateway to Samantha booking more clients.
-I found most users are signing in from their mobile devices, this made me happy that I spent time on the mobile version and not just desktop.
-The site has a 75% engagement rate and most users spend the majority of their time on the services page.
- Samantha's clientele doubled within the first two weeks of the website launch