UX Study: Bank of America Credit Card — Payment Flow
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
Inventory of pages
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
PNC Virtual Wallet
Petal
CitiBank
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 😵
Pain Point #2: Critical payment information does not stand out and is confusing at a glance 📅
Paint Point #3: Account Overview and Account Detail have redundant information 😩
Pain Point #4: Payment call-to-action is not always clear 👉
Pain Point #5: In the Payment Center, you can’t view your current balance in order to pay off in full 🙈
Pain Point #6: After making a payment and going back to Account overview, the outgoing payment is not reflected at all 🚫
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.
New User flow ✨
Wireframes 🔖
Prototype 💻
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 ✅
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 ✅
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 ✅
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 ✅
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 ✅
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 ✅
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?