
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


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.


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.


Product Description Page
Before & After


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.


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.


