Building Budgeting Features Into a Banking App For Dummies

The past two weeks have been a journey. After testing and making adjustments based off of our findings to the banking app wireframes that we created in this first part of this quarter, I have been working on adding in additional functionality. This functionality would allow users to do four things:

  1. View spending reports that show a snapshot of their monthly finances
  2. Give them the ability to compare a transaction to like, historical transactions (at the same type of business)
  3. Allows them to create and adjust a budget in comparison to their income
  4. View their spending in relation to their budget to show what amount of unbudgeted money is safe to spend on a transaction

Step 1: Remap your app

The first step in this process was returning to my concept map, which is a map of the entire application. If you were an app explorer (more likely a developer), you could ideally refer to my concept map and get a sense of where in the bigger picture the functionality you are working on fits.

In order to consider where and how to add these new features into my app, I needed to consider where may be most logical to place them in the current outline of my map. To do this, I printed out the digital version of the map that I had created in the first part of the quarter and began placing post-its over the portions of the map that imagined would be expanded to add in this functionality.

This was my first iteration! Just messy initial thoughts being jotted down on post its so that I could easily move them around the map if I found they fit better somewhere else.

From this first iteration, I did three more before I felt the new functionality was placed in the most logical spots in the app. I knew that aspects of this could and probably would be challenged (or confirmed) in my user testing so did not spend more than a few hours iterating on this.

Step 2: Get inspiration from competitors

This second step slightly overlapped with the first. As I began thinking through ways to fold in this functionality, I wanted to know how other applications were providing these features now. My research into competitors with with the intention of gaining clarity around two questions

  1. If other banking apps have similar features, where are they placed within the app?
  2. How do applications that offer similar reporting and functionality show these relatively complex figures and projections now?

I wanted to know, at a quick glance, what was working and what was not about the way these applications were formatted.

To answer the first question, I looked at the current Wells Fargo app, as well as the Chase app, and the Bank of America app. The Wells Fargo application had nothing in the way of any of the features I was hoping to add in. But, both the Chase and Bank of America applications offered the ability to “Set a Goal.” A goal was something you were working towards and would be interested in budgeting for. Both applications allowed you to determine an amount of money to set aside each month to meet your goal and then would actively pull that money from your account each month to be able to reach that goal.

While I appreciated this feature, I considered that creating a goal and then setting aside money each month to achieve that goal without considering your income, current trends in your spending, or recurring bill payments (and then most likely prompting you to scale back spending in one of the other areas) could be irresponsible. To add, if those applications did prompt you to consider other decreasing your spending in other budgeted areas, would it consider your spending across various cards to give you as accurate a view as possible?

The next logical step was to consider applications that provide these features outside of banking apps. The two that I looked into were Olivia and Mint. Both of these took a very different approach to budgeting. Olivia allows you to connect your bank accounts and then allows you to interact with an AI over text to give you updates and adjust your budget. Mint offered many of the features that I was hoping to build in my app. Much of my app was inspired by the Mint interface and I will explain that more below when I share my wireframes.

On the competitive analysis portion of this process, I spent about an hour as, again, I knew that most of my design, despite how much of it was informed by competitors would be challenged and confirmed in user testing.

Step 3: Build it

My next step was to make “the thing.” And by “the thing” I mean the actual wireframes of the screens that would supply these features. There were a couple of parts to this step. The first was to draw physical representations of each screen.

Here is one part of the flow I created for budgeting a check.

From there, I converted each flow into Sketch to make clean, digital representations of my app.

This is the flow for "Checking a Transaction" recreated digitally in Sketch.
This is the flow for “Checking a Transaction” recreated digitally in Sketch.

Finally, I took each individual screen and uploaded it to Invision. Because they were static graphics at this point, I went through each slide and gave functionality, or “pushability” to each image on the screen. This made it so that when you clicked on a “Save” icon, it would take the user to the next screen or part of the screen it was intended to.

The prompt "Add Budget" was confusing to all 5 users here, even though they had clicked on a prompt on the previous page to do so.
The prompt “Add Budget” was confusing to all 5 users here, even though they had clicked on a prompt on the previous page to do so.

This process was more painful than I want to admit. Budgeting is something that feels both so valuable to anyone and aligned with what most banking apps hope to provide. However, because most banking apps do not do this now, it felt like chartering unchartered territory.

Most all of the functionality of our apps that was built out in the first part of the quarter were things that were familiar to me as a millennial. Depositing an check online is something I have done before. Checking my balance online is something I have done many times.

To add, these actions were all things that most users (including myself) are required to do. Building and managing a budget is arguably just as important not not considered as essential to the way people interact with their bank. It was very difficult to imagine up each screen that I created and ultimately I was not even mostly confident in what I planned to put in front of people, but knew that putting my designs in front of people and getting feedback would lead towards a direction and a better design ultimately.

In the end, each of the flows created by the addition of these features fit into this larger flow.
In the end, each of the flows created by the addition of these features fit into this larger flow.

Step 4: Testing Your Design

This final part was another of much learning for me. I did a total of 5 user interviews.

Screen Shot 2019-02-13 at 3.39.02 PM

To recruit my users, I asked friends to connect me with their friends and asked colleagues at work that I did not know on a personal level for their time.

In the end these recruitment efforts coincidentally led me to a demographic of user that was very homogenous: 5 millennial women. Ideally, I would have loved to have a more diverse user group in terms of age and gender, but ultimately in the timeframe I had, this was the group that was able to assist. And they gave me a lot of wonderful feedback.

I asked each user for their age, their current bank, and the way that they currently manage their money. In that last question, I learned that budgeting is not something that this group does formally at all.

I also learned of two other money management apps: Cleo, which is very similar to Olivia but sends messages over Facebook messenger, and Dave, which will loan you small amounts of money on interest and automatically deduct that amount plus interest from your next paycheck. Two interesting notes about this. One, it feels significant that 3 of these budgeting apps have a name that sounds like a human name. My user who used Dave even said she liked using Dave because her “dad’s name is Dave,” and it made her feel like she was “asking (her) dad for some money, without having to actually ask (her) dad.” Also, I was curious about the privacy and security issues that could arise from using text and Facebook in apps like Cleo and Olivia.

I asked each user to complete 3 tasks:

  1. You are thinking of taking a weekend trip at the end of this month but are unsure if you have the money to do so. How would you check to see if you will have enough money to go on a trip that you are budgeting to cost around $300?
  2. You see that you only have about $100 you could devote towards a trip but you really want to go. How would you see if there is any part of your budget that you could reduce and then go about resetting it?
  3. As you are doing that, you are reminded that you went to the grocery store today and you spend $90, which feels like more than usual but you are unsure. How would you go about checking to see if this is more or less than you usually spend?

Each interview was conducted on a phone, as they would interact with the app once its in production. In my last round of testing, more than half of my users were tested on the computer. I found this time around that users interacted with my app much more naturally because they were viewing it on the phone. To add, I believe that because it was on the phone (the environment it is meant to be viewed in) it caused users to think a bit more critically about how they were interacting with each step of the process and give more constructive feedback.

I also stood behind each of my users as they were interacting with my app and asked them to explain every moment to me. In this way I could see where there hand moved at every moment while asking them questions in a way that was less personal than sitting next to them. In my last round of interviews, I sat next to a couple of my users as they interacted with the app and I believe this put an additional layer of pressure on their feedback.

To add, in this round, if there was a moment where they hesitated, I would ask them what they were considering and thinking about which prompted them to be more open and inclined to sharing more without even being prompted.


In all, I learned a lot from my user interviews. Some of the biggest themes in my feedback was…

  • In ways that were not as apparent in my first round of interviews, using the very best verbiage was important in this round. There were moments that users did not understand the word “Budget” in the context of other words.

    The prompt "Add Budget" was confusing to all 5 users here, even though they had clicked on a prompt on the previous page to do so.
    The prompt “Add Budget” was confusing to all 5 users here, even though they had clicked on a prompt on the previous page to do so.
  • In the same vane, users had trouble making the distinction between “Budget,” “Income,” and “Spending” at various moments when interacting with my app.


While people appreciated the information in the top portion of the app, when I asked each person to describe what they were seeing to me, each person struggled to identify what each image was conveying.
While people appreciated the information in the top portion of the app, when I asked each person to describe what they were seeing to me, each person struggled to identify what each image was conveying.

One user said, “I don’t understand why this one is red. It feels like maybe if it is trying to tell me I budgeted more than I am making there should be a negative dollar amount on the far left telling me how far over I am like in all the other graphs?” In my next iteration I would most likely keep the top graph indicating the amount of budget the user has spent for the month, offer another type of graph to show the user how their spending compares to their income, and a simple alert at another point in the flow (when they attempt to save their budget) letting them know that their budget is higher than their income.

  • 4 of my 5 users when prompted to do the final task I asked them to complete, “checking to see if they spent more on groceries today then they usually do,” were confused why they would ever want to do that. Each of them was able to navigate the page that allowed them to compare the transaction to others but said they would be more interested in seeing how much of their budget for the month had been spent.

Check A Transaction 4

One user said, “It is not like, if I see that I spent more than I usually do, I will buy cheaper things next time I go to the grocery store. But, if I can make a mental note that I have x amount of money left for groceries budgeted this month, I may try to refrain from buying that bottle of shampoo that is on sale just because.”

Next steps

The next step is to make adjustments to my app and do some additional testing to make a final iteration. Stay tuned for an final update on things in a few weeks!