THE RESULTS
+174%
SEARCH
USAGE
INCREASE
+33%
UNITS
PER
ORDER
+52%
BASKET
RATES
INCREASE
+166%
SEARCH
CONVERT
RATE
Fenty Beauty Improves Basket Rates and AOVs
Fenty Beauty is a cosmetics brand founded by singer and entrepreneur Rihanna in 2017. The brand is known for its inclusivity, offering a wide range of foundation shades to suit all skin tones. Fenty Beauty also offers a variety of other makeup products, including lipsticks, eyeshadows, and highlighters.
THE CHALLENGE
Fenty Beauty had been on the Salesforce Commerce Cloud platform for approximately 18 months. While generally satisfied with the site's performance, they asked our advice on how they could optimize the user experience to improve business outcomes. We proposed conducting a comprehensive shopper journey audit to identify areas for improvement.
MY ROLE
Responsibilities
Leadership and Communication
As the Sr. Principal UX Designer, I took the leadership role for the shopper journey review. I organized a discovery call with Fenty's stakeholders to gather context and insights for the audit. I coordinated the installation of heat mapping software and provided regular updates on the progress of the efforts.
Research
By leveraging Salesforce benchmarks and reports data, I compared Fenty's KPIs against industry data. This allowed me to identify specific areas where to focus. Furthermore, I used heat mapping to quantify user behavior, providing valuable insights into their interactions with the site.
Experience Strategy & Ideation
Using the benchmarks, heatmaps finding and a visual review of the site, I developed a delivery deck with actionable recommendations. During the delivery and follow up meetings, I partnered with Fenty's stakeholders to prioritize the recommendations.
Prototype and Design
Using the current design of the site as a foundation, I developed high-fidelity mockups that visually conveyed the proposed recommendations.
DISCOVERY
Stakeholder Meeting
Before the discovery meeting with Fenty Beauty, I did an initial pass of the site to get familiar with their brand, products, and target audience. Having made some initial observations about the site, I then had a discovery call with their stakeholders to gather their insights on the current state of things. During this meeting, they offered their own observations about the site, including the challenges they have encountered, areas of success, and shortcomings. They also shared internal data, user personas, and customer feedback. Finally, we agreed on the scope of the engagement and the deliverables.
RESEARCH
Quantitative Data
Benchmarks
Using Salesforce benchmarks and dashboard reports I compared Fenty’s data against the Health and Beauty vertical on the Commerce Cloud platform. One of the data points that jumped out was the extremely low usage of search and add to basket rates, as well as conversion rates from those who performed a search.
-
Search usage for desktop was 53% lower than the benchmark.
-
Mobile search usage was 47% lower compared to the vertical.
-
Searches that returned results for desktop and mobile was 33% lower than the benchmark.
-
Revenue from search was 44% lower then the comparison set.
PERSONAS
Qualitative Data
Fenty Beauty's shoppers range from Generation Z to Millennials (16 and 42). They are individuals seeking high-quality, trendy makeup products that promote self-expression and creativity. While they are willing to invest in quality makeup, they are not solely focused on luxury brands.
Heatmaps
* Due to privacy policies, I am limited to presenting data in percentages rather than specific numbers.
Heatmaps were a valuable tool for understanding how users interact with the Fenty Beauty website. This visual representation of user clicks and scrolls provided us with valuable insights into user behavior. We were able to Identify areas of high and low user engagement. This information proved to be invaluable for optimizing the layout, content, and functionality of the website to enhance the user experience.
-
The heat maps showed that Fenty's approach to search led to a 604% lower interaction rate than the average for all sites on the Commerce cloud platform, not just limited to the health and beauty vertical.
-
Heatmaps highlighted category popularity, helping Fenty's decision to reposition the "New" category due to low consumer interest.
-
Limited homepage scrolling revealed by heatmaps suggests optimizing content strategy and prioritizing high-engagement areas to improve user experience and load times.
-
Heatmaps identified low engagement with alternate product images on PDPs, revealing an opportunity to improve their visibility and influence customer purchase decisions.
With the heatmap data fresh in my mind, I began the analysis and design phase of the review.
ANALYZE & DESIGN
Key Insights
In the analysis and design phase of the Fenty Beauty UX audit, I leveraged insights from both benchmark data and heatmap studies. Benchmark data provided a strong foundation, establishing industry standards and average user behavior for eCommerce platforms. Heatmaps offered a visual perspective, pinpointing areas of user engagement and interaction on the Fenty site. By combining these two data sets, I could conduct a more informed visual inspection of the site, identifying opportunities to enhance the overall user experience.
Search
Observation:
Since the benchmarks already provided information about low search usage I immediately turned my attention to this functionality. Having conducted over 300 heat map studies, I have collected data on average interaction rates for search based on location and presentation. The heat maps showed that Fenty's approach to search was 604% lower than the average for all sites on the Commerce cloud platform, not just limited to the health and beauty vertical. Fenty's search feature was an abstract-looking magnifying glass that was easily overlooked, as it was tucked away in the upper right-hand corner.
Recommendation:
Heatmap studies have shown that sites with a fully disabled search bar have 65% higher search usage than those with a magnifying glass icon. Fenty was advised to make the search feature more visually prominent and move it for increased visibility.
Based on other findings highlighted from the heat map studies, Fenty made changes to the navigation. The "Shop" category was prioritized and repositioned to the number one position, while the “New” category was eliminated and replaced with a “Sale” category.
Original Design
Heatmaps confirmed that there was a low search usage then all sites on Commerce Cloud at 604% lower interaction
Revised Design
The follow-up heatmaps showed a 193% interact rate above the benchmark
Search Suggest
Observation:
At the time the search suggestion feature only showed two product recommendations at a time, shoppers needed to scroll to see more results. This limited visibility can be frustrating and it was difficult to compare recommendations. Users might miss out on relevant options simply because they weren't displayed initially.
Recommendation:
With the new design it was recommended to use a layout that would make better use of the available space providing a more complete view of products as well as a call to action to see all results. Expanding the suggestions to six products would allow users to quickly scan a wider range of options and potentially find the product they're looking for faster.
Original Design
Revised Design
No Search Results
Observation:
Commerce Cloud data showed that there was a high rate of searches not returning results. 33% higher on desktop and 28% for mobile devices compared to the health and beauty vertical. Customers who landed on the "no results" pages received no guidance on alternative options, creating a dead end in their shopping journey. This could make shoppers feel discouraged and could lead to abandoning the site.
Recommendation:
To address the high rate of "no results" pages, a two-part approach was recommended. First, Fenty Beauty should analyze search reports to identify queries leading to dead ends. This analysis can help refine the search algorithm, product categorization, or identify missing product information, ultimately improving search accuracy.
Next was to revamp the current "no results". Since this page had such a high volume of hits this was vital to retain frustrated shoppers. By providing clear guidance, such as suggesting alternative search terms, showcasing relevant products, or enabling browsing by category, Fenty Beauty could keep visitors engaged and minimize user frustration.
Original Design
Revised Design
THE RESULTS
Successful Engagement
The comprehensive shopper journey audit for Fenty Beauty, focusing on the search functionality, resulted in a significant improvement in user experience and overall business. By analyzing user behavior through heat mapping and leveraging industry benchmarks, key areas for improvement were identified. The actionable recommendations led to a significant boost in user engagement and conversion rates. This project demonstrated the power of data-driven recommendations and its impact on user-centric design.
-
Desktop Search Usage increased by 194%
-
Desktop search convert rates improved by 183%
-
Mobile search usage increased by 155%
-
Mobile search convert rate increased by 149%
-
Basket Rates increased by 52%
-
Units per order increased by 33%
No Filters On Mobile
Observation:
There were no filters on the mobile experience, just the ability to sort by price range, alphabetically, and best selling. This was significant because over 70% of inbound traffic for this vertical is on a mobile device. 11% of mobile users interact with filters and there is a 18% higher add to basket rate for mobile sites that have the ability to filter compared to those that do not.
Recommendation:
The recommendation was straightforward. Give mobile users the ability to filter on search results and product list pages. Filters empower users to narrow down their results and increase the chances of adding desired products to their basket. Filters can also reduce bounce rate because the shopping experience is more efficient.
Revised Design
Original Design
Mobile Filters Open
