Outcomes Spending Analyzer

Data visualization design | Web app | Side project | 1 week
Project Overview
Outcomes is a tool designed by me and built by my husband to solve the classic finance tracking problem. Rather than showing spending by account or by month, you'll see it by regularity. Outcomes shows a view of how your most recurring spending trends and finds those one-off transactions that are hiding in the noise.
My Contributions
- Researched and designed the interface from end to end
- QA and supported implementation


When we first started tracking our family finances, we tried out tools like Mint that show you a per-category breakdown of spending. Others, like YNAB, ask you to categorize every charge. As a result, we ended up wasting lots of time looking through highly repetitive spending like groceries until we got to interesting one-offs like a season ski pass.

That motivated us to build our own finance tracking tool.

As usual, I took a step back to think about the problem. When talking about personal/family finance, what do we actually want to keep track of? After talking to a few friends, I found out most people are interested in three aspects of their spending:

Total spending over a time period

Spending that is hard to keep track of

Major category spending trends over time

The most basic info helps users get an overview of their spending

Rare transactions are likely to mess up the budget

Show users' high-level spending changes


We decided to name this project Outcomes since income is the money people make. The first step for me was to figure out what may be a good navigation system since we were building up Outcomes from scratch.
I explored multiple different design directions. While all six layouts could work, in order to keep Outcomes lightweight, I decided to go with the one-pager layout that displays all the information in one page with clear information hierarchy.
The next questions for us was to figure out what information we want to show in the app. I played a lot with various arrangements of the information to test out ways to build more narrative in the design, unfolding information bit by bit to avoid overwhelming users.


Modular design

After narrowing down to a basic wireframe, I iterated the design from low to high fidelity to get a better sense of the overarching experience. The entire interface is made of three major modules: spending trend banner, accounts and spending by regularity.

Buit-in feedback system

Knowing that the analysis engine could be wrong sometimes (especially when categorizing spending), we decided to design a built-in feedback system so that users can categorize their spending and help train the analysis engine.

Trust and transparency

While testing the design, I realized that users don't really understand how the spending was categorized based on regularity and what it meant. Hence, I added a small explanation to make sense of the analysis engine and allow users to control how they want to slice the data by regularity.

Go Live

We are still working on fine-tuning Outcomes, but the core functionality is partially live now. Click here to view
Currently, Outcomes is in friends and family only testing mode and we haven't quite figure out a way to make it more scaleable via the Plaid API.

Other projects

Crow-sourcing Management Platform
'Build your own'  Customization
Outcomes spending analyzer
White Label App Design System