top of page
First Metro Bank App Redesign
1. PLAN
Goal
To transform the banking app that I use every day into a more advanced, visually appealing, and user-friendly app.
Roles
-
User Researcher
-
Data Analyst
-
Product Designer
Estimated Timeline
-
Problem: 5-7 days
-
Process: 10-12 days
-
Performance: 4-5 days
Total: 19-24 days
2. PROBLEM
User Research - Mobile App Reviews
User Research - Survey and Data
I surveyed 30 mobile banking app users to get a better understanding of whom I'm designing the app for. The data I collected is summarized below.
.png)
User Research - Personas
PERSONAL
BACKGROUND
Age: 20
Status: Single
Education:
Earning a Bachelor's
degree in Finance
USER
ENVIRONMENT
Location: School
Devices: Mostly on his iPhone, but also on his
laptop for schoolwork.
Very tech-savvy.
BRIAN SMITH
"I want to stay on top of my expenses amidst my busy schedule."
PSYCHOGRAPHICS
-
Checks his finances regularly so he does not spend more than what he makes.
-
Makes mobile deposits.
-
Spends most of his money on necessity good like rent, food, gas, and school supplies.
-
Appreciates good deals to save money.
SCENARIO
"I use banking app every day to make sure my expenses are charged correctly. I check my balance often so that I do not overspend. As a tech-savvy millennial, I enjoy a smart banking app that has many cool functions so I do not need to go to the bank in person because I am busy with school and work."
PROFESSIONAL BACKGROUND
Occupation:
Full-time college student with a part-time job
Income: $30,000/year
END GOALS
Use banking app to check his balance, income, and daily expenses.
PERSONAL
BACKGROUND
Age: 35
Status: Married, has 2 children aged 10 and 7
Education: Bachelor's
degree in Accounting
USER
ENVIRONMENT
Location: Work/Home
Devices: Mostly on her work computer, but also on her phone in her free time. Somewhat tech-savvy.
SUSAN ADAMS
"A healthy financial life is crucial for my family of four."
PROFESSIONAL BACKGROUND
Occupation:
Full-time accountant
Income: $71,000/year
END GOALS
Use banking app to manage the family's wallet which includes bill payments, savings, and daily expenses.
PSYCHOGRAPHICS
-
Makes monthly mortgage and car payments on time.
-
Has 2 education savings funds for her children.
-
Takes family vacations at least once a year.
-
Shops online occasionally.
-
Spends most of her money on groceries and activities for her children.
SCENARIO
"My husband and I work hard to provide for our two children and pay off our house and vehicles. I use banking app to make sure I pay our bills on time and keep an eye on our savings. I always have a family budget so we can meet our financial goals. We like to spend less than we make."
PERSONAL
BACKGROUND
Age: 67
Status: Married, has 3 children and 6 grandchildren
Education: Bachelor's
degree in Social Work
USER
ENVIRONMENT
Location: Home
Devices: Mostly on her iPhone, but also on her iPad. Not very tech-savvy.
CAROLYN JOHNSON
"Retirement is very enjoyable when
I manage my finances wisely."
PROFESSIONAL BACKGROUND
Occupation:
Retired social worker
Income: Retirement savings + rental business
END GOALS
Use banking app to keep track of daily expenses, remaining savings, and
rental business income.
PSYCHOGRAPHICS
-
Travels with her husband several times a year.
-
Likes to buy stuff for her grandchildren.
-
Gardens in her free time.
-
Takes family vacation with all her children and grandchildren once a year.
-
Sends money to her children occasionally.
SCENARIO
"My retirement is spent on traveling, babysitting, cooking, and gardening. I like to use banking app to keep track of our savings balance and rental business income. Thankfully, we don't have a lot of bills to pay like we used to in our younger years. We worked hard to get to where we are."
Problem #1: The Login Page
First Metro Bank (FMB)'s login page is overloaded with contact information that is not related to the purpose of logging in. To log in, users have to look for the "Continue" button located at the top right corner of the screen which can be hard to see for some people. The password recovery feature is located very far down from the "Continue" button. This current design complicates the login experience for users because it goes against the conventional login page layout of most apps and does not emphasize the main login information.
Screenshot of FMB's login page as of May 19, 2022
Problem #2: Limited Features
FMB app is only limited to basic features of a banking app and missing important features such as viewing e-statements, mobile deposit, and checks order that most banking apps have.
Screenshots of FMB's app interfaces as of May 19, 2022
Problem #3: Inability to Adjust Spending Limit
When a customer opens an account with FMB, they are required to set a maximum spending limit per day for security purposes. That means they cannot spend more than the limit they set even when they have enough money in their account to cover for the transaction.
For example, if I have $5,000 in my account and I set my maximum daily spending limit at $3,000, I cannot make a $4,000 transaction unless I call the bank to increase my spending limit.
There are 2 common issues arising from this practice:
-
Users cannot contact the bank during closing hours
-
It can be time-consuming waiting for the bank to respond even during opening hours
3. PROCESS
Solution to Problem #1: The Login Page
Original
Redesign
I simplified the login experience for users by eliminating unnecessary contact information and relocating the login fields to the center of the screen. The big company logo at the top reinforces customers with brand recognition. The "Continue" button is replaced by the red "Log In" button below the Password field. Moving the password recovery feature right below the "Log In" button helps users find it easily. Additional contact information is located at the bottom of the screen for those who need it.
Solution to Problem #2: Limited Features
Competitive Analysis
To identify the features that are lacking in FMB app, I conducted a competitive analysis of 3 other banking apps from FMB's competitors: Bank Independent, Regions Bank, and Listerhill Credit Union.
Redesign
Through user research, I discovered an interesting fact that almost 80% of the users bank with more than one bank. If a banking app allows the users to link accounts from other banks, it would help them save time by not having to open different apps to check their balances. This feature is available in Listerhill Credit Union's app that I discovered while conducting a competitive analysis.
Survey result
As a result, I chose it to be the first new feature to add to my redesign. From the Home screen, user can see all the account balances at FMB and the option to add a new account from a different bank. To be able to add an account from another bank, a new window will pop up and require the user to log in to the account that they want to add. In the prototype below, Susan has an account with Bank of America and has added that account to her main FMB banking app so she can check all her balances at one time.
Redesign of the Home screen
The Recent tab shows all recent activities from all accounts that Susan has. It is a quick access feature for users with multiple accounts like Susan.
Redesign of the Recent feature
Through user research, I discovered that the statistics of banking app usage are similar to social media usage. This leads me to adding a Notifications feature so that FMB can communicate with the customers quickly and directly. This is especially helpful for people who do not use/follow the bank on social media so they do not miss out on timely announcements from the bank regularly.
Survey result
VS.
.png)
Source: Pew Research Center
The new Notifications feature
The Move Money screen allows users to do multiple tasks with the money in their accounts. The features are arranged from top to bottom based on their respective popularity according to the result I collected through user research. Mobile deposit is added as a new feature. Bigger buttons are designed to help users click on them with ease.
.png)
Survey result
Redesign of the Move Money screen
Users can also access other features relating to each account by clicking on the desired account from the Home screen. New features are shown in the prototypes below.
New features for each account
The Services screen provides users with extra support and services from the bank for busy users like Brian Smith who may not be able to go to the bank in person.
Extra support and banking services
When a user clicks on the profile picture displayed at the top right corner of the Home screen or at the top of the Settings screen, it will lead to My Profile screen where they can update their personal information easily. This helps the bank stay up to date with their customers' information changes.
A new Personal Profile feature
The Settings screen allows users to personalize their alert preferences and choose the desired language for the app, a feature that is designed for non-native English speakers.
The Settings screen allows for personalization
Solution to Problem #3: Inability to Adjust Spending Limit
Instead of calling the bank, users can now adjust their spending limit through the app via the "Adjust spending limit" feature located under the Card Controls section of each account. After setting their desired new spending limit (must be equal or less than the amount they have in the account), users will receive a security code sent to their phones to bypass the Verification step. Once activated, users can enjoy the new spending limit that they just set for 24 hours until it expires.
A new control feature that allows users to adjust their spending limit without calling the bank
4. PERFORMANCE
I was able to solve all the problems that I defined through User Research. The Login page looks much cleaner and more concise compared to the original version. All of the features that were present in FMB's competitors' apps but were missing in FMB's app are now added. Moreover, the new "Notifications", "Adjust spending limit", and "Languages" features are unique features that other banking apps do not have, thus giving FMB a competitive advantage.
Final design animation
bottom of page