Skip to content

Mobile payments | Shipped product

ZapPay: Mobile Payments & Financial Transactions Platform

I designed ZapPay's core payment flows: QR payment, recipient validation, transfer review, receipts, activity and savings pockets.

Payment interfaceQR payment · Recipient validation · Transfer review
ZapPay mobile app screens

PROJECT AT A GLANCE

The essentials.

Design scope
Payment interface
Available views
Activity · Savings pockets
Screen focus
Shipped interface
Covered here
Payment, receipt and account screens
Skip to project details

KEY DESIGN DECISIONS

Recipient, costs and receipt.

Three decisions shape how a transfer reads before and after the user commits to it.

01

Payment views

I split recipient selection, transfer review and the receipt into distinct steps, so each screen answers one question.

02

Transfer cost fields

Transfer review shows the fee alongside the amount and total, so the full cost is visible before the user confirms.

03

Receipt state

The receipt confirms the transfer state and repeats its details, giving the user a record once the review step is done.

Each of these decisions shipped in ZapPay.

Design
Question

Which recipient, amount, fee and status details are visible around the transfer action?

Design
Scope

I designed these core flows:

  • QR payment
  • Recipient validation
  • Transfer review
  • Receipt

Flow
structure

  • QR payment and recipient validation are separate steps.
  • Recipient validation confirms the selected account before amount entry.
  • Transfer review groups recipient, amount, fee and total in one place.
  • The receipt confirms the transfer state and repeats its details.

Interaction
details

  • Scanning or showing a QR code stays separate from checking the recipient account.
  • Users see who they are paying before they enter an amount.
  • Amount and fee are listed separately, so the fee is not folded into the total.
  • The receipt follows the review step as its own state.
  • Activity has its own view, apart from the payment flow.

Screen
Coverage

How the shipped screens connect.

Choose paymentEnter detailsValidateReviewConfirmReceipt

Pattern
decisions

Key structures in the shipped product:

  • Recipient selection comes before a separate transfer-review step.
  • Amount, fee and total are separate fields on transfer review.
  • Review and receipt are distinct states on either side of the transfer action.

High-Fidelity Screens
& Key Flows

Welcome — ZapPay screen
Sign in — ZapPay screen
Wallet home — ZapPay screen
Saved payment methods — ZapPay screen
Show a payment QR code — ZapPay screen
Scan a QR code — ZapPay screen
Recipient validation — ZapPay screen
Transfer review — ZapPay screen
Transfer receipt — ZapPay screen
Top-up receipt — ZapPay screen
Bill-payment receipt — ZapPay screen
Receive money — ZapPay screen
Transfer history — ZapPay screen
Transfer confirmation — ZapPay screen
Activity history — ZapPay screen
Savings pockets — ZapPay screen
Top-up methods — ZapPay screen
Withdrawal confirmation — ZapPay screen
Profile — ZapPay screen
Edit profile — ZapPay screen

Welcome

The welcome screen introduces the app before sign-in.

01 / 20

FROM THE PROJECT FILES

Inside the shipped product

Screens from the shipped product. Values shown are sample data.

Recipient validation

Recipient validation — ZapPay screen
Recipient validation displays the selected account before the amount step. View full-size screen

Transfer review

Transfer review — ZapPay screen
Transfer review places recipient, transfer amount, fee and total before the final action. View full-size screen

Transfer receipt

Transfer receipt — ZapPay screen
The receipt confirms the transfer state and repeats its details for the user's record. View full-size screen

What I’d Change
Next

Looking back, I'd place the recipient and total in one final check directly above the submit action, and have the receipt distinguish a submitted transfer from a settled one.