OnTrack

A simple budgeting tool.
app dashboard

Role:

  • UI/UX designer

Length of the project:

Three weeks

Tools used:

  • Sketch

Table of contents:

Overview

Description

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.

Challenge

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.

Solution

Dashboard

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

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

History

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.

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