THE RESULTS

+174%

USAGE

INCREASE

+33%

UNITS

PER

ORDER

+52%

BASKET

RATES

INCREASE

+166%

CONVERT

RATE

JUMP TO:

NEXT >>

Fenty Beauty Improves Basket Rates & AOVs

Fenty Beauty had been on the Salesforce Commerce Cloud platform for 18 months. They asked our advice on how they could optimize the user experience to improve business outcomes. As the Sr. Principal UX Designer, I conducted a shopper journey review to identify areas for improvement.

THE CHALLENGE

My Role: UX Design / Research / Project Coordinator

Usability Tests

I conducted remote usability testing with 5 desktop and 5 mobile participants.I wanted to test how well users interacted with the site when tasks to find a specific product and casually browsing. The study focused on identifying areas of frustration, confusion, and task abandonment. Encouraging participants to express their thoughts and opinions allowed for the collecting valuable information on the effectiveness of the site.

Scenario

Shoppers were asked to go to the Fenty site and shop for “Plush Matte Lipstick” and an additional product of their own choosing. Once they had at least two products added to their cart they were then to begin the checkout process.

Quotes

"Ugh, I did not see the search until after I found the lipstick." (Desktop Tester 03)

"This is so frustrating! I give up trying to search for specific products on this site." (Desktop Tester 05)

"I missed the desktop filters when shopping. It would have been nice to be able to search for red products." (DesktopTester 01)

"I was expecting to be able to filter by color or price on my phone, but there was no such option." (Mobile Tester 01)

"There are so many lip products! I wish I could filter by finish or shade range to find the perfect Fenty lipstick faster." (Mobile Tester 03)

"The mobile site really needs filtering options. It's hard to shop without them." (Mobile Tester 04)

Conclusions
Desktop users are experiencing significant frustration due to the locate search feature. Mobile users find the search feature easier. Both desktop and mobile test subjects are frustrated by the inability to filter the results.

Data

By leveraging Salesforce benchmarks and reports data, I compared Fenty's KPIs against industry data. By analyzing this data,

we can identify potential friction points that may be impacting the shopping experience.

Inbound Traffic

First I look at inbound traffic by device to understand how visitors are arriving at the site and placing orders. The following represents the percentage of inbound traffic and orders for the Health and Beauty vertical. Fenty's numbers were higher in both cases.

Shopper Journey & Search Data

With the shopper journey benchmarks we want to see the percentage of visitors who are adding products to the basket, checkouts started vs. abandon and conversion rates. Revenue details like dollars per session and AOVs. User engagement information like page views and minutes spent on the site.

The search data is valuable for understanding the percentage of users who are interacting with search. This can be valuable for making recommendations about how and where search is presented. Additionally, we analyze the percentage of searches that return results and lead to conversions. This can help assess the effectiveness of search suggestions and results pages, allowing us to identify areas for improvement and deliver a better user experience.

* To protect Fenty's information, the tables presented serve as placeholders, and are not industry data.

* Due to privacy policies, I am limited to presenting data in percentages rather than specific numbers.

Fenty’s showed there was a low usage of search and add to basket rates, as well as conversion rates from those who performed a search. This indicated that we should take a close look at the Search feature, search results and product details pages.

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.

ANALYZE & DESIGN

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 50% lower than the average for 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.

Heatmaps

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 the recommendation 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.

Original Design

Heatmaps confirmed that there was a low search usage then all sites on Commerce Cloud at 604% lower interaction

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.

Revised Design

The follow-up heatmaps showed a 193% interact rate above the benchmark

Revised Design

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

Search Suggest

Observation:

At the time the search suggestion feature only showed two product recommendations, 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:

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

<< PREVIOUS | NEXT >>

BACK TO THE TOP

Alternate Images

Observation:

Alternate images can play an important role in a shopper's decision to add products to the cart. A single image might not capture all the features and functionalities of a product. Alternate images allow consumers to see different angles and uses, providing a more comprehensive understanding of what they are purchasing. This can help build confidence in the product's quality. 73% of consumers review at least three product images before adding an item to the cart.

Heat maps show that how alternate images are displayed can affect interaction rates.

Thumbnails positioned near the main image produce the highest interaction rate at 23%.
Arrows position to the left into the right have a 21% click rate.
Dots underneath the main image to indicate a swiping motion have a 5% interaction rate.

Not only was Fenty using the lesser used dots, they were also overlaying them on top of the main image which was making it difficult to see them.

Recommendation:

It was recommended to Fenty that they opt to use the more highly visible thumbnails combined with arrows to increase interaction rates.

Original Design

Revised Design

DELIVERY

Follow-up:

After the delivery meeting, I continued to collaborate with Fenty, we went through each of the recommendations one by one to determine effort levels and ROI, and create a detailed roadmap.

From the 74-page delivery deck presented to Fenty, the recommendations above are the most critical ones. Below are additional suggestions for future phases of optimization.

Other Recommendations:

Site Speed Assessment
Add a product finder
Address hover state sensitivity on navigation
Add color swatches to product tiles
Add strikethroughs to sale pricing
Create better visual hierarchy of product information on PDPs
Prioritize view bag over checkout in mini-cart
Increase consumer confidence by adding security badges and policy details
Highlight bonus products
Fixed autofill and contextual label issues on the checkout forms
Improve visibility for error messages
Localized International forms, shipping carriers and billing methods
Increase visibility of submit button on order review page

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.

Original Design

Revised Design

Mobile Filters Open

DISCOVERY

Stakeholder Meeting

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 organized a discovery call with their stakeholders to gather their insights. During this meeting, they offered their own observations about the site, including the challenges they have encountered. They also shared internal data and user personas. To gain further insight on user behavior I recommended and coordinated the installation of heat mapping software. We agreed on the scope of the engagement and the deliverables.

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%

RESEARCH

Personas

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.