// CaseStudy.jsx — Conversion Works case study: Subscription & Purchase Growth via A/B Testing // Faithful rebrand of the Taurist case study into the Conversion Works system. // Features: tabbed hero metrics, scroll-spy table of contents (sticky desktop rail // + mobile dropdown), image-slots for user-supplied imagery, mobile sticky CTA // dropdown, and an "other case studies" carousel. const LANDING = "/conversion"; // ---- data --------------------------------------------------------------- const SECTIONS = [ { id: "client", n: "Client & Context", num: "01" }, { id: "challenge", n: "Challenge & Goals", num: "02" }, { id: "discovery", n: "Discovery", num: "03" }, { id: "solution", n: "Solution Overview", num: "04" }, { id: "implementation", n: "Implementation & Dev", num: "05" }, { id: "results", n: "Results & Impact", num: "06" }, ]; const TABS = { "Results": [ { v: "+113%", l: "Conversion rate (60 days)", up: true }, { v: "+234%", l: "Add to cart", up: true }, { v: "+198%", l: "Reached checkout", up: true }, { v: "+226%", l: "Completed checkout", up: true }, ], "First 30 days": [ { v: "+19%", l: "Conversion rate", up: true }, { v: "+26%", l: "Add to cart", up: true }, { v: "+19%", l: "Reached checkout", up: true }, { v: "+39%", l: "Completed checkout", up: true }, ], "Snapshot": [ { v: "0.48%", l: "Baseline conversion rate", up: false }, { v: "~1.02%", l: "Conversion rate after 60 days", up: true }, { v: "~97/mo", l: "Pumps sold at baseline", up: false }, { v: "60 days", l: "From launch to result", up: false }, ], }; const SOLUTIONS = [ { badge: "Solution 01", title: "Audit-led fixes from the CRO audit", body: "A 60-page CRO audit produced a prioritized backlog that drove every build decision. The highest-confidence fixes shipped first.", points: [ "Image gallery strategy: video testimonials above the gallery on mobile; lifestyle, how-it-works, benefits, and science-backed frames; mobile thumbnails and a cleaner desktop gallery with zoom.", "Action-block clarity: rating and review count, a tighter copy hierarchy, clearer installment options, a sticky mobile CTA, and anchor links into deep sections.", "Education blocks below the fold: how it works, features and assembly, what's included, comparison, science-backed proof, and a benefits timeline.", "Assurance and support: expanded FAQ and support access, plus review filters and Q&A.", "Cart and checkout: a redesigned drawer, multiple upsells, free-shipping progress, payment trust, and a streamlined checkout.", ], img: "annabella-audit", src: "assets/annabella-audit.avif", ratio: "1173 / 1452", cap: "A 60-page audit of tactics we could implement to lift conversion on the site.", }, { badge: "Solution 02", title: "Education-first PDP redesign", body: "We reorganized the product-page narrative to carry shoppers from validation to action.", points: [ "New page sequence: proof → product action block → problem → solution → features → how it works → benefits → proof → comparison → FAQ → CTA.", "Produced new explanatory visuals to clarify the pump's unique technology and premium value.", "Elevated trust with quick-view reviews, badges, and FAQ placed near the CTAs.", ], img: "annabella-pdp", src: "assets/annabella-pdp.avif", ratio: "782 / 740", cap: "The education-first PDP, rebuilt around comprehension and trust.", }, { badge: "Solution 03", title: "Cart drawer implementation", body: "A mobile-first cart drawer kept shoppers on-page and preserved purchase momentum.", points: [ "An editable drawer (quantity, remove, code entry) that keeps shoppers in flow.", "Optimized for mobile to cut page transitions and reloads on the path to checkout.", ], img: "annabella-cart", src: "assets/annabella-cart.avif", ratio: "1173 / 1110", cap: "The new on-page cart drawer, optimized for mobile.", }, { badge: "Solution 04", title: "Homepage social-proof section", body: "Authentic video reviews, surfaced below the fold, built credibility for first-time visitors.", points: [ "Curated real customer video reviews and placed them where new visitors build trust.", ], img: "annabella-homeproof", src: "assets/annabella-homeproof.avif", ratio: "782 / 529", cap: "Homepage social proof to raise engagement and credibility.", }, ]; const OTHER = [ { id: "other-hfb", name: "Her Fantasy Box", img: "assets/cases/herfantasybox.avif", href: "/conversion/case-study/subscription-purchase-growth", desc: "A 2-year experimentation program — 63 tests, 42 winners, and subscription growth across PDP, cart, and collections.", m: [["+26.41% mobile conversion lift", true], ["+27.56% subscription lift", true]] }, { id: "other-omnilux", name: "Omnilux", img: "assets/cases/omnilux.avif", desc: "High-ticket DTC proof moved closer to the buying decision across nav, PDP, and homepage.", m: [["+58% CVR lift — reviews in nav", true], ["+35% CVR lift — PDP testimonial video", true]] }, { id: "other-juvenon", name: "Juvenon", img: "assets/cases/juvenon.avif", desc: "PDP purchase options made easier to act on, with a featured win measured to confidence.", m: [["+35.24% CVR lift — featured PDP win", true], ["99.18% statistical confidence", false]] }, { id: "other-wigdealer", name: "WigDealer", img: "assets/cases/wigdealer.avif", desc: "Cart, collection, and PDP friction reduced across the funnel for compounding gains.", m: [["+10.74% RPV lift — cart simplification", true], ["+7.77% CVR lift — collection top-fold", true]] }, ]; // ---- scroll-spy hook ---------------------------------------------------- function useScrollSpy(ids, offset = 130) { const [active, setActive] = useState(null); useEffect(() => { const onScroll = () => { let cur = null; for (const id of ids) { const el = document.getElementById(id); if (el && el.getBoundingClientRect().top <= offset) cur = id; } setActive(cur); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); return active; } // ---- shared atoms ------------------------------------------------------- function Slot({ id, placeholder, radius = 12, style, src }) { return React.createElement("image-slot", { id, placeholder, radius: String(radius), style, src: src ? assetUrl(src) : undefined }); } function Stars({ n = 5, size = 13 }) { return {Array.from({ length: n }).map((_, i) => )}; } // ---- nav ---------------------------------------------------------------- function CaseNav() { const [scrolled, setScrolled] = useState(false); const [openIdx, setOpenIdx] = useState(-1); const [menuOpen, setMenuOpen] = useState(false); const [mCasesOpen, setMCasesOpen] = useState(false); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { document.body.style.overflow = menuOpen ? "hidden" : ""; document.body.classList.toggle("nav-menu-open", menuOpen); return () => { document.body.style.overflow = ""; document.body.classList.remove("nav-menu-open"); }; }, [menuOpen]); const links = [ { label: "The Audit", href: LANDING + "#convert" }, { label: "Case Studies", href: LANDING + "#showcase", dropdown: [ { label: "Her Fantasy Box", href: "/conversion/case-study/subscription-purchase-growth", sub: "Subscription & purchase growth" }, { label: "Annabella", href: "#top", sub: "Audit-led Shopify rebuild" }, ] }, { label: "How it works", href: LANDING + "#how" }, { label: "FAQs", href: LANDING + "#faq" }, ]; const lstyle = { fontFamily: "var(--font-ui)", fontSize: 14, fontWeight: 500, color: "var(--fg2)", textDecoration: "none", transition: "color .15s" }; return ( {menuOpen && (
)} ); } // ---- hero --------------------------------------------------------------- function Hero() { const [tab, setTab] = useState("Results"); return (
); } // ---- meta band ---------------------------------------------------------- function MetaBand() { const services = [ { i: "ri-focus-3-line", t: "CRO Audit" }, { i: "ri-pen-nib-line", t: "High-Converting Design" }, { i: "ri-code-s-slash-line", t: "Full Implementation & Dev" }, ]; const facts = [ { i: "ri-store-2-line", t: "Industry", v: "DTC · Baby care · Fem-tech" }, { i: "ri-calendar-2-line", t: "Timeline", v: "~3 months, contract to launch" }, { i: "ri-stack-line", t: "Stack", v: "Figma, Shopify, GA4, Hotjar" }, ]; return (
Summary

Annabella entered the US with a patented breast pump but a 0.48% conversion rate. We rebuilt navigation, information architecture, and an education-first PDP — plus a mobile cart drawer and homepage social proof — to streamline the journey and double conversion in 60 days.

Services
{services.map((s) => {s.t})}
{facts.map((f) => (

{f.t}

{f.v}

))}
); } // ---- desktop sticky rail ------------------------------------------------ function Rail({ active }) { return ( ); } // ---- mobile TOC dropdown ------------------------------------------------ function MobileTOC({ active }) { const [open, setOpen] = useState(false); const cur = SECTIONS.find((s) => s.id === active); const label = cur ? cur.n : "Table of Contents"; return (
{SECTIONS.map((s) => ( setOpen(false)}>{s.n} ))}
); } // ---- mobile sticky CTA dropdown ----------------------------------------- function MobileCTA() { const [open, setOpen] = useState(false); const [show, setShow] = useState(false); useEffect(() => { const onScroll = () => { const a = document.getElementById("client"); const past = a ? a.getBoundingClientRect().top < window.innerHeight * 0.85 : false; setShow(past); }; window.addEventListener("scroll", onScroll, { passive: true }); onScroll(); return () => window.removeEventListener("scroll", onScroll); }, []); useEffect(() => { document.body.classList.toggle("csx-cta-on", show); return () => document.body.classList.remove("csx-cta-on"); }, [show]); return (
Turn browsers into repeat visitors.

Discover ways to guide visitors from first click to long-term engagement — starting with 5 free fixes for your store.

Claim your free audit
Trustpilot
Clutch
); } // ---- solution block ----------------------------------------------------- function SolutionBlock({ s }) { return (
{s.badge}

{s.title}

{s.body}

    {s.points.map((p, i) =>
  • {p}
    • )}

{s.cap}

); } // ---- article ------------------------------------------------------------ function H2({ id, num, children }) { return (

{num && {num}}{children}

); } function Article() { return (
{/* 01 — Client & Context */}

Client & Context

Annabella is a 7-figure fem-tech brand and breast-pump manufacturer with a patented pump that simulates a baby's tongue. After succeeding internationally, the brand entered the US through its DTC site, Amazon, and social — into stiff competition and low brand awareness.

At kickoff, the US store converted at just 0.48% sitewide — roughly 97 pumps a month. US shoppers needed clearer education to understand Annabella's unique technology and premium positioning.

{/* 02 — Challenge & Goals */}

Challenge & Goals

Challenges

  • Category competition and price anchoring — US buyers compare against lower-priced pumps, so the education burden is high.
  • Education gaps on PDP — basic images didn't explain the technology or value; the gallery was highly engaged but under-utilized.
  • Trust and proof gaps — sparse US reviews, minimal social proof on home and PDP, and warranty/financing cues that weren't prominent.
  • Friction in the purchase flow — no cart drawer, multiple mobile page loads, unclear sizing, and weak support links.

Goals

  • Increase conversion by improving comprehension on PDP with an education-first structure and clearer action-block hierarchy.
  • Reduce friction from PDP → cart → checkout with a mobile-first cart drawer and cleaner checkout cues.
  • Raise trust and intent with authentic social proof, clearer review signals, and service assurances.
  • Strengthen ops with reusable templates, components, and a practical GA4 event schema.
{/* 03 — Discovery */}

Discovery

Analytics stack: GA4, Shopify Analytics, and Hotjar, plus a competitive scan. The evidence pointed in one direction.

  • Heatmaps — heavy interaction with the gallery, signalling a chance to make the media educational.
  • Support and chat logs — repeated educational questions that called for in-flow education.
  • Funnel data — materially higher conversion for users entering via PDP than via the homepage.

Heatmaps, session review, and funnel analysis pointed to education-first PDPs.

{/* 04 — Solutions */}

Solution Overview (design & build)

We prioritized the highest-impact work from the audit and shipped it straight to production — no split testing in this phase.

{SOLUTIONS.map((s) => )}
{/* 05 — Implementation */}

Implementation & Development

Design
Figma
Build
Shopify, built directly (no split testing this phase)
Tracking
GA4 event schema — variant_select, add_to_cart, cart_drawer_open, drawer_checkout, faq_toggle, and form_start / submit.
Accessibility & performance
Alt text, focus states, image sizing, and lazy-loading.
{/* 06 — Results & Impact */}

Results & Impact

Baseline: 0.48% conversion rate, roughly 97 pumps a month. No A/B tests this phase — lifts reflect the rollout of the education-first PDP, cart drawer, and homepage social proof.

Before
After

Shopify funnel breakdown — before engagement vs. after 60 days.

First 30 days post-launch

  • Add to cart +26%.
  • Reached checkout +19%.
  • Completed checkout +39%.
  • Conversion rate +19%.

Days 31–60

  • Add to cart +234%.
  • Reached checkout +198%.
  • Completed checkout +226%.
  • Conversion rate +113% (0.48% → ~1.02%).

60-day headline — education-first PDP, cart drawer, homepage proof

Conversion rate +113%
Add to cart +234%
Completed checkout +226%

Why it worked — key learnings

  • For high-consideration products, education inside the PDP is the highest-leverage move.
  • Cart drawers reduce friction, boost perceived speed, and set up later AOV lifts.
  • Authentic, human video social proof builds trust more than logos alone.
{/* Final CTA */}
); } // ---- other case studies ------------------------------------------------- function OtherCases() { const trackRef = useRef(null); const [idx, setIdx] = useState(0); const scrollTo = (i) => { const track = trackRef.current; if (!track) return; const card = track.children[i]; if (card) track.scrollTo({ left: card.offsetLeft - track.offsetLeft, behavior: "smooth" }); }; const onScroll = () => { const track = trackRef.current; if (!track) return; let nearest = 0, best = Infinity; [...track.children].forEach((c, i) => { const d = Math.abs(c.offsetLeft - track.offsetLeft - track.scrollLeft); if (d < best) { best = d; nearest = i; } }); setIdx(nearest); }; const step = (dir) => scrollTo(Math.max(0, Math.min(OTHER.length - 1, idx + dir))); return (

Other case studies

{OTHER.map((c) => ( ))}
{OTHER.map((c, i) =>
); } // ---- footer ------------------------------------------------------------- function CaseFooter() { const cols = [ { head: "Conversion Works", links: [["The problem", LANDING + "#work"], ["What we build", LANDING + "#workers"], ["Process", LANDING + "#how"], ["Case studies", LANDING + "#showcase"], ["Pricing", LANDING + "#pricing"]] }, { head: "Taurist", links: [["Taurist Technologies", "https://www.taurist.com/"], ["Siteworks", "https://www.taurist.com/siteworks"], ["Workers", "https://www.taurist.com/workers"], ["About", "https://www.taurist.com/about"], ["Notes", "https://www.taurist.com/notes"], ["Email Us", "mailto:hello@taurist.com"]] }, ]; const link = { fontFamily: "var(--font-body)", fontWeight: 300, fontSize: 14, color: "var(--fg3)", textDecoration: "none", transition: "color .15s", width: "fit-content" }; const colHead = { fontFamily: "var(--font-ui)", fontSize: 12, fontWeight: 600, letterSpacing: "0.08em", textTransform: "uppercase", color: "var(--fg2)", marginBottom: 16 }; return ( ); } // ---- page --------------------------------------------------------------- function CaseStudyPage() { const ids = SECTIONS.map((s) => s.id); const active = useScrollSpy(ids); const lens = useLensChat(); // Any CTA on the page opens the Lens chat instead of navigating away. useEffect(() => { const onClick = (e) => { const a = e.target.closest('a[href$="#cta"]'); if (a && lens && lens.openFullscreen) { e.preventDefault(); lens.openFullscreen(); } }; document.addEventListener("click", onClick); return () => document.removeEventListener("click", onClick); }, [lens]); // cursor-following light on primary/secondary buttons (matches the rest of the site) useEffect(() => { const onMove = (e) => { const btn = e.target.closest(".btn-primary, .btn-secondary"); if (btn) { const r = btn.getBoundingClientRect(); btn.style.setProperty("--mx", `${((e.clientX - r.left) / r.width) * 100}%`); btn.style.setProperty("--my", `${((e.clientY - r.top) / r.height) * 100}%`); } }; document.addEventListener("pointermove", onMove); return () => document.removeEventListener("pointermove", onMove); }, []); return (
); } ReactDOM.createRoot(document.getElementById("root")).render( );