Bank of America: bill pay

Think you’ve heard of bill pay? It may be time to reconsider. Introducing an all new, seamless version of bill pay with less steps than ever before. Paying your bills has never been so easy!

Role: sole UX/UI designer

Duration: 75 hours

Software: Figma, FigJam

Why the Bank of America app?

Despite the Bank of America app having overwhelmingly positive reviews on the App store, users are still frustrated by certain aspects of the platform. Namely, paying off credit cards and the “bill pay” function are not user-friendly, according to multiple reviews on the App store.

Let’s go on a little journey…

What do I know from research?

I conducted a competitor analysis first, to learn more about the user complaints regarding the BoA app, as well as gather data on my competition. Afterwards, I ran interviews to hear first-hand stories of users experiencing these issues and explore solutions.

How do other banking apps compare?

I looked into apps from four notable banks to see where the Bank of America app stands in comparison. This would help me understand if I should solely focus on solving apparent issues, or also consider creating features that its competitors may have.

My key findings were as follows:

  • Amex and Chase have the best overall UI; users note the apps’ simplicity and intuitive interfaces

  • CitiBank and Wells Fargo both struggle with technical issues and poor customer service

  • Bank of America has the most negative reviews, by far, on the “bill pay” feature; users complain about # of clicks to locate the feature and its lack of intuitiveness and organization

What do my users think?

Although my sights were focused on the Bank of America app, I wanted to interview users who were familiar with other banking apps as well as those who primarily used the BoA app for banking. Speaking with users experienced with multiple banking apps would potentially give me insights on solutions to explore.

I was also wary of targeting the “bill pay” feature in the interviews, as I wanted to gain a well-rounded understanding of my users’ banking app frustrations, and see if the feature was brought up organically.

I interviewed 6 participants, between the ages of 23-57, via FaceTime.

The key findings and frustrations I gathered were:

  • My users most frequently use banking apps for: checking balances, transferring money, sending/receiving money, and paying bills

  • 100% of my users who use the BoA app note that the interface isn’t the most intuitive and it can be difficult to find some features

  • 3 of my users are reluctant to explore features they’re unfamiliar with (not opening a credit card due to lack of experience, avoiding “bill pay” feature due to confusion and/or unfamiliarity)

So…who are my users again?

I created 2 user personas as a quick way to ensure that, through the duration of the project, I never forgot who my users were.

Alright, what now?

Having confirmed that the “bill pay” feature was the most significant issue affecting users on the BoA app through my secondary research and user interviews, I was ready to synthesize my findings into a problem statement and a few questions to consider.

Problem Statement

I would like to reduce the friction of using the “bill pay” feature on the Bank of America app, because of the difficulty users have locating and using it.

How might we reduce user frustration when trying to locate a payee in “bill pay”?

How might we make it easier for users to locate the “bill pay” feature?

How might we create a more secure experience for users submitting payments?

Honing in on my priorities

After synthesizing my research, I started brainstorming solutions and created a user flow to reflect it.

Although this flow didn’t necessarily reduce the number of steps in bill pay, it simplified the process by placing it directly on the homepage and guiding users through the procedure. This ultimately provided a solution to my users’ main frustrations with locating and using bill pay.

Never having used BoA’s bill pay feature myself, I wanted to be sure that I was depicting the new steps in a way that was realistic and accurate to the live app.

Before moving on to the next step, I walked myself through a similar feature in the app (money transfer).

I revised my user flow, realizing that the ability to “edit” before completing the process negates the possibility for an error path.

Making my ideas a reality

Sketch time!

I sketched out two wireflows, to reflect both paths of my user flow: user selecting “my payees” or user selecting “all payees”:

My payees flow:

All payees flow:

Let’s digitize these screens, shall we?

How did we get here?

Testing my users…

Notably, the digitized frames look quite different from my sketches. I used my sketches to conduct user testing, to double check whether my ideas were in line with my users’ needs and expectations.

Testing was conducted with the same 6 interview participants, via text for time and efficiency purposes. I reminded them of the project background, and asked if the sequence of steps was intuitive or confusing and why, as well as any other relevant feedback.

The feedback and suggestions I gained from testing were:

Feedback

  • 6 of 6 participants found the flows intuitive

  • 3 of 6 participants were confused about the meanings of “my payees” vs. “all payees”

Suggestions

  • add in “request e-bills” & automatic payments features in bill pay

  • show most recent payees on bill pay homepage to negate need for “my payees” page

  • include summary of recent activities & shortcuts to other features on bill pay homepage

  • allow users to make decisions on singular page to reduce number of steps

Time to bring the test to life!

Now that I had heard from my users exactly what they wanted from my screens, I created a prototype for usability testing to further guarantee that their expectations were being met.

Let’s get to testing once more…

I conducted usability testing with my 6 participants, 5 via FaceTime and 1 in-person. I took notes as they completed the test, and gathered data with the following success metrics:

  • click path

  • observations (behaviors, areas of confusion, etc.)

  • major quotes

  • ease of use (1-3 scale)

Task: Complete a scheduled payment to Georgia Power via bill pay

The test results were as follows:

  • 6 of 6 participants completed the task with ease

  • 3 of 6 participants were confused/hesitant when navigating the bill pay homepage

  • 3 of 6 participants were confused about the nonfunctional “radio buttons” on the payment info page

Making the final iterations

After usability testing, I made some high priority revisions, including fixing certain UI elements to create the design most aligned with my users needs and expectations.

After

Before

Bill pay CTA replaced with “most frequently used”

  • user feedback that bill pay shouldn’t be default CTA; it’s not the most frequently used feature

  • user need for efficiency and friendly UI with clear navigation and accessible features

Smallest text enlarged (12px from 10px)

  • user feedback that text was small/hard to see

  • increases accessibility for vision impairments

Before

After

“New to bill pay?” button added

  • user feedback that bill pay may not be intuitive to new users

E-bills icon given notification & terminology changed

  • user insight that e-bills section contains payments actively due (vs. autopay; requires no immediate attention)

Payee card converted to accordion & info changed

  • user feedback that users should have option to choose account to pay bills from

  • user insight that BoA’s site allows all payments to be made from one page; no extra steps/pages

  • user feedback that previous payment info helps users not overpay bills

  • “edit” button replaced “add new” button; allows users to add/delete payees from same page

  • user need for reduced number of steps/pages

Before

After

After

Before

Card information altered

  • user insight that account number is only required when user pays someone for the first time (i.e. unnecessary on review screen)

  • bank account moved to top of screen to allow for subsequent cards with specific payee payment info

  • “date” changed to “payment date” for specification

  • user need for clear communication

Text altered

  • terminology changed from “$ sent” to “payments scheduled” for clarification

  • “confirmation email” changed to “confirmation”; double use of “email” is redundant

Ready for the most seamless bill pay experience of your life?

My learnings

This project highlighted the significance of testing designs every step of the way. Despite thinking I was properly addressing my users’ frustrations and expectations with my designs, user testing showed me there was still work to be done.

This experience also emphasized the significance of efficient time management. Iterating on my sketches took a lot less time than revising digitized screens. For this reason, I like to ideate as much as possible on paper, so that when I get to the digital stage, iterations don’t consume an overwhelming portion of my time.

Impact

Through my research and testing, I was successfully able to provide a solution to one of Bank of America’s most major user complaint regarding the “bill pay” feature. I not only reduced the number of clicks and pages users have to navigate, but I also improved the UI for increased learnability and accessibility.

Where do I go from here?

  • conduct usability testing with my final prototype to ensure all user needs and expectations have now been met

  • implement adding a payment confirmation page to every payment feature in the Bank of America app to improve app’s overall UX

  • run further user interviews to see if the simplified process/dropdown menu should be expanded in other areas of the app