Making it easier for users to browse their personalized skincare recommendations
Project Overview
Bottlecode is a skincare and grooming service that provides consultations and personalized product recommendations for men. Refining the presentation of product recommendations allowed users to feel they were receiving a comprehensive and curated regimen, resulting in increased Add to Cart clicks.
Role
UX Researcher
Product Designer
​
Team
1 UX Researcher & Designer
3 Bottlecode Founders
Timeline
2 weeks
​
​
The Challenge
Bottlecode users have a difficult time viewing their curated skincare recommendations. It’s easy to lose their place while browsing on both mobile and desktop viewports. My goal was to design a better way for users to navigate through their recommendations.
Research
Current State Analysis
Using Hotjar screen recordings, I discovered that users continually switched between category pages while browsing their recommendations. They lost track of the categories they visited and had difficulty identifying unvisited pages because the order of additional options was not retained from page to page.
The old Bottlecode recommendations experience
Interviews
Interviews with regimen curators revealed additional pain points in the recommendation process:
-
Users needed clear indicators of their top recommended products to prevent being overwhelmed by the number of products on the screen.
-
Users also wanted to know why products were chosen for them and how they would address their specific concerns.
Insights
There were several improvements Bottlecode could make to the presentation of product recommendations—
How might we make it easier for users to browse and understand the products curated for their needs?
Ideation
Sketches
With the area of opportunity defined, I brainstormed ways for a curator to provide clear indicators of recommended products and to include personalized notes explaining their choices and alternate options.
​
Concepts explored included standard e-commerce side navigation bars, scrolling pill navigation bars, and mobile dropdown menus. By default, the top recommendations would display and users could browse additional options in separate views.
Concept sketches 1 and 2
Wireframes
The initial concept sketches were presented to stakeholders, who preferred the direction of Concept 2 which had a grid presentation of products.
​
Additional rounds of design critique feedback resulted in iterations to:
-
Reduce the number of pages needed to see curated regimens
-
Add a 'Buy All' functionality
-
Update the navigation between recommended and additional options to tabbed views
Multiple iterations of wireframes
Design
Visual Design
After the wireframes received approval, the next step was the visual design. Although Bottlecode did not have an existing design system, I utilized the current typography styles and color palettes to maintain design consistency across the site. I also began building a component library that could be leveraged in future design projects.
​
Mockups for the final design were then annotated and handed off to a developer for implementation.
Annotated specs for developer handoff
During development, we encountered a regression conflict between the format of previously written expert notes and the new design. Since we would be retroactively applying the updated design to previously curated recommendations, our initial plan to consolidate expert notes into one field for the additional options view resulted in an overwhelming wall of text for users. I worked with the developer to modify the layout, enabling multiple category-level notes for better readability and organization.
Modified design enabling multiple category-level notes
Outcome
Impact
Due to time and resource constraints, I was unable to conduct usability tests before the developer handoff. However, I closely monitored analytics post-launch using Hotjar video recordings and weekly KPIs. As a result of the new design implementation, we observed a 300% increase in Add to Cart actions.
In the next iteration of this project, I hope to explore concepts with more progressive disclosure that still allow users to view alternate options and supporting notes.
Reflection
For future iterations of this project, I would want to gather feedback from actual Bottlecode users to identify further improvements in how recommendations are presented. While this redesign led to significant improvements, many design decisions were based on best practices and stakeholder assumptions. Since business stakeholders are not the end users, their perspectives may be biased, making user insights essential for refining the experience.