Star Icon - Colorfolio X Webflow Template
UI/UX Design
Star Icon - Colorfolio X Webflow Template

Bonafide Revaree PDP

Bonafide, a woman's health brand, primarily focuses spend on one product. This case study details iterative testing and design work on Revaree.

Bonafide Revaree PDP
UI/UX Design

Project overview

Product Manager: Sarah Malone
UI/UX Designer: Steff Bradley

Bonafide, a woman’s health brand that focuses on menUser testing and direct response design on Bonafide’s top selling product, Revareeopause and the treatment of menopausal symptoms, hired Ampush (later acquired by Tinuiti) as a growth marketing agency in Q3 of 2022. Out of all six of their products, only one — Revaree — tends to get the majority of spending budgets on social platforms. Starting off the client relationship, Revaree had a 5.2% add to cart rate but only a 1.9% conversion rate, showing that intent to purchase existed but that falloff was occurring from the add to cart stage to the conversion stage.

With this gap in mind and using conversion rate as our basis for success, the team and I prioritized designing product detail pages (PDPs) and flows that reduced friction between each step of conversion. Over the course of 2022 to now, I created multiple PDP designs for Revaree that iterated off of A:B tests, with the original page operating as the control for the first test and the winner of each consecutive test becoming the next control. These tests have compounded to create incremental gains to conversion rate, with a total to date of a 36% increase over the course of the client relationship. As well, with each winning test, we used our learnings from Revaree to roll out design changes to other pages in the Bonafide line of products, leading to gains across the account.

User Testing


At the beginning of the client relationship in Q4 2022 and later in Q3 2023, we prioritized moderated and unmoderated user interviews—first focusing on the original homepage and later on our winning variant—to identify user insights on the product (and menopause as a whole), pain points on the existing site, and a competitive analysis with competitor PDPs.

As I outlined the script for the interviews, I asked questions about the user’s experience with menopause, vaginal dryness, and treatment of menopausal symptoms to better understand the user persona. Questions such as “Have you seen a doctor to discuss menopause symptoms and possible solutions?” and “Have you tried prescription solutions? Did they work?” lead us to have insights on customer experiences and expectations, leading to the ideation of several concepts to prioritize on our product roadmap.

Competitive Analysis

Concurrently with initial user interviews, white boarding and innovation syncs were done across product managers, account analysts, and other UI/UX designers. Utilizing the landing and product pages of competitive brands, we identified UI trends across the market.

Example competitive analysis from initial innovation sync

We repeat this process continuously for other products across the Bonafide brand, often looping in external stakeholders for insights on product treatments.

Event Tracking

Utilizing the event tracking system FullStory, we created heat maps and scroll maps of our pages to identify interactions and friction points on the individual page.

Example competitive analysis from initial innovation sync

As shown above, a large amount of interaction comes from users exploring product information, user testimonials, and cross sell opportunities. This insight allows us to make key observations regarding friction points across pages, such as a large amount of interactions with review read mores—particularly ones with negative or striking statements. In this example, we recommended sorting the reviews by “most liked” versus “most recent”, creating a boost across the account.

User Insights

A user persona created from overall user insights

A large amount of users have high intent to learn information on the ingredients in the product, leading to emphasis of key ingredients in future designs.

Some other insights include:

  • A heavy distrust of hormonal treatments among the users interviewed
  • Interest in the ingredients in the product
  • Strong emphasis on social proof being desired
  • A lack of sticker shock due to the belief that it’s worth the price provided it works well
  • A lack of engagement on the scientific study portion of the page
  • Desire to explore and click around the site navigation, thus leaving the funnel


Based off of the user testing strategy outlined above and the consideration of client goals, quarterly roadmaps were created. These roadmap goals were precedented by innovation syncs across both internal & external teams, and prioritized by the ICE (Impact, Confidence, Ease) format, with each member of the account providing their insight and expertise.

Example ICE prioritization following initial innovation sync with averaged sums from scores across the team
Example roadmap from Q1 2023, created by the product manager in Notion


Utilizing user insights, cross-client testing histories, and direct response design, Revaree’s PDP has gone through many iterations that have lead to overall account growth. Initially focusing on overall redesigns of the page, we continued to iterate off of our success with smaller module integrations that could be rolled out across other products.

Original Audit

We discovered that Revaree’s original PDP had a lack of key information above the median fold of 690 pixels in height, shown via a scroll map overlaid on the original PDP below. Information such as product details and a clear CTA were not present for many who only viewed the page at a glance—a majority of users. As well, certain value props were deprioritized or not featured, such as the low placement of the scientific data section on the page and the ingredient information being placed behind a hyperlink.

Direct Response

My responding design included rectifying these issues and prioritizing informational and destigmatizing product features, as well as adding a sticky CTA to promote users to move down the purchasing funnel. As well, I highlighted key features of the product alongside branded iconography, prioritized information such as the amount of doctor recommendations, and incorporated Bonafide’s branding clearly throughout the page.

Other changes include an automatically scrolling carousel in the hero, larger text for the subscription module for the sake of the user (typically older women), and streamlined instructions for how the product works. Additionally, some information was consolidated to allow for a shorter page experience.

A side-by-side of the initial Revaree direct response test with a scroll map overlaid on the original PDP, indicating the median fold

This direct response test, done via an even split between the redesign and the original Bonafide page, showed an 82%increase in the add to cart rate over the control, but only a 4.6% conversion rate increase.

Full results table for the original PDP vs direct response test

One Question Quiz

Our first test after the initial direct response included the introduction of a “one question quiz” — a module that highlights various alternative products. The hypothesis of this test was that users may click on a Revaree ad that is applicable to them, but may be more likely to convert on a different product. This did increase conversion rate by 4.9% over the control, but we continued to see drop off from the add to cart step to conversion.

One question quiz animation

Additionally, with the one question quiz module, we have been able to identify the potential in cross-sell and bundling opportunities. Ristela, a product that treats low sex drive, has shown to have the most relevancy based off quiz interactions.

Bar graph showcasing the breakdown of total interactions with the one question quiz

Mini Cart

As our next test, we implemented a “mini”-cart — a side panel that showcases the user’s cart contents before they leave the page. We opted to use the brand’s original design for this without the cross-sell, streamlining the process for development as well for conversion. This test created large incremental gains and minimized the gap between add to cart and checkout, with an increase of 30.6% in add to cart and a 27.9% total increase in conversion compared to the control.

Showcasing the mini-cart functionality
Full results table for mini-cart test

Nutrient Module

Our most recent test includes the introduction of a module that replicated the nutrient label as a page element, prioritized due to heat maps showing that many users try to click on the final image of the carousel to expand the image of the nutrient label. As well, the module outlines information on the main ingredient — hyaluronic acid — as well as badges that highlight the fact that the product is FDA-cleared, naturally formulated, and recommended by thousands of doctors.

The nutrient module shown in desktop

This test increased conversion rate by 14.8%.

Accordion in Hero

Our most recent test involved another integration from the external Bonafide design team: an informative accordion menu below the subscription selection in the hero. With access to the external team’s Figma file, I created components for each state of the accordion.

Showcasing various states of the accordion component through Figma’s dev mode

Results showed an 11.7% increase in conversion rate, with 10% of users interacting with the module. We were also able to break down which line items were interacted with most, with “How to use” being the most clicked on.


The initial test post-audit, done via a 50:50 split with the original Bonafide page as the control, resulted in a increase of 82% for the add to cart rate. However, we noticed that the conversion rate was only a 4.6% increase over the control, leading to further testing to close the gap.

Our secondary test showed that integration of an interactive cross-sell allowed for an increase in conversion rate by 4.9% compared to the previous test.

Following that, introduction of a side panel that showcases the content’s of a user’s cart introduced a 27.9% increase in conversion rate over the control, as well as a significant closure of the gap between add to cart and checkout.

Adding a section that details nutrient content, suggested use, and information about the active ingredient increased conversion rate by 14.8% over the control.

Lastly, incorporation of an accordion menu in the hero increased conversion rate by 11.7%, with 10% of users interacting with the module.

A review of all featured tests with their add to cart (ATC) rate and conversion rate (CR) increases