// 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: "Solutions", num: "04" }, { id: "implementation", n: "Implementation & Dev", num: "05" }, { id: "results", n: "Results & Impact", num: "06" }, { id: "testimonial", n: "Testimonials", num: null }, ]; const TABS = { "Results": [ { v: "+26.41%", l: "PDP mobile conversion lift", up: true }, { v: "+15.43%", l: "Cart subscription lift", up: true }, { v: "+27.56%", l: "Collection subscription lift", up: true }, { v: "$50M+", l: "Online sales reached", up: true }, ], "Program": [ { v: "2yr+", l: "Experimentation program", up: false }, { v: "63", l: "Tests launched", up: true }, { v: "42", l: "Winning tests", up: true }, { v: "67%", l: "Win rate", up: true }, ], "Featured Tests": [ { v: "+26.41%", l: "PDP social proof (mobile)", up: true }, { v: "+15.43%", l: "Cart subscription toggle", up: true }, { v: "+27.56%", l: "Collection top fold", up: true }, { v: "97%+", l: "Avg. test confidence", up: true }, ], }; const TESTS = [ { badge: "Test 01", title: "Cart Drawer — Add Subscription Toggle (one-time → subscribe)", spec: [ ["Problem", "Shoppers typically added one-time products to cart; switching to a subscription required extra steps and low-visibility messaging."], ["Hypothesis", "A clear subscription toggle inside the cart drawer will surface savings and make switching frictionless, increasing subscription conversion."], ["Primary KPI", "Subscription conversion rate."], ["Goal", "Increase the share of orders placed as subscriptions."], ["Guardrails", "Overall conversion rate, cart abandon, page performance."], ["Split", "50/50; ~17,231 visitors (control) vs ~17,194 (variant)."], ], result: ["+15.43% subscription conversion", "99.58% confidence", "Win"], note: "Kept users in-flow; messaging emphasized savings and flexibility.", before: "t1-before", after: "t1-after", beforeSrc: "assets/cs-t1-before.avif", afterSrc: "assets/cs-t1-after.avif", ratio: "545 / 1244", cap: "This cart-drawer change lifted subscription conversion by +15.43% at 99.58% confidence.", }, { badge: "Test 02", title: "PDP (Mobile) — Add Testimonial Video Bubbles Above Image Gallery", spec: [ ["Problem", "On mobile, users reached the gallery before seeing credible human proof, leading to hesitation."], ["Hypothesis", "Placing authentic video testimonials above the gallery will build trust faster and lift conversion."], ["Primary KPI", "Overall conversion rate."], ["Goal", "Increase mobile conversion by reducing early hesitation."], ["Guardrails", "Scroll engagement, performance, bounce."], ["Split", "50/50; ~14,834 visitors (control) vs ~14,929 (variant)."], ], result: ["+26.41% conversion", "99.73% confidence", "Win"], note: "Created a stronger emotional connection before product details.", before: "t2-before", after: "t2-after", beforeSrc: "assets/cs-t2-before.avif", afterSrc: "assets/cs-t2-after.avif", ratio: "541 / 1178", cap: "Adding testimonial videos above the mobile PDP gallery lifted conversion by +26.41% at 99.73% confidence.", }, { badge: "Test 03", title: "Collection Page — Redesign the Top Fold (quiz + subs toggle + filters)", spec: [ ["Problem", "The collection top fold didn't clearly guide users or communicate subscription savings. The client was sending traffic directly to this page."], ["Hypothesis", "A more informative, interactive top fold (value callouts, quiz/product finder, subscription pricing toggle, stronger filters) will improve engagement and subscription adoption."], ["Primary KPI", "Subscription conversion rate (collection visitors)."], ["Goal", "Increase subscription selection while improving browse efficiency."], ["Guardrails", "Overall CVR, exit rate, performance."], ["Split", "50/50; ~6,987 visitors (control) vs ~7,096 (variant)."], ], result: ["+27.56% subscription conversion", "97.28% confidence", "Win"], note: "Highlighted value, simplified discovery, and reduced pogo-sticking.", before: "t3-before", after: "t3-after", beforeSrc: "assets/cs-t3-before.avif", afterSrc: "assets/cs-t3-after.avif", ratio: "546 / 1185", cap: "Redesigning the collection top fold lifted subscription conversion by +27.56% at 97.28% confidence.", }, ]; const OTHER = [ { id: "other-annabella", name: "Annabella", img: "assets/cases/annabella.avif", href: "/conversion/case-study/dtc-baby-brand", desc: "Audit-led Shopify rebuild that doubled conversion in 60 days across PDP, cart, and checkout.", m: [["+113% conversion-rate increase", true], ["+234% add-to-cart increase", 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: "#top", sub: "Subscription & purchase growth" }, { label: "Annabella", href: "/conversion/case-study/dtc-baby-brand", 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-flask-line", t: "A/B Testing" }, { i: "ri-pen-nib-line", t: "High-Converting Design" }, ]; const facts = [ { i: "ri-store-2-line", t: "Industry", v: "DTC · Subscription store · Intimacy & Lifestyle" }, { i: "ri-calendar-2-line", t: "Dates", v: "2-year+ program" }, { i: "ri-stack-line", t: "Program", v: "20 launched in 90 days · 13 wins (active)" }, ]; return (
Summary

Over a 2-year experimentation program, 63 tests were launched across PDPs, cart, and collection pages. 42 won, including major lifts from subscription toggles, mobile proof, and collection-page guidance.

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
); } // ---- test block --------------------------------------------------------- function TestBlock({ t }) { return (
{t.badge}

{t.title}

{t.spec.map(([k, v], i) => (
{k}
{v}
 ))}
Result: {t.result[0]} · {t.result[1]} → {t.result[2]}.
Before
After

{t.note}

{t.cap}

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

{num && {num}}{children}

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

Client & Context

Her Fantasy Box is a fast-growing DTC subscription brand in the intimacy and lifestyle space. The brand reached $50M+ in online sales within its first three years while working with us across UX, conversion experimentation, and subscription growth. The engagement focused on improving subscription adoption, browse-to-product flow, cart momentum, and revenue efficiency.

{/* 02 — Challenge & Goals */}

Challenge & Goals

Challenges

  • Shoppers discovered products, but subscription value was not visible at the right decision points.
  • Mobile PDPs did not surface high-trust social proof early enough.
  • Collection pages made it harder than necessary to find the right product or subscription path.

Goals

  • Increase subscription conversion without hurting one-time purchase conversion.
  • Build trust earlier on mobile PDPs.
  • Improve collection-level guidance, filtering, and product discovery.
  • Maintain a clean testing cadence with clear guardrails.
{/* 03 — Discovery */}

Discovery

  • Reviewed the highest-impact pages: homepage, PDPs, collections, cart, and checkout flow.
  • Analyzed funnel behavior, session recordings, and abandonment points.
  • Studied competitive patterns for subscription framing, gallery structure, product discovery, and page flow.
  • Prioritized the backlog using ICE: impact, confidence, and effort.

Cutout & mockup of the 91-page audit

{/* 04 — Solutions */}

Solutions (Featured test wins)

Three of the highest-impact wins from the program, each diagnosed in discovery, prioritized by ICE, shipped as a clean 50/50 experiment, and measured to confidence.

{TESTS.map((t) => )}
{/* 05 — Implementation */}

Implementation & Development

Platform
Shopify
Experiments
Convert.com
Measurement
Subscription conversion, overall conversion, engagement, performance, and abandonment guardrails.
QA
Responsive behavior, accessibility basics, visual consistency, event tracking, and error handling.
{/* 06 — Results & Impact */}

Results & Impact

Program to date

  • 63 tests launched.
  • 42 winning tests.
  • 67% win rate.
  • Active experimentation program with compounding gains across PDP, cart, and collection pages.

Client-reported

  • $50M+ in online sales reached within the brand's first three years.

Highlighted wins — 63 tests · 42 winners · 67% win rate

PDP mobile proof — conversion lift +26.41%
Cart subscription toggle — subscription conversion lift +15.43%
Collection top fold — subscription conversion lift +27.56%
{/* Testimonial */}

"Their work over the year has been instrumental to our growth. They were able to work with us with little to no direction. Throughout it we've gone through full website revamps, product launches, new applications, and they have been rock solid throughout the whole process."

Willie P.

Co-Founder & CMO

Her Fantasy Box
{/* Final CTA card */}
); } // ---- 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( );