Bank of America Mobile App Makeover
FinTech UX case study, hypothetical project
Tools: Figma, Illustrator
Let's See if Existing Bank of America App Needs a Makeover
Unlike any other metric, the Total Available Credit has a graphical representation. And colors seem to be backward. It looks like I don’t have any credit left, when in fact I’ve only used a small portion of it. And why there’s a Shopping Cart icon on a banking app? Especially when you also have Products in the bottom nav.
As you can see on these screens posted side by side, app sections don’t have uniform look and feel. This red tab element with the bank name must have come from an older version of the app. At least, this is how the phone is shown on BofA website.
Scrolling galore: shown here is how long the home screen is, compared to the 3 main competitors.
So, I would say “Yes”, this app could use a makeover. Many of the bank customers seem to agree.
Pain Points Pulled from User Reviews at GooglePlay Store
“…This app is very confusing for an average person to use or navigate. Redundancies are prevalent. Too many offers for credit or lending. Neither of which interests me…”
“…Getting there but still too many ads. I am a customer already. Don’t need to be bombarded every moment with more ads. After my last review, I got an updated version. Now even more ads and an additional screen to close when exiting the app…”
“…Arranging for reward redemption requires too many less than obvious steps. You have to X out of a screen after seeing a message (not use your back key), then shoot the amount up like a pinball game. It’s cute, but commit the steps to memory or you get stuck in a loop looking for the pinball game type tool…”
“…The banking aspect is fine, perfectly clear. What is irritating is the amount of clutter on the site. I don’t need Bank of America to remind me of how much I am spending or to offer unsolicited advice. My other bank statement is a glorified spreadsheet, very simple…”
Conducting Competitive Analysis
Competitors’ apps appear to be more organized and better thought through, with all products and services grouped under 2-4 menu tabs. The main interface feels more like a native app, as opposed to a responsive webpage where you do a lot of scrolling to find a particular item.
Defining User Personas
From Research to Design Decisions: Optimizing Navigation Menus
Creating a Sitemap
Building a UI Kit
During the whole ideation stage, I kept organizing my components into a UI kit. The design library helps to streamline the process and create a product without worrying about consistency.
Wireframing
A banking app is like an ATM in your pocket. You use it to view your balances, deposit checks, transfer money, pay bills, open and/or manage accounts. Everything else should not take prime real estate. Users should be able to check current offers and deals AFTER completing whatever tasks they opened the app for. With that in mind, I put together a wireframe.