Wireframes: Visualizing Spending Habits

Last week we were asked to add new functions to our app:

  1. Provide a snapshot of users finances and their trends.
  2. Allow users to analyze any transaction to see if it fits with their spending habits.
  3. Provide a modeling system for users to visualize how changes in spending impact their accounts.


I started by listing out what I believe people want to know about their money:

  • Where it’s going!
  • How much you will have at X time if your habits continue? If they change?
  • How to budget/save. Am I missing something? Do other people know something I don’t?
  • How long will it take to reach a spending goal


I spent a lot of time thinking (and doodling) about two questions:

  • How do I visualize financial trends and habits?
  • Where does any of this fit into the existing app?


I’m most familiar with this type of modeling through Mint. I use Mint, but I’ve always been a little confused by their use of donut charts. It’s like someone took a bar graph and looped it back on itself, like some kind of financial ouroboros. The circle is closed–which would imply something finite–but we all know that finances are always moving in one direction. Mint itself uses bar graphs for any comparison (spending habits in certain time frames, for instance). The only thing I could think that the donut graphs were valuable for was showing spending in certain categories relative to others. I started thinking about different ways that devices show usage. My phone, for instance, shows me [that I really need to clean out] my storage with a bar that has colors that correspond to types of files on the phone.Screen Shot 2015-12-15 at 2.14.02 AM

The more/larger the files of that type, the larger the bar. I could see this format being an effective comparison tool, especially if the bars were in order of largest to smallest. I played with this format, by orienting it vertically, and adding connectors that would show how the finances changed over the time period a user was looking at.


In my wireframe, I’m playing with how these comparisons are controlled and how they look. Some considerations I’m thinking about are: how large the smallest category has to be, if this is a fixed space or if it is built out in relation to that smallest category, if the “average” comparison is the default.


I’m also playing with all of the access points to these functions: How do people get there? I want these functions to be as integrated as possible into the existing framework. Below, you can see the changes I made to Accounts and Savings Account screens.


Budget Tools are now their own category on the main menu. Parts of the functionality are available on the accounts pages, with links back to the Budget Tools from the Payments screens as well.
I’m excited to continue testing and pushing the the new functions and visualizations over the next couple of days to be clearer and better fit the needs of the existing app.

Budget-01  Budget-02 Budget-03 Budget-04