The Budget App

An app that allows couples to harmoniously track expenses and create budgets.

My partner and I created this app to help us track our expenses. We moved to a high-cost of living city and needed a starting point to create a budget. This app categorizes our expenses and helps us track where our money goes every month.

mobile prototype
My Role

Research, Design, Prototype

Tools

Sketch, Anima, Invision

Timeline

Dec '18 - Jan '19

Platform

App

My Role

Research, Design, Prototype

Tools

Sketch, Anima, Invision

Timeline

Dec 2018 - Jan 2019

Platform

App

OverviewDefineDiscoverDesignResultsPrototype

OVERVIEW

Creating a budget with a partner is not easy. With bills, groceries, brunches, gym memberships, and doggy daycare, life begins to add up. These expenses are all made on separate accounts and at the end of the month we are left wondering where all the money went? By collecting data from all accounts we are able to track expenses in one environment making it easier for couples to create a budget.

Solution: A mobile app connecting couple’s bank accounts and credit cards allowing expenses to be viewed in one environment.

UX Methodology
process

Ideation to wireframe to final product

DEFINE

It is crucial that we are on the same page and we need the ability to track our finances, spending and saving habits together. As a couple, we need to understand how we are spending money so we can create a budget.

Team: UX Designer, UI Engineer

How might we allow users to categorically track their expenses with another person?

User Goals

  1. Track expenses with partner.
  2. Categorize incoming transactions autonomously.
  3. Create and edit budgets for each category and sub-category.
  4. Use data from the budget app to make informed purchasing decisions.

Limitations

  1. The time we have to develop the app is weekends and none work hours.
  2. At this time we are only limiting the app to minimal features.
  3. We might have to limit features to keep security a priority.
  4. Categorizing information through Plaid might be an issue.
  5. Budget is small.

DISCOVER

Competitive Analysis

Competitors in the budget category include Mint, Mvelopes, Quicken, YNAB app, and Simple. These apps have features that allow budgeting, categorical spending and connect to bank accounts. They fail to allow multiple users, subcategories, pace spending and specific transaction information.

competitive analysis

Persona & User Journey

Users are predominantly using this app prior to making a decision, like; making a big purchase, making plans, or paying bills.

persona

Personas helped us keep features specific to the project and avoid scope creep.

user journey

This app is a tool for users to make quick decisions that can help them stay on budget and save money.

DESIGN

It’s a priority that the transaction data is intuitively organized and easy to digest. General categories like Food are organized into smaller subcategories like; groceries, restaurants, fast-food and coffee shops. Specific transaction data from the different accounts need to appear within the app.

When we began the design process, we came up with a few design principles that needed to be consistent throughout the whole app.

  • Organized - The sole purpose is to organize data.
  • Intuitive - Data needs to be easy-to-understand without a cumbersome onboarding process
  • Modern - App needs to avoid feeling like an out-dated banking app.
brainstorming necessary features & layouts

Brainstorming necessary features & layouts for early design exploration.

Rationale behind design decisions

Single Page - We decided to keep the app on a single page with drop down categories because we wanted all the information to be ready and on one screen.

Category Drop down Example

Wireframe interaction depicting the flow between categories.

Progress Bars - We used color-coded progress bars to visualize how much of the month’s budget has been spent. Green indicates 0%-33% of the budget has been spent, Yellow indicates 34%-67% of the budget has been spent and red indicates 68%-100+% of the budget has been spent.

Progress Bars

Categorize - We used Plaid to connect bank accounts to the app. Plaid consolidates data from multiple sources and categorizes it which makes it easy to use and analyze. Plaid was a huge help in categorizing the data for the app.

We created categories and subcategories based on our own personal spending and preferences. For this version this is all done in code but we will like to add features that can allow this to be done in-app.

RESULTS

After using the app for 1.5 months, we felt like we were making more informed purchases and that we were more aware of our own and each other's spending. It was jarring to see how much we spent on food in one month, especially in the restaurants category. By choosing to eat out less often we have reduced our total Food category expenses by 38%.

A side effect of using the app was it opened up the conversation of budgeting. It went from something we talk about once a month or at a critical high-stress moment to a daily casual conversation.

Final Product

Final product

We made notes explaining what wasn’t working and what we are doing to fix the issues for the next version. We also need to do a better job of setting quantifiable goals.

  • Single page - This ended up not being the best long-term solution. We want to add more features which makes the page feel cramped.
  • Labeling data - We need to do a better job of labeling data. Designs of the second version include clearly labeled data.
  • Editing Data - While we have the capabilities to edit data and budgets through code it is a pain. We ended up not using the app as much because we couldn’t edit data on the go.
  • UI - The UI felt too big so we shrunk down text and progress bars to make it look more professional.
versions 2 screens

View category and subcategories. Edit a transaction in the supermarket category.

The Second Version

We refined what we liked in the first version of the app and reevaluated what we disliked. We designed this low-fidelity prototype which illustrates the design decisions we've decided alleviate friction points. Here are some things you can try to do with the prototype:

  • Check your Food budget. See how much you've spent in each of the sub-categories and check where the purchases were made.
  • Add a transaction to the "Food" budget for purchases that used cash.
  • The homescreen lists uncategorized transactions which can be placed into a category.
  • Using the floating action button you can add a category, subcategory, and a transaction.
  • This prototype also allows the option to view, edit or add a transaction.
View Prototype

Previous Case Study

Scope Travel

Next Case Study

Park City Insider

©2019 I created this site using Gatsby