Image for post
Image for post

I didn’t like any of the finance apps for iPhone. So I designed my own.

Mason Wolters
Aug 11, 2017 · 6 min read

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

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

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.

Image for post
Image for post
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.

Image for post
Image for post
I can tell you exactly how much I spent at Chipotle in August of 2015 (it’s a lot).

The user can see statistics for any month by tapping on the cash flow indicator.

Image for post
Image for post

Goal: Create the easiest and fastest way to enter transactions on the go.

This is where every other finance app I have tried fails miserably. There is zero margin for error here. This experience has to be extremely low friction or the user will simply not use it in the real world. This means creating the simplest and most streamlined interface possible.

Image for post
Image for post

Every transaction has three things that the user must specify: a title (what’s it for?), amount, and category. These three things are indicated with a red dot to make it clear what is required from the user. As you start typing, the text field expands to show search results based on your past transactions. Tapping any one of these automatically fills in the title and category field to make the experience as quick and effortless as possible.

Image for post
Image for post

I took an entirely different approach to downloading transactions from your bank account. After connecting a bank, transactions from that bank go into a “pending” state where they must be approved before showing up in the main interface. Transactions the user has already inputted manually are matched with the corresponding bank transaction automatically.

Image for post
Image for post

Instead of making it difficult to change the title or category, editing a transaction is built directly into the workflow. This solves my main grievance with automatic budgeting apps that get your information wrong. The changes the user makes are remembered for the future and applied automatically for similar transactions.

Image for post
Image for post

Extras

Expanding beyond the core experience, I decided to add some features for fun.

While not for everyone, budgeting is very important to some people. By selecting multiple categories, the user can set a budget based on their past six months of spending.

Image for post
Image for post

The user can then see their progress from month to month by expanding the date selector.

Image for post
Image for post
This is my favorite animation by far

I decided it was necessary to have the ability to separate transactions at a higher level than category or tag. Therefore, I designed the ability to have multiple accounts that are “buckets” for transactions. For example, you can separate your personal and business expenses.

Image for post
Image for post

And another feature just for fun: I added the ability to share an account with friends or family. Everyone it’s shared with can input transactions and see all the changes for truly collaborative budgeting.

It always drove me crazy how other apps wouldn’t tell me how much money I’ve spent at Chipotle collectively. So I added that:

Image for post
Image for post

Conclusion

The best part about this design study is it’s more than just a design. It’s a real, working app that I’m launching today. I call it Slope and you can download it for iPhone and iPad on the App Store or learn more at slopeapp.com. I would love it if you would try it out and give me some feedback!

Image for post
Image for post
Image for post
Image for post

Slope Blog

Your finances made beautiful

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store