top of page
App Redesign
My Role
Solo Project
Time
2 weeks
Type
Passion Project
Tools
Adobe XD
Context
Imagine This
Quack! The quacking duck sound exploded from my alarm and I popped out of bed to shut it off. It was 5am and all I needed to function properly was my magical morning cup of coffee. I got dressed and drove to my version of the happiest place on Earth; Starbucks! I ordered my usual, and - uh oh! My Bank of America debit card was not in my wallet! I immediately went to the app to freeze it, but I wasted a lot of time trying to find the option. I didn't get my coffee and I was late for work.
As a user of the product, I took it upon myself to redesign the app to better suit the needs of the user and visually direct it towards the new segment of consumers, Gen Z.
Research
App Store Reviews
UserSince1984
Terrible interface!!
"The App is completely overloaded with all kind of stuff, like promotions for BofA customers from other companies. And all that in the main area. This way the App looks like a website from 1998. With that said I want to point out that the App has ZERO elegance, ZERO smooth and intuitive moving around and ZERO nice design."
ypaoyamg
music..lover
Too many clicks
"When I open the app and then click on my account I want to see my transactions, not just the first 5 - I want to see all of them. The first 5 cover most of the screen and I assume I can start scrolling to see the other transaction only to realize I now have to scroll back up to the link to see the rest of the transactions. I don’t want to see things like Account Management or VISA checkout stuff right below my transactions. I want to see my transactions. This is a bad user experience for the app."
Simple actions require lots of navigation
"I've had this app for months. It's the only way I access my BofA account, and I dread when I have to use it. I have other banking apps where everything is easy to find and readily available."
Mobile Banking App Playbook - November 20
Gen Z consumers stand out as notably dissatisfied with their mobile banking experience.
40%
of consumers say they are dissatisfied with their mobile banking app because too many steps are needed to open additional accounts with their bank.
-
"Enroll" awkwardly in same hierarchy as "Forgot ID/Passcode"
-
"Make Transfer" & "Send" are same color, can be confusing
-
"Manage Debit Card" in an obscure location
-
What if you wanted to lock a credit card?
-
"Hello, Joe" confusing as to where it leads
Defining
Problems
-
Some features of the app are unintuitive.
-
Simple tasks take multiple steps to achieve.
-
User Interface is dated and unappealing.
Goals
-
Increase usability by reconfiguring information architecture
-
Make user goals easier to achieve by rearranging visual hierarchy
-
Make user interface design more appealing to users by updating look and mood
*Bank of America UX professional informed me of business requirement that all screen must be 30% red
Prototyping
1st Attempt
Performance Self Review
-
too much red, can be confused with error
-
Erica might be genderless like Alexa
-
a lot of visual clutter, cognitive load
-
Maybe start from scratch
Final Screens
Home
App Redesign
Context
As a user of the product, I took it upon myself to redesign the app to better suit the needs of the user and visually direct it towards Gen Z.
User Research
App Store Reviews
UserSince1984
Terrible interface!!
"The App is completely overloaded with all kind of stuff, like promotions for BofA customers from other companies. And all that in the main area. This way the App looks like a website from 1998. With that said I want to point out that the App has ZERO elegance, ZERO smooth and intuitive moving around and ZERO nice design."
ypaoyamg
music..lover
Too many clicks
"When I open the app and then click on my account I want to see my transactions, not just the first 5 - I want to see all of them. The first 5 cover most of the screen and I assume I can start scrolling to see the other transaction only to realize I now have to scroll back up to the link to see the rest of the transactions. I don’t want to see things like Account Management or VISA checkout stuff right below my transactions. I want to see my transactions. This is a bad user experience for the app."
Simple actions require lots of navigation
"I've had this app for months. It's the only way I access my BofA account, and I dread when I have to use it. I have other banking apps where everything is easy to find and readily available."
Mobile Banking App Playbook - November 20
Gen Z consumers stand out as notably dissatisfied with their mobile banking experience.
40%
of consumers say they are dissatisfied with their mobile banking app because too many steps are needed to open additional accounts with their bank.
App Critique
Some Notes
-
"Enroll" awkwardly in same hierarchy as "Forgot ID/Passcode"
-
"Make Transfer" & "Send" are same color, can be confusing
-
"Manage Debit Card" in an obscure location
-
What if you wanted to lock a credit card?
-
"Hello, Joe" confusing as to where it leads
Defining
Problems
-
Some features of the app are unintuitive.
-
Simple tasks take multiple steps to achieve.
-
User Interface is dated and unappealing.
Goals
-
Increase usability by reconfiguring information architecture
-
Make user goals easier to achieve by rearranging visual hierarchy
-
Make user interface design more appealing to users by updating look and mood
*Bank of America UX professional informed me of business requirement that all screens must be 30% red
Prototyping
Version 1
After review by Bank of America Enterprise UX Designer
-
too much red, can be confused with error
-
Erica might be genderless like Alexa
-
a lot of visual clutter, cognitive load
Iterations: Based off of the Version 1 designs, I revised my designs.
Prototyping
Final Screens
Splash
-
Simplified design to reduce cognitive load, moved all adds to "Products" page
Home
-
swipe through virtual displays of physical cards for easy identification
-
"quick action" tiles allow user to pay bills, deposit money, see goals, or manage the card being currently viewed
-
see most recent transactions on a pull up tab
Spending
-
view transactions from all cards or a certain card by week, month, or year
-
view income to all cards or a certain card by week, month, or year
-
click on each segment to see spending in specific category
Transer | Actions
-
moved "Start ATM Withdraw" and "Order Foreign Currency" from Menu
-
merged "request" and "pay" options to lighten cognitive load
-
mimics Venmo pattern for frictionless process
-
add and edit icons for quick changes
-
card drop down menu for visual clarification
Manage
-
switch between and manage savings and checking accounts
-
lock/unlock cards quickly and efficiently
Reflection
Key Takeaways
Start From Scratch
I took the elements from the original design and tried to improve them individually in my first attempt. Later, I decided it was just better to start from square one. I broke the design down to the skeleton wireframes and reconfigured the elements. Then, I redesigned the UI to finish. Sometimes, I will have to completely start from scratch with projects for a better solution.
Think of All Paths
The idea to redesign the app started because I thought that locking my debit card took more steps than I thought it needed. As I started working on it, I needed to familiarize myself with all of Bank of America's products and services, what features would need to be included, and how the user would be able to complete each task.
bottom of page