Tresse Noire
CLICK PROTOTYPE
Sketch 3
Omnigraffle
Keynote
Invision
Tresse Noire is an in-home hair salon that provides hair styling services for African-American women.
Customers can book a reservation on the site or app to schedule a traveling stylist.
My Role: UX/UI PROJECT MANAGER
Clara decided to get her
hair braided at home.
Login to schedule an appointment.
.....unfortunately, she got confused and had to call.
THE PROBLEM
THE SOLUTION
Customers only completed 20% of the booking process, and the user conversion rate was only 5%. Most users resorted to calling instead of using the website or app to book an appointment.
As a project manager, my team and I helped Tresse Noire identified its problem and created a thoughtful, efficient, and user-centered booking flow and later the entire website. We designed the booking process on the home-page, added best practices, and placed an optional sign up at the end.
USER RESEARCH
At the start of the project, it was essential to understand our product from customer’s perspective through user testing the original web and iPhone app. I user tested the original product to research where they struggled in the booking process and compared it with the data from Google Analytics.
It was eye-opening yet unsurprising to see similar user pain points from the qualitative and quantitative data. The drop-off points from Google Analytics coincided with the areas that were unclear and confusing.
COMPARATIVE ANALYSIS
For features comparison, I have learned to notice what and why they don’t have specific features instead of adding more features and increase additional resource allocation.
Sign-up is not as obvious of an affordance at the beginning of a booking process. Asking for registration and adding extra steps can hinder users from exploring your web and services.
HEURISTIC ANALYSIS
As a group, we conducted a heuristic evaluation. During this analysis, I was genuinely surprised to see the findable and accessible metrics ranked well. They can finish the booking process. However, users had a higher discomfort with its credibility, value, and delightfulness.
IDEATION
With all the insights collected from the interviews, I continued our process to discover, organize, and categorize pain-points, patterns, and find the minimal viable product. The methods used were
. Affinity Mapping
. Feature Prioritization
. Moscow
STRATEGY AND IDEATION
QUICK SUMMARY
- Communication Manager
- Resident: Brooklyn
- Hobbies: Fashion, Beauty, Blogging
- Tend to be late
FRUSTRATION
- Wants the salon experience
- Wants to see history of past salon visits
- Going to a salon takes too much time
- If she adds an extension and needs a
hair-cut, the additional prices are vague.
USER PERSONA
Shenice is a young married woman who runs a successful PR and Marketing firm. She has an extensive network of friends, cares about her appearance and wants to maintain her stylist images. Looking into maximizing her network, she hosts a meet-up on how to increase social awareness once a month. She overcommits to too, many events and needs to prioritize her day and slow-down.
HOW WE CAN SERVE
- Provide a variety of hairstyles and
salon products
- Allow for the creation of a personal
account with history
- Make all prices available
SHENICE WILLIAM
33 years-old Communication Manager
PR and Marketing Firm
INTERVIEW SYNTHESIS & PERSONA
From the user interviews and findings, I realized that there were just too many errors and steps in the original booking process. A persona that embodied pain-points found from the research was created. She had the demographic data of a potential customer for Tresse Noire.
WIREFRAME to PROTOTYPE
SKETCH AND WIREFRAMING
During this stage, I wireframed a skeleton design in black and white, mainly to show an idea of UI elements for the text, images, buttons, icons, etc. to possible layouts.
I continued to sketch and wireframe some new designs,
Option 1 - Drop-down with no icons, has only two selections,: location and calendar (time was embedded).
Option 2 - Drop-down with icons has three selections: location, calendar and time
Option 3 - The three fields are stacking
As a result of user testing, the users prefer 'Home Page Option 2. They like to have everything in a row, icons on top for visibility and prefer to split schedule into two separate fields: calendar and time.
As we went along, we added company logo, inspiration images, products suggestions, best practices, etc. in the wireframes.
There were a few best practices that give a user confident and reassurance during checkout: credit card options provide a sense of financial stability, transparency of cost create trust, and new user account extend continuity and loyalty.
THE HIGH FIDELITY WIREFRAMES AND PROTOTYPE
In the new website, the booking flow is not only simple, visible, inspiring but also clear and informative.
The unappealing original website changed considerately to address credibility, value, and delightfulness.
BEFORE AFTER
IOS iPhone Design
The wireframing and prototyping phases went thru many iterations until we achieved a satisfactory level. And of course, the design was documented for the developers to build and for future references.
