A simple budgeting tool.
app dashboard


  • UI/UX designer

Length of the project:

Three weeks

Tools used:

  • Sketch

Table of contents:



OnTrack is a web app that allows users to track their spending and set budgeting goals. The app was built to be self-hosted so that users can own their own data and not give financial info to a 3rd party.


I worked directly with a software engineer (who wanted to build the product). So, I had to constantly balance technical constraints and the engineer’s opinions with what I believed to be the best UX.



The dashboard is where the user is meant to spend most of their time. They can set goals for the whole month and/or per category, quickly add expenses, and easily get a sense of how they’re doing in the current month.

dashboard page
category modal

When creating categories, we wanted to make sure that the associated color had a good contrast because we use it in data visualization across OnTrack. If the colors are too similar, it becomes hard to differentiate the sections of data.


Insights is where the user can dig deeper into their spending patterns. While the dashboard gives a quick snapshot of the current month, the insights page can be used to drill deeper into any given month as well as analyze a whole year at a time.

insights page


The history page is essentially an audit trail of the expenses entered into OnTrack. While the main focus is budgeting, the user may still want to scroll through their expense history to recall exactly what was purchased.

expense history page

Brand Voice

Money can be stressful and financial apps can often feel a bit cold. We wanted OnTrack to feel light, lively, and encouraging to use. To accomplish this, we used lots of soft colors and fun graphics.

empty state on history page
page doesn't exist
login page - desktop and mobile view