01 — Site Audit 02 — Strategy 03 — References 04 — Design System 05 — Homepage Map 06 — UX Decisions 07 — Rollout
The Works June 2026 · v3.0
Nutrition
by Shruti
Redesign Pitch

A strategy to transform a traditional nutrition website into a premium, data-centric functional health platform — built around the OligoScan, rooted in clinical authority, designed to convert.

Client
Nutrition by Shruti · nutritionbyshruti.com
200+
Clients Transformed
Personalised programs
60%
Medication Elimination
Active client base
80%
Better Digestion
Within first 2 weeks
1.7pt
Avg HbA1c Drop
Diabetes reversal program
These results exist on the site today — buried in 14px type on a white background. That is the problem we are here to solve.
01 — Current State

What Is Broken
and Why It Matters

Full audit of nutritionbyshruti.com — every section, every interaction point, every conversion failure.

"We help you fix what your doctor couldn't using Functional Medicine." — This line lives on the current site. It is buried in a heading with no context, no design, and no CTA. It is the strongest line on the page. It is invisible.
Element Severity Problem Fix Direction
Email Popup on LoadCriticalFires the moment you arrive — before a word is read. Causes bounce rate spikes of 15–25% on mobile.Move to exit-intent only
Hero SectionCriticalStock photo of a meditating woman. CTA says "Learn More." Could belong to any gym, supplement brand, or yoga studio.Shruti portrait + action CTA
Logo / Brand MarkHighStacked plain serif. No mark, no identity, no distinctiveness. Reads as a Wix default.Custom wordmark with brand character
Green CTA ButtonHighBright green "BOOK NOW" clashes completely with the warm beige/rose palette. Added as an afterthought.Terracotta CTA, consistent
Stats SectionHigh60% medication elimination and 1.7pt HbA1c drop are buried in small type. The most powerful proof on the site is invisible.Hero-scale numbers on dark bg
OligoScan FeatureCriticalOnly appears in an announcement bar. The most differentiating technology Shruti has is not explained, visualised, or used as a conversion tool anywhere.Dedicated dark diagnostic section
Services CarouselHighShows only one service at a time. Research shows 80%+ of users never interact with carousel controls. Most visitors see one slide only.Static card grid
About / BioMediumWritten like a LinkedIn profile. "She has extensive experience…" lists credentials without building human connection.Narrative bio + trust stack
TestimonialsMediumPhotos are blurred, weak card design. Anil Agarwal's "HbA1c from 7 to 5.9 in 3 months" is clinical gold displayed as a footnote.Case study format
WhatsApp WidgetLowAuto-opens on load. Correct channel, wrong trigger. Creates noise before the visitor has expressed any intent.Trigger after 30s dwell
Page StructureHighMultiple separate pages create a fragmented experience. Visitors exploring services leave the homepage and lose the conversion narrative.Single-scroll homepage
Typography SystemMediumNo clear type scale. Heading sizes vary arbitrarily. Serif and sans-serif mixing is inconsistent throughout.6-step type scale, applied consistently
02 — Strategic Positioning

Disease-Centric
vs. Data-Centric

Traditional health sites list conditions and tell you to call. The platforms billion-dollar wellness brands are building — Levels, Function Health, Forward — are data-centric: they show you what your body is doing. Shruti has the OligoScan. That changes everything.

Today — Disease-Centric

"Nutrition Consultation Services"

  • Lists health conditions (Diabetes, Gut Issues)
  • Asks you to book a call with a nutritionist
  • Services explained as features, not outcomes
  • Authority comes from credentials only
  • OligoScan buried in an announcement bar
  • Multiple pages, fragmented journey
Tomorrow — Data-Centric

"Precision Functional Health Platform"

  • Shows what your body's data reveals
  • Invites you into a diagnostic journey
  • Services lead with outcomes & transformation
  • Authority comes from results + technology
  • OligoScan is the hero of the experience
  • Single-scroll narrative, zero friction
"Shruti uses technology that reads 20+ mineral and heavy metal markers from a palm scan in 2 minutes. The same data-driven philosophy that built WHOOP and Levels into category leaders. This is not a wellness blog. This is a diagnostic practice."
03 — Reference Sites

Why We Chose These.
What We Take From Each.

Every reference maps to a specific design decision — not general mood board inspiration. Click Preview Site ↗ on any card to see it live.

Reference 01 · Premium Visual Entry
Organimo
Sea Moss & Bladderwrack — "You Are Limitless" · Wellness Supplement Brand
"FROM BODY  ·  TO MIND  ·  Limitless begins here."
Why It Works

Opens with a cinematic dark preloader — a geometric gold triangle on near-black — before any content loads. The site communicates premium before a single claim is made. Scroll-driven narrative then unfolds the product story: problem → solution → science → invitation.

The headline "The real limitless pill" is provocative and memorable. It positions the product before the rational brain catches up.

What We Take for Shruti
Entry
A confident visual entry — a full Shruti portrait, or a dramatic opening line — sets the frame. The current greyed-out stock photo sets the wrong frame.
Brand Line
Shruti needs one line that owns her positioning. Proposal: "We find what your doctor missed." One line. No hedging.
Palette
Near-black + gold accent = two-tone discipline. Every element serves the system. Shruti's palette should be equally controlled — no accidental green buttons.
Reference 02 · Clinical Authority
Function Health
100 Lab Tests. Real-Time Health Data. "100 Healthy Years." · Diagnostic Platform
Dark · Clinical data cards · Lab result UI · Extreme whitespace · "Know your numbers"
Why It Works

Function Health doesn't talk about health — it shows you health data. The homepage features clean modular cards of actual lab results — glucose, cortisol, testosterone — displayed against a dark, clinical interface. Whitespace is extreme and intentional.

What We Take for Shruti
Cards
Replace every carousel with a static three-pillar card grid: Diagnostics · Gut Reset · Longevity. Each card: one outcome statement, one CTA.
Copy
"Fix your gut" → "Unlock your metabolic baseline." Language that speaks to an educated executive who wants precision.
Whitespace
Sparse, aligned layouts feel expensive. Cluttered sites feel cheap. Every section breathes — padding is a trust signal.
Reference 03 · Data as Visual Language
Levels Health
"See How Food Affects Your Health." · CGM + Metabolic Data Platform
Dark mode · Glucose curve charts · Green metabolic data · No stock photos · Science as design
Why It Works

Instead of photos of people eating salads, the hero is a glucose response chart — a real data readout showing how a meal affects blood sugar in real time. The dark-mode UI with green data accents mimics scientific instrumentation. Data becomes the product hero.

What We Take for Shruti
OligoScan UI
The OligoScan section should display a high-fidelity mockup of an actual scan report — minerals, heavy metals — rendered on near-black. The data is the hero image.
Dark Section
One full dark section in an otherwise warm-toned site creates contrast and signals "this is where the science lives."
Perception
"I am speaking to a nutritionist" → "I am accessing a cutting-edge health lab." That shift happens through how data is presented.
Reference 04 · Health Optimisation Brand
WHOOP
"Unlock You." · Wearable Performance & Recovery Platform
All-black · Recovery score readouts · Bold white type · Athletic editorial photography · "Know Yourself Better"
Why It Works

WHOOP makes health data feel like a competitive advantage, not a medical concern. Tone is aspirational and performance-driven. Photography is editorial — athletes mid-motion, data overlaid. Nothing soft. Nothing generic.

What We Take for Shruti
Tone
Shift from "care for yourself" to "optimise yourself." Shruti's client wants to feel in control, not managed.
Photography
No stock. No yoga poses. Real photography of real people — cooking, working, running — with data overlays or OligoScan visuals in frame.
Positioning
"Health as performance" attracts high-value clients who invest in results. Frame the consultation as accessing a personal health system.
Reference 05 · Concierge Medicine UX
Forward Health
"The Future of Healthcare." · AI-Powered Primary Care
All-white · Extreme whitespace · Clinical type · "Apply" not "Sign Up" · Exclusivity by design
Why It Works

Forward positions its healthcare so premium that you don't "sign up" — you apply. This single UX decision creates exclusivity, pre-qualifies leads, and eliminates time-wasters before the first call. The site is brutally minimal — one thing per screen.

What We Take for Shruti
Application
Replace "Book a free call" with a short intake framed as "Tell us about your health." 5 questions → personalised response → booking.
Scarcity
"Shruti accepts [X] new clients per month." If capacity is limited, say so. Scarcity is honest and it converts.
Minimalism
Clinical modernism = fewer elements, better placed. Every element on the page should earn its position.
Reference 06 · Scrollytelling Architecture
Apple
apple.com/iphone · Product Presentation & Experience Design
White · One idea per screen · Scroll-triggered reveals · Giant type · No navigation away
Why It Works

One long homepage, one scroll. As you move down, the story unfolds through large typography, cinematic imagery, and scroll-triggered animations. By the time you reach the bottom, you understand the product completely — rationally and emotionally — without clicking a single link.

What We Take for Shruti
Structure
Consolidate multi-page site into one scroll narrative: Problem → Cause → Diagnosis → Protocol → Transformation → Invitation.
Animations
Scroll-triggered reveals create the "dopamine of discovery." Visitors stay engaged because something always happens as they scroll.
Typography
Large type at key moments. One idea per viewport. Hero headline: 80–100px minimum — big enough to land like a statement.
Reference 07 · Expert Personal Brand
Dr. Mark Hyman
"Young Forever." · Functional Medicine Thought Leader
Dark green · Founder portrait as hero · Bold serif · Podcast + Books + Programs · Authority ecosystem
Why It Works

Hyman's site hero is a large, confident portrait of him — not a concept, not a stock image, just the expert looking at you. His entire site is an authority ecosystem: podcast, books, community, programs — all woven seamlessly.

What We Take for Shruti
Portrait
Shruti's face is the brand. Commission a professional shoot. Use a full-viewport portrait in the hero.
Content
The Journal (blog) feeds services. Every article links naturally to the relevant program — gut health article → Gut Reset program.
Reference 08 · Conversion Optimisation
Noom
"Health for real humans." · Psychology-Based Weight Management
Warm white · Bold serif · Problem-first copy · Quiz as primary CTA · Highest converting health homepage
Why It Works

Noom's primary CTA is not "Book Now" — it is a quiz. "Take our 5-minute quiz to find your personalised plan." The quiz creates active participation (sunk-cost psychology: once you've answered 5 questions, you want to see the results) and routes visitors automatically.

What We Take for Shruti
Quiz CTA
Replace "Book Free Call" with "Find out what's keeping you unwell" — a 5-question symptom audit ending with a personalised recommendation and booking prompt.
Problem-First
Lead with why diets, supplements, and conventional medicine haven't worked — before presenting Shruti as the answer.
Reference 09 · Science Meets Warmth
ZOE
"World's largest nutrition science study." · Personalised Nutrition · Tim Spector
Deep blue · Clean sans-serif · Video testimonials · Scientific credibility in approachable language
Why It Works

ZOE balances rigorous science with human warmth. Their testimonials use real names, professions, ages, and specific outcomes — not vague quotes. Video testimonials are embedded and auto-play muted. The science is cited clearly but explained simply.

What We Take for Shruti
Case Studies
Name · Age · Condition → Approach → Outcome. Anil Agarwal's HbA1c reversal is a headline, not a quote card.
Video
Even one muted auto-play client video is worth ten written quotes. Commission 1–2 short video testimonials.
Reference 10 · Editorial Wellness Brand
Ritual
"You deserve to know what's in your body." · Science-Backed Supplements
Off-white · Yellow accent · Ingredient transparency · Editorial photography · "Made Traceable"
Why It Works

Ritual's entire brand is built on one principle: radical transparency. They show you exactly what is in every capsule, where each ingredient comes from, and why. In a market full of vague wellness claims, "we'll show you everything" is the most powerful positioning available.

What We Take for Shruti
Transparency
Show the OligoScan process in detail — what it measures, what the report looks like, what Shruti does with the data. Specific process = trust.
Methodology
Ritual shows ingredient sources. Shruti should show her methodology — "here is exactly how we design your protocol" — as a visual step-by-step.
04 — Design System

Colour · Type · Tone

A complete visual language that threads clinical authority with human warmth. Every element belongs to the same world.

Colour Palette
Warm Cream
#F5EFE0
Page backgrounds, primary canvas
Deep Espresso
#2C1F14
Headlines, dark sections, primary weight
Terracotta
#C4622D
All CTAs, accent lines, stat numerals
Near-Black
#0D0D0D
OligoScan section, data UI background
Amber Gold
#C9A84C
Data labels in dark sections only
Warm Sage
#6B7C5C
Secondary CTAs, nature references
Pure White
#FFFFFF
Cards, contrast on cream sections
Bone
#F0EBE3
Secondary backgrounds, table rows

Typography
Display / H1 — Cormorant Garamond 600
We find what
your doctor
missed.
Pull Quote — Cormorant Italic
"Food is the most powerful medicine we have. I'm here to prove it."
Body — DM Sans 400
Shruti is a Functional Medicine Practitioner with a Public Health and Psychology degree from the University of California, Berkeley.
Supporting body, labels, UI text.
Data Label — DM Mono (Dark Section)
CALCIUM · 87.3 mg/L  ● OPTIMAL
MAGNESIUM · 42.1 mg/L  ● LOW
ZINC · 19.8 mg/L  ● DEFICIENT
MERCURY · 0.04 µg/L  ● WITHIN RANGE

Tone of Voice — Before vs. After
Instead of thisWrite thisWhy
"Fix your gut health""Unlock your metabolic baseline"Attracts high-value biohacking/executive clients
"Personalised nutrition plans""A protocol built around your scan results"Specific, proprietary, technology-anchored
"Learn More""See My Results →"Action-specific CTAs signal confidence
"Wellness Journey""Diagnostic Protocol"Medicine language > wellness language for credibility
"She has extensive experience...""Shruti spent 5 years inside the US healthcare system before coming home to do it differently."Story vs. résumé. Stories convert.
05 — Homepage Architecture

The Single-Scroll
Narrative Homepage

One page. One story. Zero fragmentation. The visitor is guided from their problem to Shruti's solution without a single navigation click.

01
Hero
Full viewport. Left: Shruti portrait (professional shoot). Right: "We find what your doctor missed." Sub: credentials + OligoScan mention. CTA: Book Discovery Call + secondary "See Our Results →"
NewCRO
02
Impact Stats
4 stats in massive Cormorant numerals. 200+ · 60% · 80% · 1.7pt. Context line beneath each. Terracotta numerals on dark. Cannot be missed.
DarkFix
03
The Problem
Dark full-width section. Large type only: "You've been told your tests are normal. But you know something is wrong." Mirror moment — the visitor feels seen before they see the solution.
DarkNew
04
The Approach
Three static cards on white: Diagnostics · Gut Reset · Longevity. Each: one outcome headline, one sub-line, "Learn How →". No carousel. All visible. Replaces current slider.
Fix
05
⊛ OligoScan Section — KEY DIFFERENTIATOR
Near-black background. Amber accents. High-fidelity UI mockup of an actual scan report — minerals, heavy metals, oxidative stress — displayed like scientific instrumentation. Headline: "In 2 minutes, we know more about your body than most blood panels reveal."
DarkNewKey
06
The Process
Horizontal 4-step timeline in client perspective: 1. "We listen to everything your doctors skipped" → 2. "We map the root cause" → 3. "We build your protocol" → 4. "You measure the difference."
Fix
07
About Shruti
Large portrait. 3-sentence narrative bio. Trust stack: UC Berkeley · Poly Medicure · Functional Medicine Certified. Pull quote in Cormorant Italic.
Fix
08
Transformations
Mini case studies: Name · Age · Condition → Approach → Outcome. Anil Agarwal: "HbA1c from 7 to 5.9 in 3 months" as a headline, not a quote card. Embed one muted video testimonial.
CROFix
09
The Journal
Rebrand "Wellness Wisdom" → The Journal. One featured article (editorial layout), two secondary. Each article links to its relevant service. Blog = top of the sales funnel.
Fix
10
Closing CTA
Full-width dark. Headline: "Your body knows something is wrong. Let's find out what it is." One button: Book Your Free Discovery Call. Scarcity signal: "Accepting [X] new clients this month."
DarkCRO
06 — UX Decisions

Every Decision
Has a Reason.

The reasoning behind every UX and design decision we are proposing. Each one maps to a specific psychological or behavioural outcome.

UX Action — What We Do Psychological Reaction — Why It Works Reference
Dark-mode section exclusively for OligoScanDark mode with data accents mimics scientific instrumentation. A 2-minute palm scan suddenly feels like a ₹50,000 MRI. Perception of value shifts instantly.
Levels · WHOOP
Replace symptom-based copy with data/outcome language"Unlock your metabolic baseline" speaks to a different (and higher-value) client than "fix your gut." Language is positioning.
Function Health
Single-scroll homepage replaces multi-page navRemoves cognitive load to near zero. Visitors are guided through one persuasive sequence, not asked to navigate an unfamiliar site architecture.
Apple
Scroll-triggered reveal animations on key sectionsCreates the "dopamine of discovery." Elements fading in as you scroll keep visitors engaged because something is always happening. Dwell time increases.
Apple · Organimo
Replace "Book Now" with intake questionnaireSunk-cost psychology: once someone has answered 5 health questions, they want to see the results. Far lower friction than a cold booking CTA. Pre-qualifies leads automatically.
Noom · Forward
Frame the booking process as an "application"High-end services don't have contact forms — they have applications. Establishes exclusivity, signals that Shruti's time is valuable, removes time-wasters before the first call.
Forward Health
Move email popup to exit-intent trigger onlyOn-load popups cause 15–25% immediate bounce on mobile. Exit-intent triggers catch visitors already leaving — the only moment the interruption is tolerable.
CRO Standard
Stats at 80–100px type on dark backgroundNumbers at this scale are not read — they are felt. "60%" in 100px terracotta stops the scroll. The same number in 24px on white is ignored.
Function Health
OligoScan report UI mockup as primary visualShowing the actual data output makes the technology tangible. "Here is what we see about your body" is infinitely more powerful than "We use advanced diagnostics."
Levels · Ritual
Founder portrait (Shruti) as hero imageFor personal practice brands, the founder is the product. A confident professional portrait builds immediate personal trust — the single most important conversion factor for healthcare services.
Dr. Mark Hyman
Sticky mobile bottom bar with booking CTAOn mobile, the primary CTA disappears the moment the hero scrolls away. A persistent slim bottom bar keeps conversion visible throughout the entire scroll.
UI Best Practice
Scarcity signal on all CTAs"Accepting [X] new clients this month" is honest (capacity IS limited) and psychologically effective. Transforms the decision from "whenever I'm ready" to "now." Creates urgency without fabrication.
Forward · Noom
Testimonials as case studies with outcome headlinesSpecific results are infinitely more persuasive than general praise. "HbA1c dropped from 7 to 5.9 in 3 months" as a headline converts better than "Shruti's plan was fantastic!"
ZOE · Precision Nutrition
06B — Removals

What We Are
Cutting and Why

Subtraction is a design decision. Every item below is either harming conversions, undermining brand perception, or creating visual noise.

Email popup on page loadFires before a single line is read. Causes 15–25% immediate bounce on mobile. Move to exit-intent.
Green "BOOK NOW" buttonVisually incoherent with the warm palette. Screams template. Replaced with terracotta.
All stock photographyGeneric, un-ownable, and interchangeable with thousands of competitor sites. Replaced with original photography.
Every slider and carousel80%+ of users never interact with carousel controls. Most see only the first slide. Static card grids outperform sliders on every metric.
"Learn More" as a CTANo stakes, no urgency, no direction. Every CTA must tell the visitor exactly what happens when they click.
"Wellness Wisdom" section nameGeneric and forgettable. Replaced with "The Journal" — editorial, ownable, authority-building.
WhatsApp auto-open on loadCreates noise before the visitor has expressed any intent. Trigger only after 30 seconds of dwell time.
Multi-page fragmented navigationEvery time a visitor navigates away from the homepage, they exit the conversion funnel. Single-scroll eliminates this.
"Chief Medical Officer" titleConfusing for a solo practitioner. Replace with "Founder & Functional Medicine Practitioner."
LinkedIn-style bio"Extensive experience working with..." is a résumé bullet. Replaced with a 3-sentence narrative that leads with story and conviction.
07A — Platform

Where This Gets Built

PlatformDesign ControlPerformanceCMS / BlogAnimationVerdict
Wix (current)Template-boundSlow, poor Core Web VitalsBasicLimitedNot suitable
Webflow ✓Full pixel controlFast, clean HTML outputBuilt-in CMSGood scrollRecommended
Framer ✓Full pixel controlExcellentCMS availableBest-in-classRecommended (animation-first)
07B — Rollout

Three Phases.
Immediate to Long-Term.

Phase 01
Quick Wins — No Rebuild Required
Week 1–2 · Immediate impact, zero development
  • Move email popup to exit-intent trigger
  • Replace green CTA button with terracotta (#C4622D)
  • Replace "Learn More" hero CTA with "Book Your Free Discovery Call"
  • Delay WhatsApp widget to 30-second dwell trigger
  • Add sticky mobile bottom bar with booking link
  • Add scarcity signal line to main CTA
Phase 02
Core Redesign — New Site
Weeks 3–8 · Brand photography + Webflow/Framer build
  • Commission brand photoshoot: Shruti portrait, lifestyle, real clients
  • Implement new design system (colour, typography, spacing)
  • Build single-scroll narrative homepage on Webflow or Framer
  • Design OligoScan dark section with data UI mockup
  • Rewrite all copy using data-centric tone framework
  • Restructure testimonials as case studies
  • Elevate blog to "The Journal" with editorial layout
  • Build service pages with outcome-led copy and booking flow
Phase 03
Growth Layer — Features + Content
Weeks 9–16 · Interactive tools + SEO + Community
  • Build interactive 5-question symptom audit / health quiz
  • Commission 1–2 short video testimonials (muted autoplay)
  • Implement full SEO content strategy for The Journal
  • Add email nurture sequence tied to quiz results
  • Build "As Seen In" press strip (parallel PR campaign)
  • Add "OligoScan Booking" as a standalone entry product
08 — Creative Mix

The Recipe

A specific blend — each ingredient chosen for what it contributes to Shruti's brand, not because it looks good in isolation.

Apple 30%
Function 25%
Organimo 20%
WHOOP 15%
Hyman 10%
ReferenceWeightContributionURL
Apple30%Scroll narrative, single-page architecture, scroll-triggered animations, minimal navigationapple.com ↗
Function Health25%Clinical modernism, modular cards, whitespace as luxury, data-centric copyfunctionhealth.com ↗
Organimo20%Premium entry, cinematic brand moment, two-tone colour discipline, brand statement confidenceorganimo.com ↗
WHOOP / Levels15%Dark-mode data UI, OligoScan visual treatment, "health as performance" positioningwhoop.com ↗ · levels.com ↗
Dr. Mark Hyman10%Founder portrait as hero, content-as-authority ecosystem, blog-to-services cross-linkingdrhyman.com ↗
SupportingNoom (quiz CTA) · Forward (intake flow) · ZOE (case studies) · Ritual (transparency)noom.com ↗ · goforward.com ↗ · joinzoe.com ↗ · ritual.com ↗
The Bottom Line
Shruti already has everything
she needs to own this space.
The website just needs to show it.

The credentials exist. The results exist. The technology exists. The only thing missing is a digital presence that communicates all of it — with the same clarity and conviction that Shruti has in every consultation.

"When someone lands on this site, they should feel within 10 seconds:
'This is the person I've been looking for.'"