Mask group-5.png

<h2>User Testing</h2>
<p>User testing runs more or less continuously on Bonafide&rsquo;s Revaree PDPs &mdash; user interviews, competitor analysis, and click and scroll event tracking.</p>
<p>At the start of the relationship in Q4 2022, and again in Q3 2023 and Q1 2024, we prioritised moderated and unmoderated interviews &mdash; first on the original page, later on our winning variant &mdash; to surface how users thought about the product and about menopause generally, where the existing site frustrated them, and how competitor PDPs handled the same problems.</p>
<p>Alongside those interviews I ran whiteboarding and innovation syncs with product managers, account analysts, and other UI/UX designers, working through the landing and product pages of competing brands to identify the UI patterns the market had converged on.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=129434f8cee4e246b5086d8f64581715.png&amp;f=webp&amp;q=75" alt="Competitive analysis board comparing competitor product pages" width="1610" height="1434">
<figcaption>Competitive analysis</figcaption>
</figure>
<p>Using FullStory, we regularly create heat maps and scroll maps to find where users interact and where they stall. Most interaction clusters around product information, testimonials, and cross-sell modules. That told us a great deal &mdash; most usefully that users were opening review &ldquo;read more&rdquo; links in volume, particularly on negative or striking reviews. We recommended sorting reviews by most liked rather than most recent, which produced a lift across the account.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=87673eb885288eb9df6a1bdbf08e47c1.png&amp;f=webp&amp;q=75" alt="FullStory heat map of the Revaree product page">
<figcaption>Heatmap example</figcaption>
</figure>
<p>From that research we built a Bonafide user persona to frame our point of view. A large share of users arrive wanting to know exactly what is in the product, which pushed ingredient information forward in every subsequent design. Other insights included:</p>
<ul>
<li>A heavy distrust of hormonal treatments among the users we interviewed</li>
<li>Strong interest in the product&rsquo;s ingredients</li>
<li>A clear desire for social proof</li>
</ul>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=62818ffe78a7d642b1d4817dbd5ef3d3.png&amp;f=webp&amp;q=75" alt="Bonafide user persona document" width="2048" height="1326">
<figcaption>Bonafide user persona</figcaption>
</figure>
<p>We then prioritised ideas from the research and competitive analysis into a roadmap, rebuilding it each quarter and reprioritising or backlogging as things shifted.</p>
<h2>Auditing &amp; Iteration</h2>
<p>My responding design addressed the friction we had found and put informational, destigmatising product features first, adding a sticky CTA to carry users down the funnel. I highlighted the product&rsquo;s key features with branded iconography, surfaced the number of doctor recommendations, and worked Bonafide&rsquo;s branding through the page properly.</p>
<p>Other changes included an auto-scrolling hero carousel, larger type in the subscription module for an audience that skews older, and clearer instructions on how the product works. Consolidating some sections made for a shorter page overall. Run as an even split against the original, this redesign showed an <strong>82%</strong> increase in add to cart rate over the control.</p>
<h3>One Question Quiz</h3>
<p>Our first test after the initial redesign introduced a &ldquo;one question quiz&rdquo; &mdash; a module surfacing alternative products. We hypothesised that a user might click a Revaree ad that spoke to them and still be more likely to convert on something else in the line. It increased conversion rate by <strong>4.9%</strong> over the control.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=babb9ee945c28dbc96040578b7a16ba4.gif&amp;f=webp&amp;q=75" alt="Animated prototype of the one question quiz module" width="230" height="612">
<figcaption>One question quiz animation</figcaption>
</figure>
<p>The quiz also gave us a read on cross-sell and bundling opportunities. Ristela, which treats low sex drive, turned out to have the strongest relevance based on how users answered.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=3b699f945b7c9d348807fd9d070c591a.png&amp;f=webp&amp;q=75" alt="Chart breaking down one question quiz interactions by product">
<figcaption>Interactions breakdown</figcaption>
</figure>
<h3>Nutrient Module</h3>
<p>A more recent test rebuilt the nutrient label as a page element, prioritised because heat maps showed users repeatedly trying to click the last carousel image to enlarge the label. The module covers the active ingredient &mdash; hyaluronic acid &mdash; alongside badges for the product being FDA-cleared, naturally formulated, and recommended by thousands of doctors. It increased conversion rate by <strong>14.8%</strong>.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=53e36b560c2664ea43582c93263c65a1.png&amp;f=webp&amp;q=75" alt="The nutrient module as it appears on desktop">
<figcaption>The nutrient module shown in desktop</figcaption>
</figure>
<figure></figure>

<p>Bonafide, a women&rsquo;s health brand focused on menopause and the treatment of menopausal symptoms, hired Ampush (later acquired by Tinuiti) as their growth marketing agency in Q3 of 2022. Of their six products, only one &mdash; Revaree &mdash; takes the majority of the spending budget on social platforms. When the relationship started, Revaree had a <strong>5.2%</strong> add to cart rate against a <strong>1.9%</strong> conversion rate: intent to purchase clearly existed, but users were falling off somewhere between adding to cart and checking out.</p>
<p>Using conversion rate as our measure of success, the team and I prioritised product detail pages and flows that reduced friction at each step. From 2022 onward I created a series of PDP designs that iterated off A:B tests, the original page acting as control for the first test and each winner becoming the control for the next. Those tests compounded into a <strong>36% increase</strong> in conversion rate over the course of the relationship, and each winning pattern was rolled out to other products in the Bonafide line, lifting the account as a whole.</p>

Revaree versus.png

minicart.gif

Bonafide Revaree CRO

cardimage.png

<h2>User Interviews</h2>
<p>Alongside my introduction to the brand, we ran moderated interviews with parents of young children, asking what frustrated them most about feeding their kids. We also had them work through the current champion page and a competitor&rsquo;s landing page. That gave us a clear read on what parents actually look for in children&rsquo;s food, and we built a user persona from it.</p>
<figure><img src="https://img.plasmic.app/img-optimizer/v1/img?src=1c74e289d124dc5958ab42497fd286f6.jpg&amp;f=webp&amp;q=75" alt="Little Spoon user persona document" width="1345" height="871">
<figcaption>Little Spoon user persona</figcaption>
</figure>
<h2>Auditing &amp; Inspiration</h2>
<p>I started by examining the product-specific page running on social and the media split across the product lines, then the brand&rsquo;s homepage, product galleries, and overall user flows. The brand also gave us a product booklet with a spread laying out the &ldquo;roadmap&rdquo; of a child&rsquo;s progression through their age-specific options.</p>
<p>During the audit I noticed the main site broke products up by age range, particularly the baby blends, which have beginning and intermediary stages. That detail drove a later design decision: adding a step between the blends and plates tabs for later-stage blended food alongside smaller-bite plated meals.</p>
<h2>Mock Development</h2>
<p>With the concept settled I moved to loose wireframes. The first iteration used a full-screen quiz that diverted users to a product-specific page, but feedback raised the risk of drop-off, so the second put the interactive element on the page itself &mdash; which became the final direction. From there I iterated on layout, hero imagery, and the interaction elements until we had a first version worth testing.</p>
<p>Handoff went cleanly. Our engineers wired up dynamic loading keyed to the ad campaign&rsquo;s UTM, so users land on a version of the page that matches the ad they clicked.</p>

<p>Little Spoon, a children&rsquo;s food brand, ran separate Meta campaigns to each of their product lines, with traffic landing overwhelmingly on mobile. The split limited cross-selling and did not account for parents with more than one child across different ages. Roughly <strong>20%</strong> of conversions were already coming through a product line other than the one the ad campaign pointed at, which suggested users would click an ad for one product and buy another depending on their child&rsquo;s age.</p>
<p>Working from that, I designed and iterated on a landing page that lets users select the option relevant to them, toggling the whole page to direct response content for that product line. After wireframes and mocks, we launched it on Meta against the existing champion &mdash; a landing page built around a single product line. It won, and remained the champion for close to a year.</p>

hello, my name is

steff bradley

archives

archives