The Mane
Responsive web design for The Mane salon.
Responsibilities
UX Research
UX/UI Design
Prototype
Usability Testing
Project Type
Independent
Duration
2 weeks,
40 hrs/week
Background
The Mane, a popular hair salon in Guam, lacks a website and relies on phone and Instagram for scheduling, causing inefficiencies for both the salon and clients.
By creating a website with service information and scheduling features, The Mane can boost client acquisition and return rates.
Booking feature
List of services and prices
Stylists and social media
01. RESEARCH
Market Research
Market research is crucial in understanding the present state of the market, projected growth, and industry trends. Conducting market research can determine if current operations at The Mane require any updates.
952,619
salons in the U.S. in 2023.
+0.4%
average annual increase in the number of businesses from 2018-2023.
Millennials
make up group with largest disposable income.
Takeaway
As the number of hair salons continues to increase steadily, it is crucial to appeal to the demographic consisting of tech-savvy millennials who possess significant disposable income.
Businesses must adapt to new ways of operation to cater to to align with modern practices.
Stakeholder Interview
Informational interview with the stakeholder to gain better understanding of current business operations, needs, and frustrations.
Key Findings:
There is a lot of manual administrative work done in the salon, such as scheduling.
Most appointments are made via phone or messaging at The Mane.
Currently, The Mane does not have an official website and relies mostly on social media.
Affinity Mapping
User Interviews
With a bit more context around the market and business operations, I interviewed three participants to learn about their process of finding and selecting a hairstylist or salon, as well as any challenges they may face in this process.
Key Findings:
The stylist and their work are the most important to clients when deciding on a salon and sticking to them.
Online booking is not common, but does exist.
People find salons and stylists through word of mouth or searching the web and social media.
A central website that houses all information about the salon, its services, stylists and stylists’ works would be helpful to new clients.
How might we…
Make finding and going to the salon or a stylist easier for potential new clients?
Help ease a bit of work for salons in administrative tasks?
02. PRIORITIZATION & ROADMAPPING
Product Roadmap
Based on secondary research and user research findings, the About, Service, and Team pages are basic informational pages that are present in the majority of hair salon websites. The Mane did not have a central website or social media page that housed such information. Therefore, the addition of these pages would have a high impact on users, while requiring low effort on the design and development end.
While an online booking feature would be useful for both users and the business, it requires much more effort to develop. Since The Mane did not have the capacity to develop a new scheduling system internally, I suggested integrating a third-party scheduling system called Boulevard.
03. IDEATION
Wireframes
Initial mid-fidelity wireframes for the About, Service, and Team pages were designed.
Since the booking feature would be outsourced from Boulevard, screens for the booking feature were not designed.
Responsive high-fidelity wireframes were created for tablet and mobile views.
After some feedback from stakeholder, iterations were made:
Home page was re-designed to give a more editorial feel.
About, Service, and Team pages remained the same for the most part.
Positioning and sizing of the logo was changed, and the menu bar was repositioned to the right side of the pages.
Responsive Wireframes
04. PROTOTYPE & TESTING
Prototype & Testing
With high-fidelity wireframes approved by stakeholder, UI components were added for an interactive prototype.
Key Takeaways
Five participants were given 2 tasks to complete:
1) Browse different pages (About, Service, Team)
2) Book a haircut appointment with Paulina at 10:00am
Participants were observed testing the prototype via Zoom using the Figma prototype link.
After each task, participants were asked 3 questions:
“How easy or difficult was it to complete the task?”
“Was there anything you didn’t expect or found confusing?”
“Is there anything you’d recommend I’d add or change?”
All participants browsed the different pages easily.
40% of participants suggested linking the instagram handles.
20% of participants asked if there was a way to add a “click-to-pay” (Paypal, Apple Pay, etc.) to the payment details during the booking confirmation.
*However, the booking feature is from an outside platform, Boulevard, so it is not something I will be able to iterate on.
Final Prototype
Things Learned
There may be conflicting business and user needs. It is my job as a UX designer to put user needs at the forefront of my work, while finding a solution that works for the business as well.
Interview more participants for a more robust data.
Design with a mobile-first approach in the future.
Future design iterations and feature adds can be made in the future if the client requests.