Mobile Wallet

Bank of America

Expertise: Mobile Design, User Research, eCommerce

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

MY ROLE

Mobile Wallet was borne out of the need to focus on 2 areas to enable fast transactions.

  • Person-to-Person payments

  • Secure eCommerce shopping


My role was a UX/UI designer for this project with the task of sketching some key screens, wire framing the structure and flows and creating the final UI designs.

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?

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

A usability study was conducted on the prototype to better understand user engagement and effectiveness of the prototype with regards to person-to-person payments and virtual shopping card.

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

WIREFRAMES

Mobile Wallet Home & Person-to-Person Payment

Manage Plastic and Digital Tokens

USER FLOW

After the wireframes, I developed a prototype. I presented the prototype to the stakeholders and got buy-in from stakeholders.

FINAL DESIGNS

Based on user research and discovery sessions, I developed the final designs, where I used a blue color palette to distinguish it from the main BofA mobile app.

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.