Why this exists. While researching for a collagen client, I went through the full mobile experience of top supplement brands, their quiz flows, navigation patterns, bundle mechanics, and purchase funnels. This is what I found. Use it to benchmark your own store or steal what works.
Brand 01
Ancient Nutrition
Dr. Axe's supplement brand. Known for multi-collagen products and a deep quiz funnel that segments by health goal before recommending a product.
Quiz, Full Flow
What stands out: Ancient Nutrition leads entirely on health goals, not product. The quiz segments across 9 categories (beauty, energy, fitness, gut, immune, joint, prenatal, stress, weight) before making a single product recommendation. This removes purchase intent friction at the top of funnel and warms buyers before they see a price.
Front Page, Pick Your Problem
Goal-first entry removes product-selection friction immediately
General Question 1
Demographic segmentation before any goal-specific branching
General Question 2
Lifestyle framing, positions supplements as part of an existing routine
General Question 3
Builds product-fit confidence before showing price
General Question 4
Health history context, signals clinical seriousness
General Question 5
Commitment anchoring, longer quiz creates higher perceived value in the recommendation
General Question 6
Final general question before goal-specific branching
Beauty Branch Question
Goal-specific branching: beauty segment gets skin/hair-focused follow-ups
Energy & Concentration Branch
Separate branch per goal, each gets a tailored recommendation path
Everyday Health Goals Branch
Broad goal segment, catches undecided buyers who don't have a specific problem
Fitness Branch
Athletic identity framing reframes the product as performance, not supplement
Gut & Digestion Branch
Symptom-specific language creates stronger emotional resonance than category names
Immune System Branch
Health anxiety trigger, immune messaging drives urgency without discounting
Joint Health Branch
Pain-point specificity, joint buyers are high intent; this validates their need before recommending
Prenatal Branch
High-trust segment with specific safety concerns, a separate path signals clinical care
Stress & Goal Branch
Mental wellness framing expands the perceived category beyond physical health
Weight Management Branch
High-volume search intent category, a dedicated branch captures this segment cleanly
Generating Results Screen
Loading animation creates perceived personalization, raises value of the recommendation before it appears
Results Page
Direct product recommendation with ATC, converts quiz engagement into a warm purchase moment
Brand 02
Garden of Life
Clean-label supplement brand with a 15-question quiz. Notable for including a medical history screening gate early in the flow, unusual in this category.
Quiz, Full Flow
What stands out: Garden of Life runs the longest quiz of any brand in this study, 15 questions plus conditional branching for medical history. The medical screening question is a trust signal and legal protection. High quiz depth = high commitment = warmer buyer at the results page.
Front Page
Clean quiz entry with goal-first framing, no product shown yet
Question 1
Opening with demographics establishes a personalized experience before any health questions
Medical History Screening
Medical condition gate, rare in this category; signals clinical credibility and provides legal protection
Question 2
Second question deepens health profile, each answer narrows the recommendation
Question 3
Lifestyle context builds personalization depth
Question 4
Mid-quiz, respondent is committed; drop-off risk decreases after question 4
Question 5
Goal specificity increases, answers here directly drive product selection
Question 6
Commitment point, at question 6, most respondents will complete the quiz
Question 7
Habit and routine questions build product integration intent before purchase
Question 8
Deep segmentation, 15 questions signals the brand takes health seriously
Question 9
Continued profiling, each question adds to the "personalized for you" effect
Question 10
Late-quiz reinforcement, respondent is invested in getting the recommendation right
Question 11
Supplementation history, positions the brand's product as the upgrade
Question 12
Budget or format preference signals, allows recommendation to match buyer's existing behavior
Question 13
Nearly at completion, drop-off here is near zero
Question 14
Final refinement questions, narrows to exact product SKU
Question 15
Final question, completion rate at this point should be near 100%
Results Page
15-question commitment = warm buyer, results page conversion rate should outperform shorter quizzes significantly
Brand 03
Health Nag
The most complete brand in this study. Health Nag has a full funnel (homepage → collection → PDP → cart), a bundle builder, detailed navigation components, and a quiz with an email gate before results.
Navigation & Components
What stands out: Health Nag has a two-tier navigation, mega menu on desktop with goal-based categories, and a mobile drawer that mirrors the same hierarchy. Their search implementation shows product cards on first keystroke, not after a full search query.
Mega Menu, State 1
Goal-based top navigation (not product-category based), reduces decision paralysis
Mega Menu, State 2
Secondary navigation state, sub-categories appear on hover without full page reload
Mobile Nav Drawer
Mobile drawer mirrors mega menu hierarchy, consistent mental model across devices
Search, Initial State
Search opens with trending/popular suggestions before the user types, drives discovery
Search, Results State
Product cards appear inline in search, buyer can add to cart without leaving the search overlay
Search, Scrolled
Results expand as user scrolls, no pagination, no page load, keeps momentum
Full Purchase Funnel, Mobile & Desktop
What stands out: Health Nag is the only brand with a fully documented funnel in this study. Each page, homepage, collection, product, cart, has been optimized separately for both mobile and desktop. The mobile product page is notably concise; the desktop version uses more whitespace and a sticky info column.
Homepage, Desktop
Hero leads with health goal, not product, consistent with quiz-first philosophy
Homepage, Mobile
Mobile hero prioritizes CTA above fold, no scrolling needed to reach the primary action
Collection Page, Desktop
4-column grid with filter sidebar, density without overwhelm; filter reduces choice anxiety
Collection Page, Mobile
2-column mobile grid, filter accessible via sticky bottom bar, not buried in a header
Product Page, Desktop
Sticky buy column on desktop, ATC always visible as user reads product details
Product Page, Mobile
Mobile PDP shows price and ATC above the fold, critical trust signals load first
Cart, Desktop
Cart shows upsells below line items, captures additional revenue without interrupting the checkout flow
Cart, Mobile
Mobile cart keeps checkout CTA pinned, one tap to purchase regardless of scroll position
Bundle Builder
What stands out: Health Nag has an in-store bundle builder, a guided tool that lets buyers assemble their own supplement stack. This directly addresses the "what do I actually need" objection that kills conversion on supplement stores. The bundle mechanic also raises AOV significantly.
Bundle Builder, Desktop
Guided bundle flow removes purchase anxiety, buyer builds confidence by choosing each component
Bundle Builder, Mobile
Bundle tool works on mobile, step-by-step flow designed for tap, not scroll
Quiz, Full Flow
What stands out: Health Nag gates the quiz results behind an email opt-in. This is the most aggressive lead capture mechanism in this study, you only see your recommendation if you give your email. The opt-in screen comes after 8 questions when the buyer is fully invested. High intent capture.
Quiz, Triggered as Pop-Up
Quiz launches as an overlay on click, non-interruptive; buyer opts in to start it
Question 1
Goal-first open, same proven entry point as Ancient Nutrition
Question 2
Lifestyle context added early, positions product as part of buyer's existing identity
Question 3
Symptom specificity increases product relevance and recommendation trust
Question 4
Mid-quiz, investment level is high; drop-off risk is now low
Question 5
Routine and frequency questions help the algorithm match product format to lifestyle
Question 6
Near the end, buyer knows they're close; abandonment rate drops sharply
Question 7
Final segmentation question before the email gate
Question 8
Last question, buyer is at peak commitment; next screen is the email gate
Results, Email Opt-In Gate
Email captured at peak intent, after 8 questions, buyer will almost always convert to email to see results
Results Page
Warm buyer with captured email, the most valuable moment in the funnel
Brand 04
Vital Proteins
Industry leader in collagen peptides. Captured here: navigation components (mega menus, drawer, search) and the cart experience, their UX patterns set the standard for the category.
Navigation & Components
What stands out: Vital Proteins runs a 3-state mega menu with visual product photography inside the nav, clicking a category shows product images before you reach the collection page. Their search is split desktop/mobile with different UX for each. Cart shows social proof inline.
Mega Menu, State 1
Product photography inside the nav, buyer sees the product before clicking through
Mega Menu, State 2
Second nav state shows sub-category, no page load, no friction, just progressive disclosure
Mega Menu, State 3
Third nav level with editorial photography, maintains brand feel inside a functional component
Mobile Nav Drawer
Simplified mobile drawer, fewer levels than desktop but same goal-based hierarchy
Search, Desktop
Desktop search shows product images in dropdown, purchase-ready at first keystroke
Search, Mobile
Mobile search takes full screen, removes distraction and focuses the buyer
Cart
Cart shows star ratings inline on each line item, social proof at the moment of highest doubt