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 company entered the US market via DTC site, Amazon, and socials but faced stiff competition and low brand awareness.

US baseline at kickoff: sitewide conversion rate of just 0.48% (≈97 pumps/month). US shoppers needed better education to understand Annabella's unique technology and premium positioning.

Challenge & Goals

Challenges

• Category competition & price anchoring: US buyers compare to lower‑priced pumps; education burden is high.
• Education gaps on PDP: Basic images didn’t explain the technology or value; gallery highly engaged but under‑utilized.
• Trust & proof gaps: Sparse US‑market reviews; minimal social proof on Home/PDP; warranty/financing cues not prominent.
• Friction in purchase flow: No cart drawer; multiple page loads on mobile; unclear sizing; weak support/self‑serve links.Goals
• Increase conversion by improving comprehension on PDP (education‑first structure, better action block hierarchy).
• Reduce friction from PDP → Cart → Checkout with a mobile‑first cart drawer and cleaner checkout cues.
• Raise trust & intent with authentic social proof (UGC/video), clearer review signals, and service assurances.
• Strengthen ops with reusable templates/components and a practical GA4 event schema.

Discovery

Analytics stack: GA4, Shopify Analytics, Hotjar, plus competitive scan.

Evidence highlights:

• Heatmaps: heavy interaction with gallery → opportunity to make media educational.
• Support/chat logs: repeated educational questions → need for in‑flow education.
• Funnel data: materially higher conversion for users entering via PDP vs. Home.

Solution Overview (Design & Build)

We prioritized high‑impact work and shipped directly to production:

1. Audit‑Led Fixes (from CRO audit)

The audit produced a prioritized backlog we used to drive build decisions. Highlights included:

• Image gallery strategy: Add video testimonials above the gallery on mobile; diversify gallery with lifestyle, how‑it‑works, benefits, and science‑backed frames; introduce thumbnails on mobile and a cleaner desktop gallery with zoom.
• Action block clarity: Show rating + review count, tighten copy hierarchy, clarify installment options, add sticky CTA (mobile) and optional sub‑nav/anchor links to deep sections.
• Education blocks below the fold: How it works, Features & assembly, What’s included, Comparison, Science‑backed proof, Timeline of benefits, and review/UGC sections.
• Assurance & support: Expand FAQ + support access; add review filters and Q&A.
• Cart & checkout: Redesign drawer layout (horizontal items), enable multiple upsells, add free‑shipping progress, show value props & payment trust, consider shipping/product protection, and streamline checkout.

2. Education‑First PDP Redesign

Reorganized the page narrative to guide users from validation to action. Sequence follows: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 value.
• Elevated trust: quick‑view reviews, badges, and FAQ near CTAs.

3. Cart Drawer Implementation

• Kept shoppers on‑page with an editable drawer (qty, remove, code entry) to maintain momentum.
• Optimized especially for mobile to cut page transitions and reloads.

4. Homepage Social Proof Section

• Curated authentic video reviews and surfaced them below the fold to raise engagement and credibility for new visitors.

Implementation & Development

• Designs in Figma; built directly in Shopify (no split testing for this phase).
• Event schema in GA4 (key: variant_select, add_to_cart, cart_drawer_open, drawer_checkout, faq_toggle, form_start/submit).
• Accessibility/performance: alt text, focus states, image sizing and lazy‑loading.

Results & Impact