Case Studies > Payments

UX Audit & Redesign · Shipped

Payments Backoffice: Where Money Meets Usability Risk

A usability review and frontline-informed field study across 17 payment screens, from audit findings to a shipped redesign.

Screens Reviewed

Findings Documented

Payment Flows Shipped

Practitioner Scenarios

Role: Lead Product Designer · Status: Shipped

Methodology

// Screen review, usability review, simulated field research, AI-assisted cross-check

01 / SCREEN REVIEW

17 production screens walked through, including payment methods, transaction details, withdrawal flows, and the in-progress Lifecycle redesign.

02 / USABILITY REVIEW

Scored every screen against Nielsen's 10 usability principles, rating severity from 0 to 4. Found key issues in the payment creation and verification flows, several carrying real compliance risk.

03 / FRONTLINE-INFORMED SCENARIOS

3 frontline-informed scenarios based on observed workflow patterns, covering Tier-1 ops, a fraud analyst, and compliance. A starting point, ready to test with real users.

04 / AI-ASSISTED CROSS-CHECK

Ran the same set of screens through AI tools on their own, then compared what the AI flagged against the manual review. This showed where automated checks agreed with hands-on research, and where they missed things a person would catch.

Usability Findings// 12 findings across payment flows

Where money meets usability risk

Critical · 1

High · 3

Medium · 7

Low · 1

12 findings ranked by financial exposure and frequency. The critical issue, a Verified badge persisting on garbage bank data, represents live compliance risk.

Verified Badge on Invalid Data

critical

Free-text bank fields accept garbage input even after Verified status, breaking KYC/AML integrity.

Partial Amount Exceeds Approved

high

Partial amount can exceed the originally approved amount with no cap, a logically contradictory state.

Raw JSON Blocks Investigation

high

Transaction remark is an unformatted JSON blob. Agents hand-parse it to find auth codes under chargeback deadlines.

Misleading Withdrawal Action Labels

high

Withdrawal action labels are ambiguous. "Cancel" unclear whether it cancels the request or the agent's action; "Decline" unclear whether it rejects permanently or sends back for review. High-stakes confusion on money flows.

No Bulk Withdrawal Actions

medium

No bulk actions existed. Agents processed one withdrawal at a time, creating repetitive manual work and slowing high-volume shifts significantly.

Transaction ID Not Linked to Details

medium

Transaction IDs in the payments section are not clickable. Agents must navigate to the Transactions tab separately to view details. Breaks contextual flow during withdrawal review.

Icon-Only Action With No Label

low

Blue circular-arrow icon next to transaction rows has no tooltip or legend. New agents must guess or ask what it does. Recognition over recall violation.

Practitioner-Informed Scenarios// 02 — Field research

Practitioner scenarios

Three practitioner-informed scenarios modeling what live observation would surface, a hypothesis set for validation with real ops teams.

Ana — Payments / Cage Agent

Processing pending withdrawal requests at shift start

“I process withdrawals one by one, and every time I hit 'Cancel' I have to pause and think: am I cancelling the withdrawal or cancelling what I'm doing right now?”

Marko — Fraud & Risk Agent

Investigating a declined deposit flagged for review

“Every investigation starts with me un-mangling this JSON before I can even start the actual investigation.”

Ines — AML & Compliance Officer

Verifying a wire transfer account before large release

“Verified just means someone clicked the button. It doesn't mean the data was actually checked.”

Shipped Redesign

From audit findings to a shipped redesign

The Lifecycle timeline, a structured, scannable, timestamped event history, replaced the opaque JSON blob and shipped first. Agents reported faster scanning right away. The critical verification gap and the high-severity action-label issues were fixed alongside it.

01 / SHIPPED FIRST

Capped partial amounts at the approved total. Validated bank fields before Verify. Clarified withdrawal action labels (Cancel/Decline) with explicit outcome descriptions.

02 / SHIPPED NEXT

Extended the Lifecycle pattern to transaction remarks. Introduced bulk withdrawal actions to eliminate one-by-one processing.

03 / VALIDATED WITH AGENTS

Collected feedback on the redesigned flows through rapid prototyping. Confirmed the new action labels and payment lifecycle read clearly to ops agents.

→ Key result: the highest-leverage change shipped first. The Lifecycle pattern (rated Positive in audit) resolved the raw-JSON problem and most scanning-speed issues in one move.

Payments · Redesigned Screens