UX Study: Bank of America Credit Card — Payment Flow

CALEB AMESBURY
Oct 25, 2019 · 6 min read

Current web app analysis 🔍

For this study, I will only be looking at the web version of the product. For a full in-depth study, I would need to analyze the mobile web and the native app. As a current customer, I know that these experiences are not one-to-one.

Payment Flow

Image for post
Image for post

Inventory of pages

Image for post
Image for post

Persona Interviews 📝

After analyzing the product, this would be a great time to host persona interviews. Personas would be identified with the help of stakeholder's knowledge and analytical user data. I’m assuming information like age, location, products, and even economic brackets could be determined from signup and account data.

Interview questions could include,

“How many other B.O.A. services do you own?”

”When do you like to pay off your credit card?”

“How often do you like to pay off your credit card?”

”What device do you usually use to make payments?”

“Have you had any difficulties making a payment?”

“When and how often do you check your credit card balance?”

“Have you ever missed a payment? How does that make you feel when you miss? Is it typically your blame as to when you miss a payment?”

“Do you currently know your next statement due date?”

“How does it feel to avoid interest payments?”

Competitive Analysis 🎯

Ideally, I’d like to compare apples to apples, but I only have access to one credit card web portal. I was forced to check out mobile apps for inspiration.

Apple card

Image for post
Image for post
Image for post
Image for post

PNC Virtual Wallet

Image for post
Image for post

Petal

Image for post
Image for post

CitiBank

Image for post
Image for post

Defining the problem 🚩

For the sake of this exercise, I’ll use myself as a sample persona (since I am actually a user) to discover some pain points. Using multiple persona’s interview data you could see overlapping similarities and evaluate critical pain points and repeated friction.

Pain Point #1: Pages are cluttered and difficult to navigate 😵

Image for post
Image for post

Pain Point #2: Critical payment information does not stand out and is confusing at a glance 📅

Image for post
Image for post

Paint Point #3: Account Overview and Account Detail have redundant information 😩

Image for post
Image for post

Pain Point #4: Payment call-to-action is not always clear 👉

Image for post
Image for post

Pain Point #5: In the Payment Center, you can’t view your current balance in order to pay off in full 🙈

Image for post
Image for post

Pain Point #6: After making a payment and going back to Account overview, the outgoing payment is not reflected at all 🚫

Image for post
Image for post

Ideating Solutions 💡

Reviewing the interview data, competitive analysis, and pain points, it’s finally time to ideate. I used an affinity diagram to start coming up with possible solutions. Even if they aren’t great ideas or contradict each other, it’s good to get them out and on the list.

Image for post
Image for post

New User flow ✨

Image for post
Image for post

Wireframes 🔖

Image for post
Image for post
Image for post
Image for post

Prototype 💻

Image for post
Image for post

Above is a 30-second preview of my interactive prototype. The prototype is using a mid-fidelity wireframe based on the whiteboard sketches.

You can view the live InVision prototype here,
https://invis.io/XGUJPMS7TEB#/390417640_Manage_Accounts_5

Addressing pain point #1 ✅

Image for post
Image for post

The login screen had a lot of marketing clutter. Using very similar screen real estate and a horizontal pushed down layout, we can create a much clearer call to action.

Addressing pain point #2 ✅

Image for post
Image for post

Creating visual hierarchy and thinking through a user’s flow made transformed this hide and seek table into a fun interactive experience.

Addressing pain point #3 ✅

Image for post
Image for post

Creating a slimmer always visible account drawer reduced an entire page that had redundant information. Now, I’m assuming the average user only has ~3 accounts. For users with many accounts, we might need to create a text list or drop down, etc. when you reach a certain threshold.

Addressing pain point #4 ✅

Image for post
Image for post

By giving payment so much real estate on the screen, we are making this common task top level. There are no extra clicks or screens to begin the payment process.

Addressing pain point #5 ✅

Image for post
Image for post

We solved this issue with multiple solutions. You can view your balance on the left because you are not leaving the screen, and the balance is repeated in a “pay in full” button for convenience.

Addressing pain point #6 ✅

Image for post
Image for post

Paying off balances are no longer a mystery. They are now celebrated with fun illustrations and tone. The balance is reduced in real-time with a note that this balance is “Reflected pending”.

Test Wireframes and iterate based on feedback 👪

At this point, it would be great to get feedback on the prototype from actual users. Taking that feedback, I could make changes and improve flow or layout to make an even better experience.

Conclusion 📓

There are still many questions to consider for this concept,

  • How will this new layout effect marketing sales? Will the new simplified experience offset the lack of advertisement success?
  • Are there other high priorities other than paying off a credit card we have neglected?
  • This is a drastic change for a commonly used flow. Can will we accommodate the new rollout gradually?
  • Is BOA intentionally adding friction to paying off my balance? Are there dark patterns at work here to keep me from paying my balance and using my rewards?

Some ideas to test the impact of this new payment flow

  • There should hopefully be a change in global reduction of late payments
  • Speed of transactions on the account should be increased
  • Track which method customers are choosing to pay their balance. Does it have any effect on their previous behaviors?
  • Is there a reduction in customer service calls for this page?
  • More customers paying off their debt and avoiding interest should create a much more positive NPS?

You made it to the end! thanks for reading! 👋

My Design Journal

My creative epiphanies

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store