The Hair Quiz

2019
UX Writing + Design
amika

Personalized product recommendations — for a great hair day, every day.

The Hair Quiz

Project Introduction

A DTC hair care brand came to us looking for a product recommendation experience to augment their e-comm site.  

The goals of the project were to increase engagement, conversion, and average order value (AOV) through a delightful, branded experience.

My Contributions

As the lead designer I was responsible for the entire experience, including research, content, structure, logic, and copywriting.

Design Challenges

Haircare is a complex domain. I discovered that there are three main factors users consider when purchasing hair products, and each of them is quite complex in its own right.

  1. Their hair's current state. Let's use me as an example! My hair is naturally curly and fine; it's never been dyed, nor chemically treated.
  2. Their hair goals, i.e. what they'd like to improve about their hair. For me this would be split ends and frizz.
  3. Their hair style. Everyone has a different style they like and their own method of reaching it. My foolproof method is showering and then leaving my hair completely alone - a method I like to call Wet-It-And-Forget-It™️.

These three factors are comprised of information that's frequently technical and/or product-centric. So, my main goals were curating concise, relevant content for the quiz and ensuring that all the questions were easily understood and user-centric. Achieving these goals is what allowed for the successful design of this project.

My Process

Domain + User Research

My first step was poring over hair care sites to get a handle on how brands were speaking about their products to their users. This was helpful in determining the information and language that users would be expecting.

I then conducted informal user interviews and consulted user-run sites, like reddit, to see how users were talking about themselves, their goals, and their concerns.  

Hair Care Ontology

This gave me insight into the level of importance of each concern (based on how often it was mentioned). At the end of my research, I had built a comprehensive map of the hair care domain on top of which I could build the product finder experience.

High-Level User Flow

Using my map of the domain, I created a high-level user flow. In order to make the quiz feel natural, I mimicked the flow of information that I noticed in conversation, comments, and reviews - e.g. users almost always start with their hair type first.

High-Level User Flow

Brand Research

Once I had a good foundation for the experience it was time to add in the details. In order to do so, I needed to get into the mind of the brand, so I studied their brand guidelines and conducted discovery calls with their project stakeholders.

From there, I created a persona named Ace to use as a guide for the copy across the experience. In order to make her feel like a real person, the persona included lots of little details about her life. For example:

Childhood Details

Ace grew up in a small town outside LA with her parents, her younger brother and their small dog Norman. Her parents both worked 9-5s, meaning that she had the house (mostly) to herself every day after school for at least a couple of hours. Her best friend Lauren lived next door and would come over every day. They would bake cookies and watch old movies, lounge in Ace’s inflatable pool, play fetch with Norman, and thumb through old copies of Vogue.

Personality Traits

She’s playful and sassy. She’s quick to laugh… loudly.  She’s drawn to people who are either playful like her, or who are a bit more quiet and serious. She loves a good pun.

The complete persona document also included detailed writing guidelines, her complete life story, Do’s and Don’ts, and Likes and Dislikes.

Detailed User Flow

I took the high-level flow and I added copy based on the persona, I incorporated educational content where I thought users might need an extra hand, and I sketched out all the edge cases and possible routes a user could take.

Detailed User Flow

I know, I know... there's a lot of detail. But don't worry! Here's a snapshot of the first few interactions to give you a better idea of the copy.

Intro Copy

If you want to take a look at the complete flow in all of its glory, here's the link!

Prototype + Usability Testing

Once I had the detailed flow complete, I used our internal tool to implement my preliminary design. With this fully functional prototype, I set up a remote usability test with 5 participants. My main goals were to gauge the testers’ reactions to the following: the copy and tone, the quality of the recommendations, the length of the quiz, and of course the experience overall.

The Results
  • 4 out of 5 testers said they felt the recommendations were of a high quality, and that this experience would help them make a purchase decision.
  • 3 testers commented on the tone of the experience (all positive).  
  • One tester had trouble understanding the Over-Processed question.  
  • The main point of dissatisfaction across testers was the length of the quiz, 4 of them felt it was too long, although none of them could pinpoint specific questions that they thought were irrelevant.
My solutions
  • I added an explanatory flow to the question about processing.
  • I removed 3 questions from the flow (see the greyed out sections in the revised high-level user journey below), which would have the least impact on the recommendations and would impact the most users.
Revised High-Level Flow


Post-Launch Optimizations

After implementing the changes from usability testing, we launched the complete experience and monitored our success metrics. There were a few metrics that didn't immediately reach their targets, so I came up with hypotheses and possible solutions, which I then validated through live A/B tests.

Example

Initially, our bounce rate was higher than we would have liked, which I hypothesized was because the introduction message was too long.  My secondary hypothesis was that we could further decrease the bounce rate by playing with the tone of the messages, so to that end I deployed an A/B test with 3 variations:

A control that was a shortened version of the original introduction.
Version A: a shortened + user-focused introduction.
Version B: a shortened + psychologically-enticing introduction.

Overall, we saw an absolute decrease in bounce rate from 67% to 60%.

Within the variations, Version A reached a bounce rate of 58% while the other variations (control + Version B) tied at 61%. By far the most significant impact on bounce rate was changing the length of the introduction, but adding the user-focused line had an impact as well.

The Final Experience

Initial State

The Quiz

The Quiz Results

Personalization Modal

Personalization Badges

Try it for yourself here.

The Results

After being live for 2 months, these were some of our results:

3X conversion — 4X revenue — 90% CSAT

Also, during the pandemic Glossy published an article about the experience, which included these additional results:

Through the chatbot, Amika has seen sales conversion rates increase, on average, by 300%, but the conversion rate spiked to 800% when Amika ran a flash sale in May. Additionally, quiz takers spend at least four times longer on the e-commerce site, and the average basket size of those customers is at least 70% larger than non-quiz takers.

Read the article here!

Next Case Study →