I spearheaded the redesign of Function of Beauty's quiz experience, resulting in a 25% increase in conversion rate, a 25.4% uplift in average order value, and a 10.7% boost in 12-month customer lifetime value.
Role:
Lead Product Designer
Timeline:
4 months
Product:
Responsive website
Function of Beauty is a direct-to-consumer, subscription-based e-commerce platform for custom haircare. It offers personalized product recommendations and custom formulations based on the user’s hair type, condition, and goals. The primary objectives of the quiz redesign included the following:
I worked closely with the Director of Digital Product, Head of Engineering, 2 software engineers, and a graphic designer. Our team leveraged the Essence Design System which helped us build the new quiz with efficiency.
Evaluating the baseline
After 10+ user interviews and a competitive analysis, I identified these issues from the old quiz experience:
Meaning of “custom” was unclear
Several users assumed the word “custom” only applied to the recommended regimen and not the actual formulation, thus failing to understand Function of Beauty’s main value proposition.
Lack of guidance throughout quiz
Users experienced uncertainty when responding to certain quiz questions. Without proper guidance, users incorrectly categorized their hair type, thus creating bad formulations.
Insufficient product information
Users were interested in products but hesitated to add them into their cart due to insufficient product information. The availability of additional details would help users make more informed decisions.
S O L U T I O N 1
Ingredient visually communicate "custom."
To communicate customizability, ingredients dynamically display on the Ingredients Reveal page based on the user’s hair type and goals. Furthermore, the "Learn More" modal adaptively displays ingredients relevant to the selected product. The display of ingredients emphasizes the scientific rigor and efficacy behind Function of Beauty's formulas.
S O L U T I O N 2
Educational tooltips provide direction for users.
Educational moments throughout the quiz guide users in accurately assessing their hair type, hair structure, and scalp moisture. By providing context and explanations, users feel confident in their selections and are more likely to create a better formulation for their unique hair characteristics.
S O L U T I O N 3
"Learn More" modal amplifies product value.
"Learn More" modal offers application tips, key ingredients, and reviews from customers with similar hair types. The availability of this additional product information empowers users, from casual browsers to researchers, to learn about the benefits of the products and ultimately, make more informed purchase decisions.
S O L U T I O N 4
Recommendations boost customer satisfaction.
After analyzing the user's hair profile, the quiz uses an algorithm to recommend hair goals and a personalized four-item regimen. These recommendations aimed to increase customer satisfaction and retention by guiding users toward optimal formulations and regimens.
U I / U X D E S I G N
Design improvements alleviate points of friction
Before: The two pieces of related content are not nearby each other, causing users to miss essential information.
After: I utilized proximity to place the feedback message close to its corresponding action trigger.
Before: Irrelevant information cluttered the first page of the quiz and pushed important content below-the-fold.
After: I removed the unnecessary clutter and cleaned up the white space for a simpler, more focused user experience.
Before: The product cards were inconsistent in layout, size, typography, and location of internal components.
Before: I standardized the product cards, making it easier for developers to build and for users to compare.
Initial wins
Learnings ✴
This project was a significant milestone for me, as it was the first time I managed feedback from numerous high-level stakeholders. At first, juggling opposing perspectives and prioritizing competing demands proved to be challenging. In the end, I came to understand the importance of not only being receptive to feedback but also confidently advocating for my insights as the resident UX expert.