Yellow Card Payment flow Redesign

Payment flows for Paga integration (Deposits and Withdrawals) in Nigeria

Background

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.

‍

Constraints

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

‍

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.

You can see the USABILITY TESTING REPORT HERE

‍

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?

‍

P.s  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

‍

Reflection

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

‍