Building a financial tracker from scratch
Innovation • 2024
Plain paper, guides and digital tools: a lot of options to track expenses through Kakeibo, but are they really the best we can get in the 21st century?
Introduction
Tracking incomes and expenses is perhaps one of the most challenging tasks in adults lives. There are a lot of ways of doing it and one of the most common is called Kakeibo. It was born in Japan more than 100 years ago and it aims to make people more conscious of their spending habits, although a good digital Kakeibo never took off.
🎯 The problem
Kakeibo, by tradition, is done manually through a diary where all expenses are written down and then read at the end of the month.
Nowadays, one can drop the conventional diary and use an Excel or Google Sheets file, but formulas would have to be done by scratch, as well as automatic and periodic expenses added manually. UX is also disappointing because sheet apps are not tailored especifically for money saving.
💡 The solution
An app with a really clean UI, 100% focus on money saving and deep data analysis to bring financial insights to the users.
The process
The first step was to get visual references from competitors or similar apps. Numbers and Apple Pay show great ways of dealing with charts and highlight important information. Goodbudget doesn't have a good UX overall, but it is a good standard for the flows of adding, editing and deleting expenses.
From left to right, the first three screens are from the Apple Pay app. The other ones are Numbers screenshots.
After the previous analysis, it was time to start prototyping the UI. Looking through the users perspective and also considering Kakeibo's principles, the most important information on tracking expenses is how much have been spent and how much of the budget is left. Therefore, some variations were generated to fulfill this requirement.
The chart was the main component in all variations. From the first to the second one in the image, it's possible to notice that timespan changed from monthly to daily, but still showing a month reference. The last one shows a bottom-sheet to add expenses.
Prototyping great user interfaces require a lot of variations. With Dindim, this wasn't different. The main challenge was to make every function discoverable and still intuitive (such as add expense, change the monthly goal, navigate through days and months, so on). The app is yet to be finished, but the final screens show how the chart is still the main component at the same time that the rest of the user actions are visible and easy to recognize.
On the left, the amount of expenses on March 18th and the monthly budget view. On the right, the bottom sheet for adding a new expense.
Once the prototypes reached a good quality, a quick functional version was built in Swift and Swift UI to show to Apple's staff in WWDC24 how the app was already connected to a database.
A primary version of the app without the interface elements, but already functional.
After a few more months of iterations, the app went through several changes in order to improve the usability. A new feature was also added:
The current version of the app is a lot more loyal to the prototypes, with the charts and the insights being crucial elements of the experience. Below, there's a demo of the most updated version of it.