top of page
mockuuups-macbook-air-mockup-on-a-wooden-desk-with-a-potted-plant.jpeg

Supplement Website - Page Redesign

Overview

Our goal was to understand how users interact with key landing pages—including the homepage, product listing pages, and product description pages and guide them further down the funnel. By analyzing traffic across these pages and aligning with the client's brand refresh, we optimized the overall landing experience.

Tools

Google Analytics, Crazy Egg Heatmap & Session Recordings, Figma

Role

CRO Analyst, UX Designer, AB Testing & Implementation Consultant

The Process

Research

Upon establishing client goals, I performed a sitewide CRO audit that included analyzing heatmapping, user session recordings, and customer surveys. To understand the supplement landscape and the client's position, I also conducted competitive analysis, evaluated industry trends, and performed a heuristic walkthrough to assess how language and imagery were used to nurture the user journey.

Design

After reviewing the client's preferred design styles and upcoming theme changes, I redesigned the Homepage, Product Description Page, About Page, Product Listing, and Blog Page. These redesigns incorporated research findings including updated header copy, revised iconography and imagery, alternate scroll functionalities, altered content hierarchy, and modified CTAs.

Feedback & Iteration

New designs were presented to the client before a meeting to discuss specific decisions. The client provided priority updates to ensure alignment with their content needs and software limitations. Their internal development team also reviewed the designs to analyze the custom theme build requirements. Revised designs were completed and handed off within two weeks.

Ongoing Consultation

As new designs were being built, I used the CRO audit to populate the client's A/B testing ideation database. I provided high-level test designs and consulted on proper campaign setup for goals and analytics tracking. Routine calls with the client and account manager were held to monitor testing progress and share additional ideas.

Homepage

Before & After
Supplement Site | Homepage - Original
Supplement Site | Homepage - Updated Version

Rotational Hero

Implement an auto-rotating hero with manual arrows to showcase key value propositions and link to relevant pages aimed at increase top fold engagement / engagement with relevant offerings.

Top Fold & Nav Improvements

Distinguish navigation elements, use emotional copy, add dual CTAs, incorporate people/product imagery, and align margins.

Frequently Searched Cards

Add a dynamic section highlighting top searched products and content high in page hierarchy aimed at improving scroll depth & engagement.

Category Image Card Update

 

Use a carousel format with lifestyle/product imagery and fully clickable, titled containers.

Product Introduction Section

 

Feature benefit-driven headers, dual CTAs, and staged product imagery.

Highlight Value Propositions

Utilize consistent iconography to draw attention and tertiary links to guide users, clearly addressing pain points around sourcing, testing, and craftsmanship.

Supplement Site | Homeage - Original
Screenshot 2026-08-18 161646.png

Best Selling Products Section

Place high on the page to highlight best sellers, including images, titles, descriptions, starting subscription prices, and Subscribe & Save discounts.

Ingredients & Testing Section

Upgrade product imagery, use consistent iconography, apply benefit-driven headers, and link to quality standards.

Practitioner & Science Section

Highlight competitor differentiators using doctor imagery and link to quality, testing, and story pages.

Inclusion of Social Proof

 

Feature a 12-review carousel with expandable text, user links, relevant PR mentions, and awards under emotional, benefit-driven headers.

Showcase Blog Articles 

 

Separate article titles from imagery, upgrade to more engaging visuals, and link to the full blog.

Clarify Social Links & Footer Nav

Combine social/app links and email newsletter sign-ups into a single incentivized banner to declutter the footer. Adjust font sizing, and increase spacing to reduce cognitive load.

Supplement Site | Homepage - Original
Supplement Site | Homepage - Updated Version

Product Description Page

Before & After
Screenshot 2026-08-18 161450.png

Prioritize Social Proof

Migrated product star rating above product title to improve visibility and immediately reinforce social proof around a product that users are frequently skeptical of. 

Tertiary Nav & CTA Changes

Make tertiary links less prominent, including applying specific warnings only when applicable. Elevate "Compare Product" to a secondary CTA.

Distinguish Purchasing Options

Clearly separate one-time purchase from subscription options using distinct containers, streamlining the add-to-cart process and highlighting subscription value.

Category Image Card Update

 

Downsize suggested product sections due to low engagement. Add product-specific value propositions and maintain scroll effects.

Product Introduction Section

 

Place trust and security elements, including doctor imagery and quotes, high in the page hierarchy.

Highlight Value Propositions

Implement sticky-on-scroll navigation links for relevant page sections and ensure mobile-friendly buttons.

Supplement Site | PDP 2 - Original Version
Supplement Site | PDP 2 - Updated Version

Alter 'Key Ingredients' for Engagement 

Update the header, verify and add imagery, and move details into an accordion to increase engagement.

Clarify Supplement Facts & Usage

Update headers to be benefit-driven, utilize client-approved iconography for clarity, and place technical facts into a scrollable container with minimal styling.

Alter 'Why it Works' & 'FAQ's

Revise headers to be emotional or benefit-driven to build user confidence, and use clearer layout points for the "Why it Works" content.

Adjust Content Hierarchy

 

Migrate suggested product sections below reviews and update their headers for emotional impact.

Screenshot 2026-08-18 161134.png
Screenshot 2026-08-18 161213.png
iphone-13-pro-multi-screen_edited.jpg

Get to Know Me

bottom of page