Design Solutions for Your Brand
 

Money Transfer App

 
bicycle-bike-blur-1251855.jpg

About the App

The client I worked with has an application that allows users to send money to loved ones internationally. Users can complete a transfer in less than 30 seconds and pay with their bank account or any US debit card. Receivers in their 15 active countries across Asia and Latin America can collect the money at available cash pickup locations or directly into any bank account in minutes.


Approach: User research | wireframes | low & high-fidelity prototypes | final presentation

Duration: 48 Hours

Phone.png

Problem #1 | Loyalty Program

The client is considering adding a loyalty program to the app with the goal of being top-of-mind when users are considering which app to use to send money abroad. The structure of the loyalty program will be for customers to get their 5th transfer free. The team is unsure how to introduce the new program to its users.


The Work

Provide four high-fidelity wireframes for introducing the Loyalty Program to new and existing users.

Red.jpg

Introducing the loyalty program to new users

 

Onboarding Screen

The client currently has four onboarding screens for new users who launch the app. I suggested including an additional screen promoting the loyalty program.


Introducing the loyalty program to existing users

After a user does an app update, a notifier will appear informing the user of the new feature.

When a user clicks on the Star icon located on the homepage, the user is taken to a screen where they can learn more about the loyalty program.

As a user continues to send transactions, the Loyalty Program page tracks the number of transactions they have left to earn their one free transfer.

Problem #2 | Drop Rates

One of the application’s highest drop rate percentages occurs when users are verifying their phone numbers.


The Work

Propose solutions for decreasing the drop rate percentage for users on the Verification Phone Number page

Red.jpg

Current Verification Phone Number Page

Once a user has entered their name and phone number, they are given a confirmation number to verify their mobile number.

Issue: If a user types an incorrect phone number, there is no simple solution for the user to go back to edit the phone number once the verification code has been sent.

Users are forced to click on the hamburger menu at the top left side of the screen and start all over, leaving them confused and frusturated.

Issue: When a user enters the verification number, the app doesn’t allow enough time for the user to make a correction if they enter an incorrect number. The app automatically sends an error message, forcing the user to send another verification code to their phone number.


 

Once a user selects OK, they are forced to resend a new verification number to themselves.

If they still need to change their phone number, they are still forced to select the hamburger menu in the left corner of the screen and start the process over again.


Proposed Verification Phone Number Page

Solution: I replaced the hamburger menu with a back arrow in the top left corner of the screen. This will allow the user to simply go back to the previous page and reenter their correct phone number.

Solution: I included a disabled Continue button to inform the user that an action must be taken for them to proceed to the next step.

Solution: As the user enters the verification number, the Continue button stays disabled.

The back arrow is still present if the user discovers they have entered the wrong phone number.


Solution: Once a user enters six digits, the Continue button will turn bright red, letting the user know they can proceed with their account setup.

If the user discovers they included an incorrect number, they can change the verification number any given time before selecting the Continue button.

Solution: When the user removes a number, the Continue button disables. This let’s the user know they have not entered the required six digits, therefore they cannot proceed.


Solution: When the user enters all six digits, the Continue button turns red again. If the user is certain they have entered the correct verification number, they can select the Continue button to proceed.

Problem #3 | Drop Rates Cont.

The application’s second highest drop rate percentage occurs when users are selecting a delivery method when sending money to their loved ones.  


Propose solutions for decreasing the drop rate percentage for users on the Delivery Method page.

Red.jpg

Current Delivery Method Page

A user can select which receiver they want to send money to.

Let’s say we want to send money to Lauren.

Proposed Delivery Method Page

Solution: Using profile images for contacts helps the user identify which person to send money to without having to read different names.


Current Design

The user can select the following three options:

  • Cash Pickup

  • Bank Deposit

  • Debit Card Deposit

Proposed Solution

Solution: Keeping the receiver’s profile picture and name present on this page helps ensure the user is sending money to the right person.

Let’s select Debit Card Deposit.


Current Design

Issue: When a user clicks on the X, the application takes the user to this screen. This screen has zero information on it causing the the user to become confused what to do next.

To go back to the method of payment page, the user must select the back arrow in the top left corner.

The addition icon in the top right corner takes the user back to the 16- digit Mexican debit card page.

Proposed Design

Solution: Remove this page


Current Design

When a user selects the Debit Card Deposit, they must enter their 16-digit Mexican debit card number.

Issue: If a user wants to go back and select a different method of payment, the only option they have is to click the X in the top left corner, forcing them to completely start over.

Proposed Design

Solution: I created a long entry box with four sets of zeros next to the debit card icon to represent how many numbers are required for this field. This visual representation is similar to other existing debit card collectors. These visual elements help the user know what actions are necessary without having to read all of the content.

Solution: Similar to the solution for the Verify Phone Number Page of this assignment, I included a disabled Continue button that informs the user that an action must take place for them to proceed to the next step.


 

Proposed Solution

Solution: When a user enters 16 digits, the Continue button will turn bright red, letting the user know they can proceed with their account setup.

If the user discovers they included an incorrect number, they can change the number at any given time before selecting the Continue button.