Payment Gateway Ecosystem

Designing three connected products around every payment

A fintech product design case study connecting a payment gateway app, merchant panel and admin panel around payment processing, transactions and settlement.

Role: Mid UI/UX Designer, Zavisoft
Platform: Gateway app and web panels
Category: Fintech · Payments
Status: Three connected products

Problem

The challenge

Payers want to know whether a payment went through. Merchants need to distinguish a successful payment from money still awaiting settlement. Admins need to monitor activity and administer merchants. Each role sees the same payment from a different angle.

Solution

The approach

I designed the gateway application, merchant panel and admin panel as one payment ecosystem. The experiences cover payment processing, transaction management, merchant operations, monitoring and administration, with each role focused on its own decisions.

Show payment and settlement separately. A payment can succeed before its funds settle. Separate statuses make the difference visible in transaction lists.
Put fees and net beside the gross amount. Merchants can see the gateway fee and expected net without opening each transaction.
Keep context beside configuration. Store and EMI settings pair the form with a summary, helping merchants understand the configuration they are editing.
Make sensitive settings deliberate. Secret keys are masked, and webhook event controls use clear on and off states.

Outcome

Where it landed

The gateway app, merchant panel and admin panel form one connected system. Payment and settlement information uses a consistent language across payers, merchants and administrators.