Page--The System v04
ios App, 2017
WHAT: The System is an app that creates and keeps a simplified “macro budget” for you so you can stop overspending and get ahead.
HOW: The System organizes your checking account into 3 categories--for Spending, for Bills, and for Goals--then tells you what Goals to target in what order.
WHY: An astonishing 78% of Americans live paycheck to paycheck. Getting ahead requires financial savvy and considerable discipline, and and few of us have both.
WHO: This app is targeting single, salaried Millennials who feel overwhelmed and stressed out about getting their finances in order.
The System starts with a white stack of money representing your income.
Then it divides that stack into red, blue, and green for Bills, Goals, and Spending.
1 of 6
Everyone I spoke to hated making budgets. They complained about the tedium of making a budget by hand, and they complained about the inaccuracy of automatic budgets like the ones Mint creates.
Problem Statement: How might we keep a user’s finances on track without a traditional budget?
2 of 6
For a user to break the paycheck-to-paycheck cycle, their income needs to serve three purposes: pay for essentials like bills, pay for everyday spending, and work towards financial goals (like debt payoff, saving, or investing).
In the interest of simplicity, I wanted to partition a user’s money into just those three categories. I called this a “Macro-Budget”. Using animation and color would make it easier to understand the process.
3 of 6
It sounds obvious, but research shows that consumers have an easier time associating graphics with money if the graphics actually depict money. I first tried out the isometric look for an animated demo I made, shown here.
4 of 6
To test the concept of 3-category macro-budgeting, I devised a “Concierge Prototype” of the service. I asked 8 test users to share their transaction data with me, and used statistical analysis to determine their paycheck and monthly bills.
I used that information to break their income down into the three categories I was focusing on. I created a financial assessment and emailed to them as aPDF financial. The dollar graphic and visual breakdown tested well and gave me the confidence to move forward with an app design.
5 of 6
My next step was to translate the PDF Concierge Prototype into a mobile app. This animation is from a clickable prototype I put on my phone for in-person testing.
The most frustrating aspect was that I had to used canned figures for income and bills, and the inauthenticity was a distraction for users. Other feedback was that the colors were gloomy and not distinct enough.
6 of 6
After being told that the original colors of Purple, Blue, and Green were “gloomy” and indistinct, I experimented until I settled on the palette of Green, Blue and Red.
Users felt the process was too long, so I used chevrons to indicate what step they were on.
Finally, I added a summary screen at the end we called “Your Paycheck Plan.”
Your checking account is organized into stacks for Spending, Bills, and Goals
1 of 3
In a competitive assessment of personal finance apps, some users expressed frustration with the reliance of pie/donut charts as the only significant graphic component. One user said, “A pie chart show proportion. It doesn’t show me how much I’ve spent or how much is left”.
Problem statement: How might we visualize a user’s money in a way that helps them understand where they stand financially?
2 of 3
I originally wanted to show spent money—depicted in gray portions of the stacks—on the Home screen. I thought it was important to show how much had been spent since payday. Turns out, users didn’t like seeing the gray portions, so I got rid of them and the Home screen was much more vibrant.
3 of 3
I wanted a crystal-clear connection between the Three Stacks on the Home Screen and the contents of each stack. The answer was to split the stack apart to show how each stack was earmarked. The animation also added a little visual delight, and users liked it.
The System tells you exactly how much you can afford to spend until payday. It even gives you a daily average so you can pace yourself.
Money is earmarked for upcoming bills so you always have enough to pay in full and on time.
1 of 6
One of the people I spoke to explained that her attitude towards money shifted dramatically when she paid her rent, as it was her biggest expense by far. I was inspired to see how our fixed monthly expenses could be balanced out throughout the month to alleviate this lopsided situation.
Problem statement: How might we smooth out a user’s cashflow so they don’t ride the rich-poor rollercoaster?
2 of 6
To try this idea out, I tallied up all my fixed monthly expenses aside from my rent and found the total was about the same as my rent. Since my rent is due on the 1st of the month, I manually changed the due dates for all my other bills to the 15th of the month. Since I got paid twice a month, I saw that if I put my first paycheck of the month towards my rent, and the second paycheck of the month towards all my other bills, I would have approximately the same amount left over to spend.
3 of 6
About half the US is paid weekly or every other week, which doesn’t line up nicely with monthly expenses. While the original idea was to balance monthly expenses across two paychecks, I realized I needed to make the system more flexible. If enough of a cushion was saved up initially, you would be able to prorate all fixed expenses per paycheck, resulting in smooth cashflow. This is from an early pitch deck where I demonstrate the idea.
4 of 6
The first priority of the Bills feature was to make sure the user had 100% of the money needed for bills that were due before payday—these I termed “Near-term Bills.” The second priority was to earmark 50% of the money needed for bills due after payday, which I called “Far-term Bills.”
Without any regard for the design constraints of a mobile screen, I first set out to make a chart that showed what was earmarked for Near-term bills vs Far-term Bills to see if people could understand it.
5 of 6
The dollar stack graphic was a big hit with the users of our Concierge Prototype. I played around a bit to find a balance between information density and busy-ness. I also eventually switched from purple to red to represent bills.
6 of 6
At the top are different amounts of paid bills, followed by the remaining earmarks for Near-term Bills. At the bottom are the partial earmarks for Far-term Bills.
Any remaining money is earmarked for financial goals in this order: First Pay off debt, then Build an Emergency Fund, and finally Invest.
1 of 6
During interviews, many people didn’t know how compounding interest worked or different between a 401(k) and an IRA. Their eyes glazed over when I would try to explain it to them, and would eventually admit that they didn’t want to learn. One said, “I don’t want to learn the vagaries of personal finance. Just tell me what to do.”
Problem Statement: How might we allow users to reach their financial goals without having to define them themselves?
2 of 6
For my initial set of test users, I customized this “Goals Checklist” according to my analysis of their financial situation and sent it to them as a PDF during the Concierge version of the service. They found the sequential aspect satisfying, but the most telling response I got was “That’s great, but can you just do it for me?”. I realized there’s a whole segment of the population who doesn’t want empowerment per se, they want automation.
3 of 6
Our users didn’t want to choose their goals, learn about money, or discuss their finances, they just wanted the best practices of Personal Finance applied to their situation. I took the checklist from the Concierge version and sketched out a few designs for an interface that displayed (1) the entire list of goals, (2) which goals they had achieved, (3) and what their progress was in the current goal.
4 of 6
Once I had decided to represent money with the stack graphic, I needed a way to show progress towards a goal using the stack. The idea of showing a clear or vacant portion of the stack was moderately successful in testing, but it it was the dotted-line approach that best communicated something that was not yet there. This is also used in the Bills section to represent bill money that is only partially earmarked.
5 of 6
In a misguided attempt at simplicity, I gave up on presenting the user with specific Goals. Instead, I just took any money above and beyond a user’s Bills and Spending budgets and split it so that 1/3 was “short-term savings” (capped at $1,000) and 2/3 was “long-term savings”. Short-term savings was for “splurges and mistakes”—think a fancy diner or a parking ticket. Long-term savings was intended to be used for more substantial goals such as debt payoff, emergency savings, and investment. But people complained that they didn’t know what to do with their Long-term savings and in what sequence—pay off debt? save en emergency fund? invest?
6 of 6
After feedback from users, I found a way to reintroduce Goals in an simplified and automatic capacity. Simply put, it’s (1) Pay off high-interest debt, (2) Save up a 3-month emergency fund, then (3) Invest. For debt, we prioritize the user’s smallest credit card debt, using the Debt Snowball methodology. Once all credit cards are paid off, we calculate what the user’s 3-month Emergency Fund should be and have them move it to their Savings account. Once they reach that goal, we direct the user to a short survey where we ask a few questions before telling them whether they can invest in an Roth IRA or a taxable brokerage account.
At the top you can see money that has left the account to go into Savings or to pay off debt. Below are money earmarked for those same goals that has not yet left the account.
Read about the methodology for The System in my article How to automate your finances and feel good about money on Medium