Hair Care Product Finder
An up-and-coming hair care brand came to us for a product finder experience for their e-comm site.
The goals of the project were to increase engagement, conversion and average order value (AOV) through a delightful, branded experience.
As the lead designer I was responsible for the end-to-end experience: content, structure, logic and copywriting.
Haircare is a complex domain. In order to make precisely personalized recommendations, you need to fully understand the user's end goal, which is usually informed by these 3 independently complex factors:
- 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.
- Their hair goals, i.e. what they'd like to improve about their hair. For me this would be split ends and frizz.
- Their hair style. Everyone has a different style they like and their own method of reaching it. My preferred method is getting my hair wet and then ignoring it.
These three factors add up to a lot of information, and often it's information that can be quite technical or product-centric. So the main goals for me were curating concise content for the quiz and ensuring all the questions were easily understood and user-centric. Achieving these goals is what allowed for the successful design of this project.
Domain + User Research
I started off with research, so that I had a deep enough understanding of haircare and its consumers - AKA my end users.
My first step was poring over hair care sites to get a handle on how most 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 and their goals and concerns. This gave me insight into the level of importance of each concern, extrapolating from the frequency of its mention. 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 I created a high-level user flow. Its order follows the natural order in which users tend to describe their hair in conversation.
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.
Next, 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, including:
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.
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, 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.
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. 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 users’ reactions to the following: the copy and tone, the quality of the recommendations, the length of the questionnaire, and of course the experience overall.
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, and all were positive.
One tester had trouble understanding the Over-Processed question, so I added an explanation.
The main point of dissatisfaction across testers was the length of the questionnaire, 4 of them felt it was too long, although none of them could pinpoint specific questions that they thought were irrelevant.
My solution: 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.
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.
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:
Version B: a shortened + psychologically-enticing introduction.
Version A: a shortened + user-focused introduction.
A control that was a shortened version of the original 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
After being live for 2 months, these are some of our results:
During the pandemic Glossy published an article about the experience, which published 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.