Redefining Refillable Commerce with Purpose and Performance

Redefining Refillable Commerce with Purpose and Performance

Redefining Refillable Commerce with Purpose and Performance

Role

Lead UX/UI Designer

Client

Zero Co

Duration, Year

4months, 2024

Services

Product Design

UX/UI Design

Design System

Conversion Optimisation

Contributors

Neville Ewers

Jack Nicholson

What's Zero Co?

What's Zero Co?

Zero Co aims to untrash the planet, offering refillable personal care with a new paper‑first package. We paired the rebrand and packaging launch with a full Shopify Plus redesign from homepage to cart to grow subscriptions, clarify refills, and give the team more control over content.

Challenge

Challenge

Challenge

Rebrand launch: showcase the new visual identity and ForeverFill paper pouches.
Product discovery & clarity: make refills vs one‑offs obvious on PLP and PDP.
Subscription complexity: surface frequency, pause, swap, and skip without bloat.
Operational agility: enable marketing to ship campaigns without developer help.

Solution

Solution

Solution

🚀 A smooth path from discovery to checkout

Guide new and returning customers from homepage to purchase. Reduce drop‑offs and decision friction.

💎 Refill vs one‑time at a glance
Clear labels, badges, and inline toggles on PLP and PDP make choices obvious.
⚡️ Friction‑light cart and subscription controls

Pause, swap, and skip directly within cart line items. A persistent add to cart bar on mobile shortens the journey.

☄️ Developer‑free content updates

Modular Shopify sections and concise content guidelines let marketing publish pages and campaigns independently.

Homepage

Homepage

  • Hero introduces paper‑first ForeverFill, mission CTA, and starter packs

  • Bold type and lifestyle imagery express brand personality

  • Mission‑focused hero with new packaging front and center

Product Listing Page

Product Listing Page

  • Category rail and intro set context with quick entry to Bathroom, Laundry, and Kitchen.

  • Filters and sort keep results focused with active chips and a clear results count.

  • Product cards show refill versus buy once, subscription savings, ratings, and quick add.

Product Detail Page

Product Detail Page

  • Gallery‑first layout with large hero image, thumbnail strip, and image count for quick scanning.

  • Options grouped by task: bottle colour and refill fragrance with clear swatches, plus tabs for Description, Ingredients, and Sustainability.

  • Simple purchase module: one time or subscribe and save with savings badge, delivery frequency dropdown, clear pricing, quantity stepper, single Add to cart, and a link to the 100‑day money‑back guarantee.

Subscription builder highlights

Subscription builder highlights

  • Two‑step flow: choose delivery frequency, then pick products with a clear minimum products chip.

  • Card grid by room with variant dropdowns and quantity steppers on each product for quick adds.

  • Sticky Bundle Summary shows items, cadence, subtotal, savings, and a single Add to cart with inline edit and remove.

How it works

How it works

  • Three visual steps explain refills at a glance

  • Short copy with a Learn more link

  • Reusable on PDP and in My Account

Impact tracker

Impact tracker

  • Product and personal impact side by side

  • Live counts with milestones to motivate

  • Tap to see the method and share

Outcomes and impact

Outcomes and impact

Outcomes and impact

A cleaner journey and clearer subscriptions lifted engagement and intent across the site.

+472 %

increase in on-site engagement

+396 %

increase in add-to-cart actions

+124 %

increase in sessions

Measured in GA4 and Shopify & Google Analytics.