Case Study · 01

Payonus Merchant
Web App Redesign

The original merchant dashboard was built by engineers to work — not to be understood. I led the first design-driven redesign of a live, CBN-regulated fintech platform: introducing hierarchy, grouping, progressive disclosure, and plain-language copy for the first time.

Company Payonus (CBN-licensed PSSP)
Role First Designer · PM · Brand & Biz Dev
Year 2024 – 2025
Scope Dashboard · Onboarding · Transactions · Settlement

Introducing design discipline to a live regulated fintech.

Payonus is a CBN-licensed pan-African B2B fintech PSSP. The merchant-facing web app — dashboard, wallets, settlement, onboarding — was originally built without a dedicated designer. The engineering team built exactly what was functionally needed, screen by screen, with no one owning the experience as a whole.

I led the first design-driven redesign of the product. This case study covers that work — the full merchant web app overhaul. My other design work at Payonus (checkout flows, OnUs Tag Transfer, cross-border payment UX) is covered separately in the Experience section.

🎯
My role

First dedicated designer on the product. Owned research, IA, visual design, and handoff — alongside my broader PM, brand, and business development responsibilities at Payonus.

⚖️
Context

Live regulated product. Every change had to work within CBN compliance constraints while improving merchant comprehension and trust. No design system existed before I arrived.

4
Core flows redesigned
3
Stat cards replacing one flat summary
1st
Dedicated designer on the product

Built to work. Not to be understood.

The original merchant dashboard led with a single flat "Transaction Summary" card — one large number, a row of dropdown filters, and no indication of what that number meant or what the merchant should do next. Wallet balances and settlement information lived on separate screens, so understanding "how much money can I actually move right now" meant navigating away from the dashboard entirely.

Transaction details had the same problem at a smaller scale. The detail modal listed every field — transaction ID, status, amount, channel, business name — at identical visual weight, in a single unbroken list. Finding one specific value meant reading the whole thing.

Settlement splitting, where merchants configure how incoming settlements divide across bank accounts, was a bare form: select a bank, enter an account name and number, enter a percentage. There was no way to see at a glance how much of the settlement was already allocated, how much remained, or whether a configuration was even active.

Onboarding compounded it. The original signup form put name, phone number, email, merchant type, and two password fields on one dense, unbroken screen — no progressive disclosure, no sense of how many steps remained.

None of this was a failure of engineering. It was the natural result of building a regulated fintech product with no one responsible for how it felt to use.

Four before/after decisions — and why each one matters.

1 — Onboarding Flow
Before — single-screen sign-up
Original Payonus signup form — all fields on one dense screen
After — Step 1: Choose type
New onboarding: Choose Merchant Type screen
After — Step 2: Identity details
New onboarding: Let's get to know you screen
After — Step 3: Terms
New onboarding: Terms and Conditions screen
Before
One dense screen: name, phone, email, merchant type, and two password fields at once
No progressive disclosure — all cognitive load front-loaded
No sense of how many steps remained or how close completion was
After
Three-step flow: merchant type selection → identity details → terms and conditions
Visible progress indicator — merchants always know where they are
No single screen asks for more than it needs to
Progressive disclosure is table stakes for fintech onboarding, but it's often skipped when engineers build forms without a designer. The stepped flow reduces abandonment by framing each screen as a small commitment rather than one large ask.
2 — Dashboard
Before — flat Transaction Summary
Original dashboard: single Transaction Summary card
After — three purpose-built stat cards
Redesigned dashboard: Total Payin, Payouts, and Wallet Funding cards
Before — alternate view
Original dashboard alternate view
After — wallet and settlement cards
Redesigned dashboard showing Payonus Account and Settlement Account cards
Before
Single "Transaction Summary" card — one number, no context
Four filter dropdowns as the primary navigation aid
Wallet and settlement balances on separate screens
No indication of pending or failed transactions
After
Three purpose-built stat cards: Total Payin, Total Payouts, Total Wallet Funding — each with its own pending/failed breakdown
Dedicated Payonus Account and Settlement Account cards with plain-language copy
Full financial position visible on arrival — no navigation required
The split into three named cards matches the three distinct money states a merchant actually cares about: what came in, what went out, and what's sitting in the wallet. The plain-language copy on the account cards removes a class of support questions entirely.
3 — Transaction Detail Modal
Before — flat field list
Original transaction detail modal — all fields at equal weight
After — grouped sections + slide panel
Redesigned transaction detail panel — grouped sections, colour status, copy buttons
Before
All fields at identical visual weight in a single unbroken list
Status shown as plain text, no colour signal
No copy-to-clipboard on IDs
After
Grouped into named sections: Transaction Info, Payment Details, Business Info, Reference
Status shown as a colour-coded pill (SUCCESSFUL = green, FAILED = red)
Every ID given one-tap copy — critical for reconciliation and support tickets
Grouping transforms a reference document into a scanning surface. A merchant chasing a specific settlement reference shouldn't need to read 12 fields to find it. The copy buttons address a real pain point: merchants regularly paste transaction IDs into reconciliation spreadsheets or support channels.
4 — Settlement Splitting
Before — bare form
Original settlement splitting — bare form with no allocation visibility
After — stat row + allocation view
Redesigned settlement: stat cards showing Total Allocated, Remaining, Active Splits, Status
Before
Bare form: select bank, enter account name, enter number, enter percentage
No state visibility — no way to see what was already allocated
Merchants had to reconstruct the allocation picture manually
After
Stat row at top: Total Allocated, Remaining, Active Splits, Status
Merchant sees configuration health before opening the form
Remaining % and active count shown at a glance — no manual arithmetic
The stat cards answer the question every merchant asks before editing their split: "Is this already set up correctly?" The old interface forced them to read the full table to reconstruct that picture. The new one surfaces it immediately.

Product ownership, not just interface design.

My work at Payonus extends well beyond the merchant web app redesign. The most significant example is the CEMCS cooperative banking proposal — a self-service cooperative wallet platform with real NUBAN accounts, pitched to enterprise decision-makers as a B2B partnership opportunity for Payonus.

📋
Enterprise proposal process

Led multiple rounds of executive stakeholder revisions, producing PRD and PRS documentation, Q&A prep materials for C-suite sessions, strategic memos on fee allocation and withdrawal thresholds, and go-to-market strategy for the cooperative banking product.

🎯
End-to-end product ownership

Requirements gathering, executive stakeholder management, cross-functional documentation — not just interface design. Product management work delivered without a formal PM title, reporting directly to the CTO with expanded scope.

📊
Q3 OKR framework

Built the product organisation's OKR framework for Q3 — defining objectives, key results, and success metrics for the team. The first time structured goal-setting was formalised across the product function.

🌍
Brand & business development

Informally carrying brand, marketing, and business development leadership following a manager departure — managing an external content strategist engagement and supervising a marketing intern alongside design and PM responsibilities.

Introducing a discipline, not refining one.

This project was different from every other redesign in my portfolio because there was no prior design to refine. The work wasn't about improving an existing design system — it was about introducing the discipline itself: hierarchy, grouping, plain language, progressive disclosure, to a live regulated fintech product for the first time.

The most important outcome isn't any individual screen. It's that merchants now have a product that respects their intelligence, surfaces what they need to know without making them search for it, and uses language that explains rather than assumes. That's what a first designer on a product actually ships — not a redesign, but a standard.

🔑
What I learned

Designing for a regulated fintech without a design system forces you to be precise about every decision. Every component choice has to carry its own weight — there's no shared vocabulary to lean on. That constraint made me a better, more deliberate designer.

What this proves

I can operate effectively in environments where product management, design, and business development responsibilities overlap — and where there's no existing structure to inherit. I build the structure, not just the screens.

← Back to all work