Skip to main content
stack.com
Next.jsTypeScriptMagento 2SubscriptionsSustainabilityPWA
Cleangang Sustainable Cleaning Commerce
Eco-focused refill subscription PWA for sustainable cleaning products.
Project Overview
Cleangang focuses on sustainable, refill-first commerce. We delivered a headless PWA centered on reducing friction for starter bundle purchase, enabling seamless refill subscription enrollment, and conveying environmental impact transparently. A refined performance budget plus adaptive image & bundle configuration workflows ensured conversion improvements without sacrificing the brand storytelling layer.
Screenshots
Starter Bundle Experience
Refill Subscription Options
Impact Tracking UI
Key Features
- Starter + refill bundle builder
- Subscription upsell in-cart & post-purchase
- Carbon / plastic saved impact tracker
- Dynamic refill cycle recommendations
- Wallet & express checkout integration
- Localized content & sustainability badges
Challenges
- Balancing educational content with conversion path
- Accurate impact calculation with variable refills
- Reducing PDP media payload while retaining quality
- Simplifying subscription modification UX
Solutions
- Progressive content reveal & contextual microcopy
- Normalized refill factors + caching layer for metrics
- Adaptive image set + AVIF fallback strategy
- Inline schedule editor with real-time pricing deltas
Key Metrics
+22%
Subscription Uptake
1.1s
LCP PDP
45k+
Monthly Sessions
Technology Stack
Frontend
Next.jsReactTypeScriptTailwindCSS
Backend
Magento 2GraphQLNode.js
Subscriptions
Refill SchedulerBundle Normalizer
Sustainability
Impact TrackerLifecycle Metrics
Results
- Subscription uptake increased 22%
- Reduced PDP payload ~31%
- Lowered churn in first renewal cycle by 8%
- Improved LCP to ~1.1s on key PDP templates
interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; } interface Project { success: boolean; client: Client; timeline: Timeline; } type Client = { name: string; vision: string; goals: string[]; }