Redesigning Mobile Banking: “I don’t know what’s happening here”

In case you are reading this for the first time, for this quarter’s Rapid Ideation and Creative Problem Solving class, I am redesigning Bank of America’s mobile bank application.

For the last two parts of the assignment, I started by creating concept maps of the current and redesigned state of the mobile bank, this helped me visualize the complexity of the system. The next step was to come up with stories that introduced three users and scenarios where they would use a mobile bank app, all of them with different goals in mind: this was a scaffold for the first round of wireframes.

This week was all about usability testing and getting honest feedback from real users using the Think Aloud Protocol technique.

From my former set of wireframes, I integrated both the feedback that I gathered from my class peers and the one that I gathered from four different user testers.
The top three problems I found after this first round of testing were:
  1. The main menu was not easily perceivable
  2. There was confusion differentiating between Transfer, Send & Pay a friend
  3. Check balance menu should be easier to read and provide the necessary affordances to make it more actionable.

Tasks

With the wireframes we created last week, we came up with different tasks and asked our participants to complete them. If they felt really frustrated, they were allowed to quit – they are not the ones being tested.

The tasks provided were as follow:

Task #1:  What is the next payment due for your credit account?
Task #2: Pay your friend Ethan Baldwin $100.00 by Nov 15th for Basket Ball tickets.
Task #3: Deposit a $300.00 check to your debit account.

Problem Area 1: Check Balance

Problem Area 1

Task #1

“I just don’t see how “transactions” is going to take me where I want to go. I would like to go to details, but it’s not taking me anywhere. Yeah, I don’t know…” – User Tester #1

Problem Area 2: Main Menu

I built my mobile UI prototype with the iPhone components found on Sketch. This inspired me to add a redesigned bottom navigation bar with these same components. From my point of view, the bottom navigation bar is useful due to the proximity the user’s thumb would have to the main menu – also called “the friendly thumb area”.
But I soon realized that this feature presented a lot of problems:
 Screen Shot 2017-11-13 at 2.40.25 PM
“”Move Money” seems strange to me, what does that mean?” – User Tester #2
I tested the mobile app with two baby boomers and they both really struggled at comprehending that the bottom navigation bar was a menu, and what each of the options where – both also hesitated from randomly taping to look for more options.
From these group of users, User Tester #4 was not able to go past the list of accounts because he did not think the bottom menu was actionable. After the session (which he was not able to complete) he mentioned:
“I would like to see a first step that asks you what is the main action that you would like to take, and go  from there. Kind of like a tutorial” – User tester #4
For those users that were able to find the bottom navigation bar, the menu options represented another concern.  First, “Move Money” did not mean anything to User Tester #2, and as she struggled to accomplish Task# 3, I was able to observe that the reason why she was struggling so much was also because the option she was looking for actually fit to “Send / Request Money”. She did not take the time to go through the rest of the options where she could have found “Pay a Friend” – these options didn’t adequately map to the options she normally uses, and were misleading due to the word choice.

“I think I’m struggling with this system because I’m not used to it yet, but I know that a couple of days from now I will probably know my way around it pretty well. I don’t mind exploring and tapping” – User Tester #2.

Problem Area 3: Deposit Check

Screen Shot 2017-11-13 at 2.50.15 PM

“I would like to see a series of steps instead of everything on the same screen. Having all of this is overwhelming to me.” – User Tester #3

Iteration

After this first round of usability testing, I synthesized the findings and attempted to implement the changes to the application, but first, I started by modifying my initial concept map.

Revised Concept Map - Mobile Bank

With all of the feedback I received, I worked on a few suggestions to improve my current wireframes and added a couple of different ideas to the existing flow.

An example of this part of the iteration were the two following screens. One of them being the bottom menu where I opted to replace the icons with actual words.

Main Menu - Accounts       Home - What would you like to do?      List of Accounts

Next Steps

Unfortunately, there were several tasks that not most users were not able to complete due to the menu being such an issue. For this next round of usability testing, I will focus on figuring out how users react to the new menu concept. I will also be testing screens for Setting Recurring Bill Payments and Setting Alerts.