I didn’t like any of the finance apps for iPhone. So I designed my own.
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.
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.
The user can see statistics for any month by tapping on the cash flow indicator.
Input Expenses
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.
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.
Connect Bank and Reconcile Transactions
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.
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.
Extras
Expanding beyond the core experience, I decided to add some features for fun.
Budgets
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.
The user can then see their progress from month to month by expanding the date selector.
Multiple Accounts
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.
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.
Statistics
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:
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!
