05. Chpter Dashboard
At Chpter I headed the end-to-end product design of a commerce-ready platform that lets merchants launch WhatsApp campaigns, automate customer flows, manage products + orders, and accept one-off or subscription payments—all from a single dashboard. My work covered first-time onboarding, campaign builder, automation canvas, WhatsApp flows, catalog & order management, and a payments module that syncs cards, M-Pesa, and instant payouts. Since rollout, onboarding completion is up +27 pp, automated flows handle ≈ 58 % of chats, and payment success has climbed +14 %, helping merchants grow revenue while Chpter’s support load shrank by –35 %.
Client:
chpter
Role:
Lead Product Designer
Chpter is an AI-powered social-commerce platform that turns WhatsApp and Instagram into a single selling surface. Merchants get:
Omni-channel campaigns
Automated customer flows
Product & order management
Instant card + M-Pesa payouts
All wrapped in a friendly UI that hides the WhatsApp Business API’s complexity.
Research Process
Round-tables
Ticket Mining
Competitive Teardowns
Module-by-Module Detail
Module | Design Challenges | Key UX / UI Decisions |
|---|---|---|
Guided On-Boarding | 6 disparate setup screens, tech jargon, no progress sense | • 6-step wizard with micro-progress bar & celebratory confetti • Real-time API key validation • “Skip for later” removed (we found it harmed completion) |
Campaign Builder | Creating a campaign was a long and confusing process | • |
Automation Canvas | Old form-based rule builder had 8 error states | • Node-based If/Then canvas with zoom & mini-map • 18 ready nodes (+Loyalty & Coupon nodes we sketched in Oct chat) • Real-time validation + debug overlay |
Product & Order Hub | CSV import errors broke catalogs | • Bulk import with row-level error badges • Fulfilment timeline (“Ordered → Paid → Shipped”) • Points-redemption hook (ties to loyalty work from Oct 21) |
Payments & Subscriptions | Split views for card vs M-Pesa | • Unified modal, dynamic logo swap • Friendly retry copy; one-tap “Send Mpesa code” • SKU-level subscription toggle |
Analytics & Settings | Merchants lacked ROI clarity | • KPI cards (GMV, Campaign ROI, Repeat-buy %) • Cohort chart plus CSV download/Share to Email |
Design System | Inconsistent colours & spacing across React + Flutter | • Tokenised colour, spacing, elevation • 42 live components documented in Storybook (web) & Widgetbook (mobile) |
05. Chpter Dashboard
At Chpter I headed the end-to-end product design of a commerce-ready platform that lets merchants launch WhatsApp campaigns, automate customer flows, manage products + orders, and accept one-off or subscription payments—all from a single dashboard. My work covered first-time onboarding, campaign builder, automation canvas, WhatsApp flows, catalog & order management, and a payments module that syncs cards, M-Pesa, and instant payouts. Since rollout, onboarding completion is up +27 pp, automated flows handle ≈ 58 % of chats, and payment success has climbed +14 %, helping merchants grow revenue while Chpter’s support load shrank by –35 %.
Client:
GATECH
Role:
Content
Chpter is an AI-powered social-commerce platform that turns WhatsApp and Instagram into a single selling surface. Merchants get:
Omni-channel campaigns
Automated customer flows
Product & order management
Instant card + M-Pesa payouts
All wrapped in a friendly UI that hides the WhatsApp Business API’s complexity.
Research Process
Round-tables
Ticket Mining
Competitive Teardowns
Module-by-Module Detail
Module | Design Challenges | Key UX / UI Decisions |
|---|---|---|
Guided On-Boarding | 6 disparate setup screens, tech jargon, no progress sense | • 6-step wizard with micro-progress bar & celebratory confetti • Real-time API key validation • “Skip for later” removed (we found it harmed completion) |
Campaign Builder | Creating a campaign was a long and confusing process | • |
Automation Canvas | Old form-based rule builder had 8 error states | • Node-based If/Then canvas with zoom & mini-map • 18 ready nodes (+Loyalty & Coupon nodes we sketched in Oct chat) • Real-time validation + debug overlay |
Product & Order Hub | CSV import errors broke catalogs | • Bulk import with row-level error badges • Fulfilment timeline (“Ordered → Paid → Shipped”) • Points-redemption hook (ties to loyalty work from Oct 21) |
Payments & Subscriptions | Split views for card vs M-Pesa | • Unified modal, dynamic logo swap • Friendly retry copy; one-tap “Send Mpesa code” • SKU-level subscription toggle |
Analytics & Settings | Merchants lacked ROI clarity | • KPI cards (GMV, Campaign ROI, Repeat-buy %) • Cohort chart plus CSV download/Share to Email |
Design System | Inconsistent colours & spacing across React + Flutter | • Tokenised colour, spacing, elevation • 42 live components documented in Storybook (web) & Widgetbook (mobile) |