Navigating a Banking App

After presenting my wireframes for the Wells Fargo banking app last week, I immediately realized how stunted my thinking was in redesigning the system. You can tell by a quick comparison of the Existing Info Architecture Map with the one I redesigned that, embarrassingly, not a lot had changed.

Map Comparison

The second version of the information architecture map came from some of the feedback my classmates offered, along with what I noticed while conducting user-testing.

The main pain points I focused on were navigation. My classmates pointed out that it was confusing, and there was too much going on. The menu housed far too much information and the tab bar at the bottom needlessly repeated the menu. However, one of the big takeaways from user-testing led me to believe that the menu drop-down panel is a valuable tool for users to help orient themselves when they want to jump between sections. Given these two pieces of feedback, I decided to keep the menu, but pair it down to only the separate “sections” of the app a user would want to visit.

Wells Fargo Information Architecture Map

The core functionality of transferring money and paying bills, is now found on a tab bar on the “home” page. The Account Summary functions as the home page, and all the users I tested with appreciated the ease of seeing their account balance right away upon login.

log in V2

I decided to keep the swipe option with each type of account since it allows a user to quickly perform functions directly related to that account. You’ll notice the tab bar also offers functions related directly to a users accounts, but these buttons will bring the user to a section with all the related functions.

Pay a bill flow

At the bottom of each subsequent page under the “Transfer and Pay” section, the user can jump back to the transfer and pay “home” section.

If a user were to navigate to a section user the drop down menu, they might choose to go to “security”, and it would have a very similar structure.

All the menu item sections are set up in this way. The “customer support” section is nice in that some of the parts link to and support each other. Like how “locations” and “make an appointment” are linked as illustrated below.

Customer Support Flow

The “contact” section under customer support allows the user to either call or chat with Wells Fargo. The “chat” portion could use some help with styling and I’ll be seeking some feedback on this part, but I wanted it to feel easy and personal, just like texting.

Chat Flow

Lastly, in regard to solving my navigation problem, I added an icon that looks like a little house at the top of the header bar. This is a feature I plan to test out with my next round of users. There needs to be a quick and easy way to navigate back to the Account Summary page, but not everyone seems to view the “Wells Fargo” heading as a clickable navigation option. If the new icon doesn’t translate this, perhaps we can build it back into the menu.

The next iteration will be driven heavily by the second round of user testing I’ll conduct this week. The plan is to have the users execute tasks within a section and between sections so that I can understand their thinking in regard to the flow of the navigation.