Expense Calculator

During my time with Simple Online Banking, I was on the product design team working to build and ship web and mobile products, visuals, and interactions. I worked in a tech start-up style environment as part of a six-person design team working closely with engineers. One of my projects included leading the design and exploration of an expense calculator concept. 

When:  Jan 2018 - May 2018

For:  Simple Online Banking

Role:  Concept Developer & UX Design Lead


My Role as Project Design Lead 

This product started initially as an idea that I presented at an ideation meeting. Two lead developers liked my concept proposal and volunteered to engineer the tool if I designed it. For this project I was responsible for strategizing product functions and interactions, designing the UI, and working alongside developers in the engineering process. I presented the product alongside my two-person engineering team at a company-wide event in front of close to 200 of Simple's employees, including the CEO. 



The Problem 

The Simple Expense Calculator began as a new product idea that I presented at a think session inspired by my own (and many of my young peers) struggles with visualizing expenses. Young adulthood can be an exciting experience for those living independently for the first time, but many struggle with financial decision making, saving, and budgeting on their own. 

About a third of young adults (32%) are considered “financially precarious,” meaning they have few money management skills and little income stability, according to a University of Illinois study. Another 36% are considered financially “at risk” because they have had an unexpected drop in income within the year and had no savings to support themselves. These numbers made me question what Simple can offer to relieve some of this stress by promoting budgeting and saving in a more intuitive way as well as engaging a younger market. 


User Challenges

  1. Lack of financial education and experience can make it hard for young adults to apply an effective budget.

  2. Difficulty visualizing how frivolous spending can affect a budget and long-term savings stability.

  3. Fear of making poor financial decisions that could cause a negative effect in the future.



  1. Help users to better visualize how expenses will affect their overall income so they can make wise budgets.

  2. Help users to confidently create finance goals with fewer interactions than the current goal setting process. 

  3. Encourage wise financial decision making by prompting users to put leftover money into savings.





Product Demo

The expense calculator concept allows users to create a budget by entering their monthly or bi-monthly income and detailing each of their expenses. This finance tools helps users to visualize how much of their income is used by their expenses and plan a budget.  Particularly helpful for new customers, it allows them to confidently enter new goals into the Simple app all at once and then prompts them to put leftover money into savings. 


Visualizing Expenses


Fig. 1 - This finance tool allows banking customers to better see the impact their expenses have on their income and easily change amounts to create a balanced budget. The percentage of income used for each expense is automatically calculated. 

Fig. 2 - The progress bar allows users to visualize how much of their total income is used by their expenses and how much will be leftover. After establishing a budget, the tool then prompts them to turn these budget items into expense goals.  


Next Step, Savings

After expense goals are created, the tool encourages users to put surplus money into a protected goal/savings. Time constraints prevented the second phase from being engineered into the tool during my time at Simple.



My Role and Responsibilities 

  • Led development and expansion of the product concept 

  • Conducted research to better understand the challenges users face

  • Independently designed the UX and UI of the product within Simple's design styles 

  • Packaged designs and elements for project developers 

  • Presented final product to CEO at a company-wide event


Key Learnings and Reflection

One of the biggest impacts this project had on my product design process was learning how to successfully communicate with the in-house developers. Having a number of rounds of collaborative design and development with time for feedback from each side went a long way in speeding up the process from concept to deliverable. This experience helped me to prioritize including developer perspective throughout my iterative design approach rather than just the end of the process.