Expense Calculator


Simple Online Banking


Concept Developer & UX Lead


Jan 2018 - May 2018


Project Background

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.


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. 


Defining 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

CCHMC cards-40.png


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

CCHMC cards-41.png


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

CCHMC cards-42.png


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



CCHMC cards-43.png


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


Ideation Process

CCHMC cards-44.png


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

CCHMC cards-45.png


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.  


Encouraging Saving


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.  

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.