Bank of America App:

Bill Payment Workflow Redesign

Duration: June 2020 to July 2020

Role: Solo Project, Project Plan, Research, User flow re-design, UX Design

Tool: Adobe XD

Deliverables: Optimized user flow, hi-fi mockup

Research Method: Survey, Interview (Show-and-Tell)  

BofA_prototype.png

Overview

Bank of America has 10.58% of the market share in the bank industry (2019). With approximately 39 million mobile users, Bank of America should provide its users a simple, smooth, and easy using App. The App reviews, on the other hand, show the need for improvement of the bill payment feature. In this project, I redesigned the bill payment workflow to achieve a better experience.

The Problem

The current BofA application's bill pay function is lacking efficiency. Especially, the workflow contains unnecessary clicks, requires users to take inefficient action, and result in users’ confusion and dissatisfaction.

5-1.jpg
1-1.jpg
4-1.jpg

User Research

Survey: 

 9 questions focusing on how users are using BofA's 2 current bill payment methods. (30 participants)

Main result: 

  • 60% of participants prefer to use the “Transfer | Zelle” page vs. 16.7% of participants prefer to use the “Bill Pay” page.

  • For participants who don’t want to use the “Bill Pay” page, 73.3% of them chose the reason “I don’t want to go through the long payee setup process

  • 65.5% of participants pay “Current Balance” amount vs. 13.8% of them pay “Minimum Due” amount

Interview:

Contextual interview inquiry with 6 users.​ Tasks include asking participants to perform making a credit card payment using the two current payment methods.

Design Principles

  1. Allow users to finish the bill pay process in the shortest time.

  2. Help users to perform the bill pay process with fewest clicks.

  3. Let the application be helpful in the process. 

Workflow chart for the current two payment methods:

Payment Method 1: Transfer/Zelle method

transfer method.JPG

Payment Method 2: Direct bill pay method

bill pay method.JPG

Issues in current workflow:

 Issue 1 

The current application is not making useful features/elements visible and easy to find to users

Solution: provide a payment CTA button on homepage.

 Issue 2,3 4,8 

The current application asks users to perform unnecessary clicks and information input.

Solution: save previous selections, use default options, provide clickable options instead of asking for text inputs.

 Issue 5 

There is no confirmation step in the current workflow, which may cause mistakes.

Solution: add a confirmation page.

 Issue 7 

This step disappoints users by not allowing them to achieve the goal they expected after clicking the CTA button.

Solution: remove the set up payee steps and allow users to directly enter payment process.

New Workflow Design

The new workflow addressed the issues by simplifying the whole process of making payment, providing necessary information and options for users, and adding/removing steps according to user needs.

new design.JPG

Why this is a better solution?

1. Users get the information they need without opening new pages.

2. Fewer clicks and information inputs: removed unnecessary clicks.

3. Users are not required to set up a payee account to make payment. This fixed the most complained issue.

4. By having a confirmation page, users get a chance to confirm the payment they are making is correct.

Visual Design & Prototype

1.JPG

[Left] The payment CTA button allows users to enter the process directly from the home page.

[Right] The current amount is selected by default. 

2.JPG

Only users who need to change their payment account, amount, and time need to make these edits.

3.JPG

Added confirmation page to prevent mistakes. Show a summary page again at the end of the process.

Challenge

What steps are necessary for the payment process? What information is already available and I shouldn’t ask users to provide it again? Is this new design going to cause new issues? I kept asking these questions during the design process. It’s not too hard to find out the issues with BofA’s current design, but it is challenging to create a better version of it and solve the problems without causing new issues. I kept using the current BofA app to feel and understand the users’ feelings, and I changed the design based on the users’ two goals of using the bill pay feature: use the shortest and fewest clicks to finish this task.

Takeaways and Next Steps 

This project has been a great learning experience for me. I had the opportunity to work on it from start to finish, designing and conducting research, understand current user flows, and redesigning the payment process. 

Understanding more user’s needs through research and user testing would be my next steps. The current solution was made based on users’ behavior and emotion. It would be more helpful for me if I have data support to back up some of the design decisions.

I will also do more research to learn Bank of America's business strategy so I can align my design principles with the business's core value and growth path.