Bank of America mobile wallet

Platform: iOS, Android Mobile App

The purpose of Mobile Wallet is to create a single application focusing on payments, namely focusing on Person-to-Person payments and Secure eCommerce shopping. The focus on these two areas enables fast transactions.

Team:

1 UX Designer (me)

1 Project Manager

1 Visual Designer

2 Engineers

1 User Researcher

1 Product Manager

the challenge

We wanted to have a secure environment where Bank of America customers could shop online using a digital card.  They could also pay merchants in a convenient/secure way rather than the traditional method where their bank/credit card account numbers could be put at risk in a public setting.  

How could users shop online without their account numbers becoming compromised and pay merchants with just their app without giving them their credit cards?

My approach

Create “virtual online shopping card” that can easily generate accounts numbers, CVV #’s and expiry dates

When shopping online or at a store, there are risks that a customer’s account information will become compromised.  These concerns are ever so true with physical cards with permanent account numbers

To address these real concerns, we identified 2 factors

Utilize Proximity Payments technology to make P2P transfers at merchant locations

In order to accomplish these goals, I worked with a user researcher to conduct a usability study to test the designs’ effectiveness.

low-fi sketches

At first, I started to put my thoughts down on paper, so I came up with some sketches of key screens for online virtual card Home, Person-to-Person and Wallet features

research

Mobile Wallet Engagement Study

Study Details

  • Paper Prototyping 1:1 sessions

  • 45 minutes

  • Representative tasks were given to participants to complete

Participant Details

  • 10 participants

  • Ages ranged from 25-45

  • Performed online banking (not BofA) frequently

Primary tasks associated with:

  • Person-to-Person money transfer

  • Manage and maintain plastic and digital tokens

  • Enhanced KYC capabilities to speed up profile updates

  • View Deals

Main Findings

  • Users understood that their online virtual cards were linked to their bank card

  • Some users liked that the app would mask their actual account numbers with a tokenized account number

This is really cool.  This should be done with any credit card

  • There were some confusion over turning on their personas to be visible nearby

  • Users liked the convenience of deleting and or refreshing their entire account info of their online virtual cards

design explorations

Alternate designs considered during the ideation phase.

Alternate Design

Final Design

Sketch of an alternate Design

In the final design, I used a slider navigation for the main menu to make the page less busy by having the tab menu laid out on the screen

I wanted to differentiate this app from the bank of America’s main app by using a blue color palette for the app

We wanted users to view their balance info but we felt that this is considered secondary feature since they can get this info from the main app

Initial Wireframes

Mobile Wallet Home & Person-to-Person Payment

Manage Plastic and Digital Tokens

Home screen provides at a snapshot, the list of bank cards linked to user’s online virtual cards 

Upon expanding a card in home screen, users can refresh to get new account info (expiry date, account #, CVV)

Person-to-person payment allows users to send money following one screen at a time for select recipient, enter amount and confirm payment

Tabbed menu to navigate to Plastic or Digital tokens

Upon expanding a card in home screen, users can refresh to get new account info (expiry date, account #, CVV)

Person-to-person payment allows users to send money following one screen at a time for select recipient, enter amount and confirm payment

design recommendations

The usability study informed the final designs. Here are a few screens with some description of the updates based on the usability study.

Send Money with a Persona

In this scenario, user selects a persona to send with their payment to a contact

By enabling a persona to be visible nearby, users can easily send and receive money to the recipient

Make a Payment flow offers each step with a dedicated screen for easy payment capability

Persona Settings

I used card tiles for each section of the page as per material design patterns

Persona settings screen provided capability for location-based or time-based visibility status

By default, the location-based visibility is enabled and disabling it will enable time-based visibility

Wallet and Deals

There are 2 tabs across the top for plastic and digital tokens

Plastic tab provides standard card features you get from other card or wallet management features 

Digital tab provides tokenized account info and ability to refresh the online virtual card instantly with new account #, Expiry Date and CVV number

Deals page offers opportunity to opt in to deals that are linked to the users’ card purchases at participating merchants

Manage Virtual Cards

Snapshot of users’ bank cards linked to online virutal cards. Send/request money capabilities are provided in mobile wallet home.