Send money to your loved ones through your phone.
Diego Valencia
UI/UX Product Designer
Made with

Send money to your loved ones through your phone.

4 mins read

"Admittedly I can say I have never worked with a designer who can delivery the quality of work I have seen Diego produces. This guy is one of a kind when it comes to his design mind. We are lucky to have him as our lead product guy because in truth his so well rounded that he can work on mobile-web, desktop-web, mobile apps (both ios and android), admin portal, email templates etc I can go on. You normally dont find designers who can delievery quality work across this range consistenly. Thanks for being part of this team."

-Windsor Kitaka, CEO

Overview

I partnered with TransferX to create a solution for africans to receive and send money effortlessly from their phones.

The first approach is allowing africans in London transfer money to Uganda since it is very painful for these people send money back home due to the large paperwork they have to fill up and the large fees agents charge. After MVP, they’ll be moving to other countries in Africa, Europe and in the Latin American market.

My Role

When Windsor (TransferX founder and CEO) approached me, they already had an idea of how the app would work and there were wireframes in place. We started from there to define the flows, experience and interface of the app.

Although I took the leadership on this project, there were some constraints in terms of design. I had to maintain the the main structure of the app since it was already built by developers, therefore changing any major aspect would affect the whole development and delay MVP launch. 

I came in and suggested a few changes and brought considerations they weren't having before that impacted the experience of the product. I was responsible for the entire user experience and interface of the product, including auditing what they already had, create a new user flow along with wireframes and prototype to test it to real users and potential investors.

Recipients and Settings view

Recipients and Settings view

Redefining the user flow

The main problem we were trying to solve was the inconvenience users face filling up forms when they want to send money back home. We wanted to create the fastest way to do that. 

As time was one of the constraints, I studied the content for each screen to skip the wireframe phase. That approach helped me to move way faster and make sure the purpose was fulfilled. 

The new user flow for the app. I maintained most of what they had but added some new screens and flows they were missing that impacted the whole experience.

The new user flow for the app. I maintained most of what they had but added some new screens and flows they were missing that impacted the whole experience.

Send money to your loved ones through your phone.
Landing screen after onboarding

Landing screen after onboarding

Based on research, users want products that relate to themselves. We are keeping this type of images throughout the whole product (emails, app, website)

Personal details form

Personal details form

Signing up

We ask for personal details as well as login credentials. Also we ask for them to set a 4-digit PIN to ensure security since we're dealing with sensitive information.

Activity

The information that matter the most when it comes to a list of transfers: recipient, status and amount.

I decided to specify colors for the status: red for declined, yellow for pending and green for completed. This status applies for one-time transfers only. Recurrent transfers just have the recipient, amount and the due date.

A 'make a transfer now' icon is placed on the top so it is always faster to make transfers.

Make a transfer

Based on user interviews, they're more likely to go through a payment process when is divided into steps rather than all the inputs in a single screen. 

We have a 4-step flow which is easy to follow for them:

  1. Select recipient or add a new one.
  2. Indicate the amount you'll send.
  3. Pick a card you want to send money from or add a new card.
  4. Write a message if needed.
  5. View a summary of the transaction and submit.

For regulation purposes, the app needs to ask users to confirm their CVV at the end of the process.

Transfer date view

Transfer date view

Send it now...or not

Users are able to decide whether they want to send the transfer right now or later. Date options appear but they can select a custom date if they want.

Setting up the recurrence of the transfer

Setting up the recurrence of the transfer

Make it recurrent

Users can set a recurrence for this transfer so that they won't fill up all the information again.

Just pick the frequency in which they want to send the transfer and the end of this recurrence. 

Single recipient view

Single recipient view

Recipients

Users can view all the recipients they've registered in the app. They can also add a new one.

After having clicked on one, they'll see their details and the transfers they've made to them.

A 'make a transfer now' icon is placed on the top so it is always faster to make transfers.

Extra layers of security

Levels of verification

This adds layers of security not only for users but for the business too.

The app has levels of verification that allow users complete different things within the app. Mainly in the MVP, verification levels allow users to send higher amounts of money. The higher the verification level the higher the amount they can transfer.

It has three levels and their availability depends on the complexion of the one before. The first one allows them to send 750 pounds per year and consists of the verification of their email and phone number.

Verification process for level 2

Proof of ID and address

Users need to upload proof of address and proof of identification. The app asks users to submit either ID or passport and an image of any bill or document issued to their house.

These images go through a verification process and users can see the status at any time.

Aditional screens