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
Budgets were a dirty word with those I interviewed. Most found the experience of sitting down and calculating a budget unbearably tedious. They were also unhappy with the automatic budgeting that Mint provided, since it assumed the user spent a uniform amount on the same things every month.
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 at the bare minimum: pay for essentials (monthly bills), pay for everyday spending, and work towards financial goals like debt payoff or saving.
With those three categories in mind, I wanted to demonstrate how a user’s income is partitioned into money for Bills, Spending, and Goals. Showing this as a step-by-step process using animation and color would make it easy to understand.
3 of 6
It sounds obvious, but during my research I read 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 create a mint account, link their bank and credit cards to it, and pick a simple password they could share with me. I then logged in as them, downloaded their transaction data, 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 and emailed them a PDF financial assessment, shown here. 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
With the knowledge 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 5
During 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 5
I wanted a strong visual anchor that didn’t look like something out of Powerpoint. Users liked the dollar stack from the original Concierge Prototype, so I experimented with different configurations and got discouraged by how many stacks (and how much resulting scrolling) might be required to show sub-categories of Savings/Goals and Bills. I started to experiment with other interface directions.
3 of 5
I loved Apple’s Passbook interface, where multiple cards stack upon each other, then elegantly separate so you can view one card on its own. I needed room for more sub-categories, so I appropriated the Passbook interface while I played around with making the category colors more distinct. It worked but I didn't love it.
4 of 5
My friend and colleague, Marcos Weskamp, cautioned me that I should make my own mark with an original interface rather than appropriate Apple’s Passbook. I conceded he was right, and agreed that the stack interface was original and striking. I was determined to make the stacks work.
I wanted five stacks for five categories, but that would crowd the interface. My solution—which I now regard as a big mistake—was to bisect two of the stacks into sub-stacks. When tapped, the blue “Savings” stack split into “Short-Term Savings” and “Long-Term Savings” and the red “Bills” stack split into “Monthly Bills” and “Card Charges”.
One of the issues with this was a lack on consistency. One tap transformed the green Spending stack into a Spending view, while it took two taps to get to the other views. Even worse was demonstrating it—it was silly to explain the home screen as three stacks when it was actually five stacks I would walk a user through.
5 of 5
Users found the 3-stacks-transform-into-5-stacks interface confusing. I thought long and hard and realized I was being too rigid in my assertion that I needed five categories. I changed the two “Savings” stacks into a single “Goals” stack. I then added Credit Card Debt as one of the goals in Goals. Now I had three categories: Spending, Bills, and Goals.
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.
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