A unified billing product for Africa

I ran on-site field research across African markets to understand how merchants actually get paid — not how we assumed they did. The pattern was everywhere and invisible in our analytics: getting paid was a human process, not a product one.

South African merchants rarely had a self-serve billing page. To recover outstanding payments they leaned on manual recovery — call-centre follow-ups, SMS nudges and WhatsApp/email reminders, often sending bank details or a reference and asking the customer to confirm once paid.

• Money owed was chased one conversation at a time — expensive and slow.
• Customers paid into a void, then had to prove they'd paid.
• No shared source of truth between merchant and customer.

Without a self-serve billing page, merchants chased outstanding payments manually while customers paid with no confidence the payment landed. As Moment, we needed a scalable, self-serve billing product that adapts seamlessly across diverse merchant use cases — without custom builds — yet stays dynamic and scalable, meeting global standards while remaining intuitive for local users.

Identifying quick wins

• Replace manual recovery with a self-serve billing & payment flow.
• Merchants need to "get paid without chasing."
• Customers need to "pay safely, with confidence."
• One product that scales across merchants and payment methods, not bespoke builds.

I mapped the jobs people perform in a Moment checkout across three altitudes — the sky-level emotional & social goals, the backbone of the core flow, and the fish-level tasks users repeat most. This kept the team anchored on user value, not screens.

• Emotional goal: "I want more control over my bill payments."
• Social goal: contextual moments — e.g. paying the DStv bill before the match.
• Core value: decide a payment method that feels quick & trustworthy, then know the transaction succeeded.

Then I pressure-tested the flow with real users — first-time and repeat — to surface where trust broke and which decisions mattered most.

I consolidated the entire customer journey into a single architecture, then reduced it to a repeatable spine: EBP → Checkout → Payment details → Redirect → Status → Receipt, with failed/cancelled/expired routes folding back in.

From there I identified the common elements across every screen — branding, country, amount states, breakups, points, transaction details — so a single component set could power every merchant and every method.

To make "no custom builds" real, I built a scalable design system from scratch that maps directly to the common-element model — so product, engineering and business could compose any merchant experience from the same parts. I also integrated AI into the design workflow to move from spec to variations faster.

• Wireframes acted as a shared contract between design, eng and business.
• Components encoded dynamic states (locked vs editable amounts, partial payments, VAT, discounts).
• Drove cross-functional delivery so the same system shipped across markets.

The bill page went through dozens of iterations — tuning hierarchy, the amount field, due-date framing, error guidance and trust cues until first-time users could pay without hesitation.

I made it responsive across breakpoints, with a desktop summary that exposes the full amount breakup — subtotal, discounts, previous advance and VAT — without overwhelming smaller screens.

The shipped product is a complete, self-serve flow that handles every local method — cards, Capitec Pay, bank transfers and vouchers — through to a shareable receipt.

Customisable to each merchant's brand

Scalable across merchants & solutions

Unified Billing replaced manual recovery with a self-serve product that merchants can stand up themselves and customers trust — built once, scaled across brands, methods and markets.