Yellow Card Payment flow Redesign

Payment flows for Paga integration (Deposits and Withdrawals) in Nigeria
Usability testing
Yellow Card
Yellow Card Payment flow Redesign


Yellow Card is a  cryptocurrency exchange startup operating out of Africa, with a growing presence in  14+countries across Africa. The company’s main value proposition is making crypto more accessible in developing countries, and it does this by allowing customers to buy crypto with digital payments on their web and mobile apps.  

The Goal

Design flows for Paga integration (Deposits and Withdrawals) in Nigeria. Paga is a Nigerian payment service provider who facilitates sending & receiving money, remittances, buying airtime, & paying bills. They provide Yellow Card with a service to broker peer-to-peer payments for Naira deposits & withdrawals.


  • For compliance reasons, the customers should not use crypto related descriptions when making deposits or withdrawals.

  • The bulk of the payment process will not be carried out in app and that restricts the amount of control we have (Design-wise) once the customer is redirected to the browser.

Current bank transfer deposit flow

Old design flow for Yellow Card withdrawal

Ideas Considered

Design ideas considered

Our Implemented Solution

Feature Usability testing after launch

We wanted to test our hypothesis and see if our assumptions and initial solution worked for our customers.

Session goals
  • Find out if our customers are having UX problems with the current UX flow                
  • Learn how customers want the problems to be solved.
  • Get feedback from the customers on how they think we can improve the UX.


Design Improvement after usability testing

We changed how this screen is displayed, no more cards, we have simple lists now

that fit the new brand colors and UI aesthetics. There is now a (i) icon that they can

click on to see more information about the payment method.

We added a modal that shows up for first time transactors. This modal outlines all the actions

the customer would have to go through to successfully deposit. They can trigger this information

on their own at any time by clicking the (i) icon next to the payment method.

We made the following edits to this screen:

  • “Confirm” in the header copy “confirm” as the button copy
  • Took out the peer to peer reference, we didnt need it here after all.

We made the following edits to this screen:

  • Took out we found you a match and replaced it with “transfer money from your bank
  • Took out the tap to copy from their phone number narration pointer because they most likely know their phone number and do not need to copy it.
  • Decided to no longer threaten them with a failed transaction if they sent the wrong amount because support told me that they would get their deposit anyway
  • We changed the button text to say “done” because we said “do” in the header sub copy.

We placed a confirmation modal for them to confirm that they have done the bank transfer. Sounds like common sense right?

I asked the data analyst to track these screens and measure if people followed through better, but i left before i could analyze those results


  • In finance, the compliance and legal team are your best friends
  • Compliance and legal people do not care about the customers
  • Compliance and legal people are in too many meetings
  • Engineering should be your best friends (for real this time)
  • If you have a UX writer on your team, you have been blessed by the universe.
  • You are better off carrying out your usability testing at the prototype stage of your design


The launch led to over 50,000 customers signing up in the first month and over 150% increase in transaction volume in the first two months.