01. Project Overview
Wells Fargo is an American, multinational financial services company that
provides banking, mortgage, investing, credit card, and personal, small
business, and commercial financial services. The Wells Fargo mobile app
allows clients to manage finances, make deposits, transfer funds, and pay bills.
Within this past year, Wells Fargo has taken the first steps to rebranding
themselves after recovering from their infamous bank scandal. They’ve slightly
updated their logo, featuring a more bold and modern red hue as well as a new
graphic design treatment for their wagon visual.
Current Mobile App Design
Despite this update in brand identity,
their mobile app has yet to be modernized. The current design is quite
dated in terms of interface and usability, making it complicated for users to
navigate through and quickly find what they need. The purpose of this redesign
is to simplify and streamline navigation of the app, focus its layout around the most
interaction-heavy features, and update the interface to increase user engagement.
02. User Research
I conducted interviews with a wide range of people, from college
students to working professionals. I wanted to identify the common pain
points users face when interacting with the Wells Fargo mobile app as well
as their own individual bank’s. To understand the needs and priorities of
my audience, I asked a series of questions while users interacted with the current app.
How would you describe your inital experience using this app?
What are you thinking while trying to navigate through it?
Which features do you find yourself using most frequently?
What are your thoughts on its layout and design?
What, if anything, caused you frustration?
How might you improve its design and usability?
After talking to users and understanding their experiences and needs, I was
able to solidify the most common obstacles they encounter and pinpoint the
features that were the most interaction-heavy.
Unclear Naming Conventions
Naming conventions are too broad, which is
confusing and tedious to navigate through
Users waste time jumping through many screens due to misleading naming conventions
Want to ease the language a bit more because banking jargon can
be frustrating for new users
Not intuitive, too many ways to accomplish goals
Navigation feels cluttered, lacks solid structure and consistency
There are little to no visual cues that help direct users where to go
Heavily dependent on language for signals
Most Used Wells Fargo Features
Lays out all accounts on one screen
Allows users to transfer money to and from accounts
Allows users to deposit checks remotely
Send Money with Zelle
Allows users to send money through Zelle, a feature that permits customers to send money directly between almost any U.S. bank accounts
Allows users to check their inbox for messages and alert history
Allows users to choose what notifications they receive via email, text, or through the app
Displays a list of all past billing statements
Redefine Key Features
Based on the research I collected from the interviews, I've more clearly defined
the key features that I want to highlight in this redesign and that I believe are the most
significant to the function of the app. I've renamed some features to simplify the original
I've chosen to keep this feature the same as it is functional and easy to locate
Transfer & Pay
The original Transfer Money feature had several different screens that accomplished the same goal of
transferring money from or making payments to the same Wells Fargo account, as well as allowing
customers to send money through Zelle
I've created one screen that accomplishes transferring money within Wells Fargo accounts and created
a separate feature for sending money through Zelle
I've chosen to keep this feature the same as it is functional and easy to locate, but I've simplified its name
Allows users to send money through Zelle
This original feature was housed under the Transfer Money feature in the original app design
and I've made it its own feature so users can find it more easily and don't have to parse through
Transfer Money to get there
I've combined the original Message Center and Manage Alerts features into one
I've determined which tools and criteria are the most essential and
created a task flow diagram to illustrate a more streamlined navigation across all processes within this app.
With a more solidified idea of the redesign, I was able to explore potential screen layouts.
I took the key features and translated them into simple wireframes. I was mainly focused on
exploring different layouts that centralized the most interaction-heavy items, best
displayed the information to the user, and unified nagivation elements.
In order to assess the new design’s friendliness and usability, I had 4 people from ages 20 to 55
test out these wireframes. I gave each individual the same set of tasks to accomplish and had each of
them walk through their user flow.
1 new user
2 frequent users
1 infrequent user
1. Transfer money from your Savings to Checking account
2. Check to see if you have any notifications or messages
3. View your most recent credit card statement
User Testing Results
users were able to navigate to the Transfer & Pay screen and begin the transfer
users were able to check their notifications and noted that the yellow “alert”
circle on the hamburger icon signaled how to get there
users were able to navigate to their credit card page and found the “View statements” button
After observing how each individual navigated through the design, I was able to note down minor, common areas of confusion and difficulty:
Small text size
When older users were examining the screen layouts, they noted that it was difficult to see the text clearly, especially
in areas with multiple lines of text
They also expressed that some subtext, for example, "Available Balance," was easily overlooked given its light font weight and size
Small icon size
Similar to the small text size, 3/4 users noted that the icon sizes might be too small and could be increased for better visibility
Need for a "help" button
2/4 users expressed that it might be helpful to have a "help" button somewhere convenient, especially for long-time users who
are used to the old design and are trying to get acclamated to the updated version
After discussing with the same people I interviewed and receiving feedback, I was able to create more structured and effective layouts of the simple wireframes.
I also concentrated on implementing the Wells Fargo color palette in a purposeful and consistent way that aligned with the new brand identity.
Lessons & Takeaways
Throughout the course of this project, I most enjoyed user interviews and implementing better systems that addressed their concerns.
I learned that I actually like a bit of complexity as it allows me to search for connections and relationships within systems
and out in the real world. This helped develop my own understanding of people and how to meet their needs that they didn't even
know they had.
In the future, I would like to try to conduct user research that extends beyond my immediate network to gain more insight on users' concerns.
I would also like to have iterated a bit more and done more user testing to validate this redesign. The next steps for this project would
be to design further into the other navigation features like Deposit and Send to get a more holistic view of the functions of this app.