Bank of America

Life's better when we're connected

Adding a Finance Feature - Surplus Manager
Product Design (UX/UI)

9 weeks - 80+ hours

Tools used:

This project is a fictitious scenario, completed as a part of Designlab's UX Academy.
View Final Prototype
As one of the largest banks in the U.S., Bank of America wants to use their reach to improve the financial health of its customers. Their current mobile app is very well rated, but very basic in functionality. The features that they are offering focus primarily on spending and making payments. Bank of America would like to round out their offerings by providing users with personalized features that allow them to manage their personal finances. They have put a lot of effort in the past on providing the most relevant products for their customers, but now they want to go beyond and not just provide these products, but also tools to help them manage money better.
1 in 3 Millennials are open to switching banks within the next 90 days, stating that they just don’t see any differences between banks. They are so disassociated with the traditional banking system that most of them believe that innovation will come from outside of the industry. Furthermore, 73% would be more interested in new financial services from Google, Apple, Amazon, PayPal, or Square than from their own nationwide bank. Especially with the younger "Gen Z" population entering the workforce, there is a growing need for traditional banks to be relevant and provide useful financial management tools.

Bank of America sees this as an opportunity and wants to attract young professionals by helping them with their financial challenges. The company would like to add a feature that works in line with their current application.
Project Goals
Create a finance management feature that helps young professionals with their financial challenges.

01 / Empathize - Exploring the User's Needs

  • Research Approach
  • Customer Interviews
Research Approach

To better understand the financial challenges that young professionals face, I decided to first dive into customer interviews. By asking open-ended questions, I knew that I could explore and navigate through the different financial concerns they have, what goals they strive for, and what other methods they use to manage their finance outside of their banking applications.

To focus my efforts on young professionals, I recruited participants who were single and did not own a home. They were 25 to 35 years of age, were working professionals, and use their mobile banking applications frequently. I recruited 5 participants and conducted 45-minute to an hour long interviews. Before the interview, I prepared questions to guide the interview. But I anticipated that the participants would have different financial concerns and goals. So I prepared a range of questions and focused on the participant's financial journey.

The goals for my research process was the following:

  • Explore and identify patterns of finance management amongst young professionals.
  • Identify pain points and unmet needs that current banks/financial services do not address.
Customer Interviews Findings

As anticipated, all the participants had different financial concerns, habits, and goals. Some participants were struggling to pay down previously accumulated debt, while some were making plans for their future. Regardless of their financial situation, all of the participants were juggling finances paycheck to paycheck and try to set budgets for themselves.

  • Four out of five participants all tried to use Mint but found it frustrating and not as helpful as they thought it would be. They thought it would help them manage their finances and budget accordingly. Only one participant it currently using Mint just to keep track of payment due dates and as a general overview of how she's using her money.

    Specifically, users were frustrated that Mint would categorize items in the wrong category, they were unable the split the charges, and there would be a lag in the charges. Also users thought they would like managing all the charges. But after a while, they grew tired of keeping up with it. Users also thought they would enjoy the budgeting feature. But the budgeting feature didn't help because every month looked different and it would only alert you once you've reached the limit.
  • Two participants created their own way of recording their finances via spreadsheet and a list of charges in a notebook. These two participants had specific savings goals and needed to break down their finances to figure out how they could use their money. They also keep track of their payment due dates like this.
  • All participants saved based off of their paycheck and outgoing expenses. Some participants keep a log of outgoing expenses to figure out how much they can save and try to set a budget for themselves for how much they can spend. A few participants just put aside a manageable amount aside from each paycheck when they knew they had a large expense coming up.
  • Several participants wished that they did not have to keep track of their payment dates. One participant's next financial goal is to have all her payments on autopay. She has been wanting to do this for a while but doesn't full comfortable losing control of her finances that way.

02 / Define - Establishing the User's Needs and Problems

  • Persona Development
  • Problem Statements
Persona Development

The five participants were all single and did not own a home but varied on financial status, goals, and struggles. Two of the participants were on top of their finances and kept records to keep on track with payments and savings goals. One participant was struggling to pay down her sizable debt for the last 8 years of her life. Another participant did not struggle particularly with debt or strive to reach a financial goal and was content with her financial status as is. The last participant was living paycheck to paycheck but had savings goals and was looking to stabilize her future.

Although the participants varied in financial status, goals, and struggles, they all worked off of their paycheck and did not have any other investments or financial advisors. So I created Jasmine as the key persona to focus on for this feature. She is someone who has some debt, savings goals, and wants to have a better grasp on her finances. Like the participants, she manages her finances paycheck to paycheck. She is looking to make a significant commitment to attend graduate school but needs to save more money and stay on top of her finances.

Meet Jasmine, the Fun-loving Conscientious Planner
Problem Statements

After conducting the interviews with my participants, I focused my energy on creating "How Might We" problem statements. After composing 18 problem statements, I noticed that there were general reoccurring themes and specific problems that I was interested in tackling.

These are the 3 problem statements I decided to focus on before the Ideation phase:

  • How might we show users how they are using their money so that they can understand how they are spending their money?
  • How might we educate users to prepare for life goals they are actively looking to achieve?
  • How might we remind users of their finance goals so that they are able to achieve those goals and not go off track?

03 / Ideate - Creating the Framework

  • Ideation
  • Storyboarding
  • User Flow

For the Ideation phase, I utilized the crazy 8 brainstorming exercise. (Crazy 8 brainstorming session entailed 5-minute intervals of 8 sketches with an intentional break of 20-30 minutes. I did not compose 8 sketches each time. But this exercise forced me to push out ideas and I spent the breaks thinking about the ideas I wanted to elaborate on.) This was a great exercise to get my ideas on paper. After doing this exercise 5 times, I compiled my sketches and grouped them according to themes.


For the Storyboarding phase, I also utilized the Crazy 8 brainstorming exercise. This time I used the 8 sketch papers to illustrate how a user would use an idea I had in mind. After 5 Crazy 8 sessions, I decided to focus on the managing by Pay Period feature. During the process, I created 2 different storyboards for this function. It also made the most sense because this is how the participants managed their finances.

User Flow

After sketching out these storyboards, I decided that I would use the ideas that I generated and create a feature that helps users manage their finances by paycheck period. Within this feature, I wanted to integrate ways users can improve their financial health and manage expenses.

(At this point, I wasn't quite sure what to name the feature. So in the initial design, it started off as the "Money Manager". But after testing the low-fidelity prototype, I renamed this feature as the "Surplus Manager".)

04 / Prototype - Let's make the Design!

  • Wireframes
  • Low Fidelity Prototype Usability Testing
  • Final Design

While developing my storyboard concept of paying by paycheck, I thoroughly looked through the Bank of America mobile banking app. I noticed that there was a "Bill Pay" Function and a "Life Plan" guide. I have been a Bank of America customer for over 15 years and I had never noticed these features. So I looked for more details online and found out that they had released the features over 2 years ago (January 2019). When I tested the low-fidelity prototype, the participants who had been customers of Bank of America had never noticed these as well.

So I decided to integrate the "Bill Pay" feature and "Life Plan" guide into my finance managing feature. The participants I interviewed managed their finances with the paycheck they receive in accordance to bills, payments, and savings goals. One participant did have a goal of being able to put all her accounts on autopay and having more than a sufficient amount in her bank. She's been trying to get to this state for a year now but can't seem to because she feels anxious doing so. So with my finance managing feature, the user will be able to set up their "Money Manager" according to their paycheck schedule (bi-weekly, monthly, custom).

The "Money Manager" feature will be available in the home screen dashboard. From there, the user will be able to view how much money is available, the scheduled "Bill Pay" transactions, and the remaining balance they have to use until the next paycheck. In my feature, I included the goals set in the "Life Plan" guide as well as the ability to edit and view "Bill Pay" accounts and upcoming payments.

While making these wireframes, I initially started by creating a pathway for users to pay off a credit card bill that was being paid at the minimum amount due. Naturally, I thought about how I would approach this situation and how I would want to pay by viewing the "Pending Transactions". But after developing it, it didn't seem quite right. The purpose of this feature was to use the "Surplus Balance" to either pay down debt or add to savings or both. So I switched the pathway to be from the "Surplus Balance".

For the Payment Details, I integrated what was already available in the current "Bill Pay" function. Because the user will be paying the bill in full, I added a cancel autopay step at the end.

View Low Fidelity Prototype
Low Fidelity Prototype Usability Test

I tested this low fidelity prototype on 3 participants. After I tested this prototype on the first participant, she mentioned how the "-" sign in the Pending Transactions would prompt her to check that first because the large negative balance would make her anxious. So I shared the screens I had made for the Pending Transactions. Then I proceeded to test this alternative pathway with her. After getting great feedback and insight, I decided to test both pathway separately for my next two test participants.

From this test, I was able to understand what vital pieces were missing and what was confusing. Here are some of the findings I used to improve my design for my high fidelity prototype:

  • Feature Name - Two participants mentioned that Money Manager seems like it would manage investments as well. So they thought the name wasn't quite right and could be misleading.
  • Confusing Summary Page - The participants all loved the idea of the feature and how it was organized so that you can see everything all at once. Two participants did not quite know what to do next because the 3 different pathways that seemed to be of equal value. They were able to figure it out when I mentioned that the user flow was to manage the surplus.
  • Credit Card Usage Confusion - A participant was confused at what to click because the "Credit Card Usage" button didn't quite seem like something she would click next. It wasn't an obvious choice because it seemed more like a statement more than anything.
  • Cancelling Autopay - All the participants did not think to cancel the current autopay already going out. They all needed to be prompted that they weren't finished. Two of the participants stated that they didn't like that they had to worry about that extra step.
  • Pending Transactions - The participants liked that they could view all the outgoing payments. One participant did not think anything was clickable and felt like everything looked like it was officially processed like a receipt.
  • Negative Numbers - Two participants mentioned how the negative numbers makes them feel anxious as if they owe that much money.
High FIdelity Prototype
Surplus Manager - Summary Screen

For my high-fidelity prototype, I renamed the feature as Surplus Manager. In my low-fidelity prototype testing, participants thought the name "Money Manager" could be misleading because it sounds like it would be for investments and such.

Surplus Spotlight

In the low-fidelity prototype, participants did not know what to focus on. So I decided to focus on the Surplus function.

Manage by Pay Period

The feature will keep track of the user's pay schedule, upcoming payments, and the remaining surplus balance the user has to use until the next pay period.

Surplus Manager - Surplus Screen
Monthly Activity

Users will be able to keep track of their progress and view details. The visual bar graph will help the user to see their overall progress and/or setbacks.

Helpful Tips

The tip above will feature advice based on their monthly activity. When the user views the activity details, they will be able to see more tips on how to improve their financial health.

Open Balances

Users will be able to access their open balances as well as savings accounts to view and/or manage.

View High FIdelity Prototype

05 / Test - It's time to test the Prototype!

  • Usability Test Plan
  • Usability Test Findings
  • Priority Revisions
  • Next Steps
Usability Test Plan

I recruited 4 participants for the Usability Test. Two of the participants were part of the low-fidelity prototype test. During the low-fidelity prototype test, the participant who doesn't use Bank of America was confused because she was not acquainted with its mobile banking app. So I recruited two participants who have not used the Bank of America mobile banking app to test if it would be intuitive for non-users as well.

Usability Test Findings

The task for the users was to use the “surplus manager” feature to change their current $20.00 minimum amount due autopay to pay the full balance ($440.00) for their Bank of America credit card. All the participants were able to complete the task with no problems.

Overall, all the participants really enjoyed this feature. They all mentioned how they wish they could have this feature because it will help them out a lot to keep track of their finances and make it so much easier. All were able to complete the task with ease. Here are a few minor pain points I observed:

  • During the payment process, the “Select Amount” section was confusing because the user should be editing the payment from the minimum due to the current balance.
  • One new participant was a bit confused at first because she thought the surplus manager summary would show how much money she has at first. But once she understood what was going on, she appreciated the surplus amount because that’s how much money she really has to use for the next two weeks.
  • One participant was confused about the “Open Balances” term. But after explaining how that’s the finance term that I found that groups open accounts, she understood.
  • While observing the participants, I thought about how I would use this feature and I went back to my initial process of paying the credit card balance in full from the outgoing payments. No one really pointed it out but more of an observation while conducting the test. So I will add this user flow for the revision.
Priority Revisions

For the revisions, I made a few minor adjustments based off the observations I made during the high-fidelity prototype test. The biggest difference with this revised prototype is that I developed another pathway. When I had initially started the wireframes, I developed a user flow that goes through the outgoing payments. My initial thought was that the user would want to see what's going out. From there, the user will pay off a credit card autopay that's set on minimum payment due.

But after thinking about it, I wanted to highlight the surplus feature and being able to see an overview of their finances as well as open balances and savings. So I changed the user flow. While I was testing this prototype, I thought back to this and decided to make this alternative user flow.

Note: The list of Outgoing Payments is what is already available in the current Bill Pay feature. I added the top portion to filter by pay period and match the other functions of the Surplus Manager.

View Final Prototype
Next Steps

Now that I developed another pathway for the user to pay down credit card debt using the Outgoing Payments portion, I would want to test this pathway. This pathway provides a more direct route for users to pay down their debt so I would assume users would like this.

Initially, I started out by building out this pathway because it was the way I would instinctively want to pay down my debt. But as I developed this feature, I changed it to encompass a more comprehensive feature that would allow users to also add their savings and see their progress as well as tips to improve their financial health. I would also want to test and see if users like the more simplistic approach or appreciate the more comprehensive approach.

Reflections & Take-aways

This project was different from the previous ones that I had worked on (Mosaic and Pan Am). In my previous projects, the main objective was to curate a e-commerce shopping or flight booking experience. But the purpose of this project was to create a feature that will help to address an existing problem.

Because the problem-solving aspect of this project was important, I knew that it was crucial to understand the problem in the perspective of its users and to think outside the box of what is currently out in market. So I was more thorough and in-depth during the interview process, ideation stage, and building out the wireframes. Because I knew that different participants had different concerns and approached their finances differently, I prepared a large numbers of questions to guide the interview and explore the user's financial journey. To think outside of the box and crank out all the ideas in my head after the interview process, my mentor encouraged me to utCrazy 8 exercises

Luckily, this project revolved around Bank of America so I was able to easily assemble the graphic and UI elements. So the testing portion was more about how I set up the feature. Since it was my first time doing a project like this, it made it a lot more manageable to focus my efforts and bring the elements together.

Have any questions about this project?
I would love to talk more about it with you!