A little while ago, I wanted to start tracking my finances to get an idea of where my money was going. I was looking for a quick and easy way to enter transactions on the go and reconcile with my bank statement later. Most importantly, it had to look good enough to earn a spot on my home screen. Despite hundreds of apps on the App Store, a solution didn’t exist. So I set out to design my own.

Two years later, this is the story of that design process.

Existing Apps

There is no shortage of expense tracking apps on the App Store. On one side you have apps that connect to your bank account and try to do everything automatically. Mint.com is often the first place people go to try to learn about their finances. These kinds of apps have major pitfalls though. They miscategorize and mislabel transactions so much that it is not an accurate representation of your financial history. This reduces their functionality into a glorified balance viewer.

On the other side of the spectrum, you have apps that require you to enter every transaction in manually. This isn’t ideal either. It’s a lot of work, and I still want to make sure my bank statement is accurate.

My design combines these two methods with an intuitive and modern interface. It focuses on streamlined expense input, reconciling transactions with your bank account, and presenting beautiful, interactive graphs to help you understand where your money is going.

Core Experience

Starting From Scratch

I decided from the beginning that this was going to be an entirely new kind of finance app.

I broke the design down into the three most important things a user does:

Input expenses

See cash flow

Reconcile bank statement

Dashboard

Goal: Show the most relevant information to the user immediately.

I decided the best way to accomplish this was to use a dashboard style navigation as the main screen.

No tab bar or hamburger menu to be found!

The top graph shows the user’s balance over time. It allows the user to see a top level overview of their financial situation and which way it is trending.

The dashboard displays the user’s exact balance, cash flow, and expense pie chart. This is the main navigation interface of the app, and tapping on any one of these squares presents the user with more detail about that information. The advantage to this approach over other navigation paradigms is it shows the most relevant information without the user having to explore further.

Below the dashboard is a table with every one of the user’s transactions. This table covers the dashboard as it is scrolled up.

The top graph also acts as another navigation interface. By dragging the graph, the user can explore their entire financial history.