CLICK PROTOTYPE
Sketch 3
Omnigraffle
Keynote
Invision
Tresse Noire
Designed for 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
As a project manager, my team and I helped Tresse Noire identified its problem and created a thoughtful, efficient, and user-centered booking flow. We designed the booking process on home-page, added best practices, and placed an optional sign-up at the end.
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.
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.
We collaborated to sketch some new designs, and then user-tested them to see which ones the users preferred.
Following on from my article about how to create great UX documents, I thought that it would be useful to collate some example UX documents and deliverables together. This should hopefully provide a bit of inspiration and assist when it comes to choosing the type of document(s) to produce. For each document / deliverable I’ve included examples, together with a quick outline and links to more information. The following UX documents and deliverables are covered:
Content models | Empathy maps | Experience maps | Mental models | Personas | Process diagrams | Prototypes | Scenario maps | Scenarios | Sitemaps | Sketches | Storyboards | Style guides | Style tiles | System maps | Task grids | Usability reports | User journeys | User story maps | Visuals | Wireframes | Word clouds
Please note that the majority of these example documents are not my own. Click on a document to view the source.
Content models
A content model shows all the different types of content that you will need for a given design, whether it’s a website, app or even brochure. Content items are shown together with their fields, types and the different relationships (such as ownership) between the content. Content models are quite similar to domain models.
A wireframe basically shows the UI elements (text, images, buttons, links etc…) that make up a screen, page or UI component. They are a bit like a blueprint for the UI, showing which elements make up the UI and how they should behave, but not necessarily what the UI will look like.
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.
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.
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
SHENINE WILLIAM
33 years-old Communication Manager
PR and Marketing Firm
SKETCH TO WIREFRAMING
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
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
HIGH FIDELITY TO PROTOTYPE
We incorporated best practices from the industry into the wireframes for the user checkout process.
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.
