Fintech UX Case Study: Bank of America App Makeover - Radik Shvarts, Graphic, Visual, and UI Design

FinTech UX case study, hypothetical project:

Bank of America Mobile App Makeover

Tools: Figma, Illustrator

Bank of America is one of the “Big Four” banks in the USA. Established at the beginning of the 20th century, BofA enjoys a certain level of brand loyalty, with some households patronizing this bank for generations. Naturally, one would expect a reputable bank like that to have a top-notch website and mobile app, but Bank of America’s presence in the digital realm is rather lacking. Their website and app seem to be built in the simpler times before UX considerations became the norm. And, according to customer reviews of people who have been using it for years, since the launch of the mobile app, it went through a number of rounds of improvements. As I understand, that added to the problem, resulting in many inconsistencies nested on top of questionable product decisions.

Let's See if Existing Bank of America App Needs a Makeover

When you first open the app, you get greeted with a License Agreement. The message doesn’t look friendly. In fact, it looks like a malware warning.

Once you’ve registered, you come to the Login screen. The page balance would improve if the hero image was made larger. And Login modal could be more defined. Note, that 2 out of 4 promo buttons present you with these choices: one invites you to open an account, another – to open a SAVINGS account…

When you sign in to the app, the first things you see there are: 2 (two!) rows of nav icons, a search bar, and a section with some money management plan and offers. As a result, your account info gets pushed down out of the viewport, you have to scroll up to see it, especially if you have more than one account.

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.

Some navigation issues worth mentioning: For some reason, “My Card” is found in both the top and bottom nav. The top one remains active even when you move to Dashboard or Products sections using the bottom nav.

Neither nav is present in some of the sections. The phone ‘back’ arrow takes you to the previous screen in some sections, but in most of them, it works as another Sign Out button.

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

Rayana Cobb

IT Recruiter. Philadelphia, PA

Fitness freak and a sneakerhead. Spends most of her day online. Familiar with the concept of “good UX”. Financially savvy, an avid listener of money podcasts.

Goals: Easily transfer money to pay for rent and utilities.
Frustrations: The app is not aesthetically pleasing, navigation is not intuitive.

Gordon Stevens

Safety Engineer. Mattville, NC

Likes long walks with his dog and historical dramas. Pays house and car loans, puts some money aside every month for his kid’s college education.

Goals: He only uses 2-3 functions of the app. For more complex transitions he prefers using his PC or going to a bank branch.
Frustrations: It takes too many steps to review recent transactions and check on the status of loans.

Linda Crain

Catering Manager. Denver, CO

Likes biking and making her own kombucha. Manages a small catering business, usually has several checks to deposit at the end of the day.

Goals: Posting checks to a business account.
Frustrations: App navigation and user flow are very different from other apps she uses for her personal banking and budget management.

Miguel Romero

Car Mechanic. Bell Gardens, CA

Likes fishing and leather-working. Only uses the web and apps to talk to his kids on Skype and to pay his bills.

Goals: Uses app to check balances and pay bills.
Frustrations: Because payment confirmation is not instant, on several occasions he paid the same bill twice. Had to call Customer Service to resolve it.

From Research to Design Decisions: Optimizing Navigation Menus

After reviewing the options offered by the current Bank of America app, and analyzing users’ pain points, I’ve decided to limit the number of primary tabs to three: Accounts & Credit Cards, Services & Offers, and Profiles & Settings. These choices don’t feel overwhelming and give a familiar category breakdown with an easily manageable number of sub-menu items for each tab.

Creating a Sitemap

For this and the following steps I used Figma.

Building a UI Kit

During the whole ideation stage, I kept organizing my components into a UI kit. A 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.

Designing Low Fidelity Mockups

To ensure the most accessible and clearest UX I’ve decided to include text next to the icons where ever possible.

Designing High Fidelity Mockups

When styling the app, my goal was to amplify the Bank of America branding by using national flag colors and bold contrasting elements.

Lessons Learned

Working on a hypothetical project presented me with some additional challenges during the discovery and testing stages: due to lack of resources, I wasn’t able to conduct extensive user research. To make up for that, I spent days studying a range of problems Fintech UX designers work to resolve. I believe this groundwork paired with a holistic design approach helped me to build a strong foundation for a successful product.