Kashflow: an App for Those Pursuing Financial Freedom
There is a rising topic on YouTube called “financial freedom”. There are active communities about real estate investing, e-commerce businesses, and entrepreneurship. I am a big fan of financial freedom and I’m glad to have friends with the same interests. We often share our experiences and learn from each other. The biggest headache we all have was keeping track of our progress towards financial freedom. I’ve seen finance apps out there like Mint or YNAB, but they designed for the short-term. We wanted something that shows us where we are and how much further until we reach our goal.
There is this board game called Cashflow designed by Robert Kiyosaki. To win the game, one must create enough passive income to cover all expenses. To keep track of your progress, the game uses a financial statement. In the statement, you can find your cash on hand, income, expenses, assets and liabilities. It also has a bar chart to visually represent your progress.
The game is financially accurate and simple enough for kids to understand, so I asked myself; how can I translate this into a mobile format?
The Digital Financial Statement
Using Google sheets, I was able to create the information architecture. I was even able to create a working prototype utilizing live stock quotes from Google Finance, aggregate and reference cell values, and make a progress bar using the Sparkline function.
After getting the structure of the app right, I can design how to display the data in mobile app format. Since this is a pretty simple app, I was able to create a high fidelity mockup in Adobe XD quickly.
Using Adobe XD, I created a high-fidelity mockup that feels real enough fool my friends to thinking it’s a real app. I then let my friends try them. In an ideal situation, I shouldn’t tell them that I made the app in order to avoid inaccurate feedback, but it’s impossible to hide anything from them. I asked them to treat it as if they found the app from an article online, and to “think out loud” as they were using it. I observed their behaviors and took notes.
During the test, I noticed that they switched back and forth frequently between the dashboard screen and the secondary screens. I asked them why they did that and their answer was that they were trying to compare their income to expenses. The app has 3 levels of information: the dashboard, the secondary screens for displaying income, expenses, assets, liabilities, and a tertiary screen for displaying individual stock holdings and properties in stocks and real estate. To address their needs, I decided to flatten the first and second level of information into one level using accordions. They also mentioned the color made some texts hard to read, so I changed the majority of the UI to black text on white background, and only using the green color for actionable items like buttons and progress bars.
Designing at scale
I knew that there will be a lot more to design down the road. So it’s important to build a good foundation of design system that can is reusable or expandable.