SoFi Relay Spend Tracking Feature
SoFi Relay empowers people and gives them better control of their finances through a set of tools that include account aggregation, spending tracking, and credit score monitoring. Our spend tracking feature was the flagship feature of our MVP, because we know that in order to reach any long-term financial goals, the first step is to get a strong handle on your cash flow—or the inflows and outflows of your money. The final solution was a budgeting tool for people who hate to budget, meant to give people control and visibility into their spending patterns without the rigid and tedious framework that often cause people to fail and abandon the practice over time.
Role: Lead product designer, UX Researcher
Team: I was the sole designer working with a product manager and engineering team. I partnered closely with the product manager on product definition and strategy.
Scope: Web and mobile app design, development specs, UX research studies, concept prototypes, financial product frameworks, design QA
Customer Pain Points
“We never spoke about money growing up. I never learned how to balance a budget, I never understood interest... There are a lot of things financially that I had to do self- learning on.”
— Nida, Atlanta
“Our approach to budgeting is that I kind of throw out a number each month that we need to put into our joint account to cover our expenses and credit card bill...I have a budget on my own individual account, but I don’t think my wife does.”
— Brandon, Chicago
“I would like more guidance and financial literacy. Most articles are written for middle America—I don’t believe she needs $100K to sit in a savings account, and I don’t want to waste money on a big bank or old guy advisor.”
— Amy, San Francisco
The Problem with Old-school Budgeting
To get a grip on your personal finances, the first step is to create a budget, right? Our field research (as well as 3rd-party behavioral economics research) showed that lots of people were stuck in a broken cycle of budgeting. Traditional budgeting practices teach people to create category, on line-item budgets that assign every dollar “a job” and require tedious mental accounting and reconciliation at the end of each cycle. The problem with this is two-fold: 1) it’s arbitrary and unforgiving—who cares if you spent $5 over your pet food budget if you didn’t order takeout that week? and 2) Most people fail at this system, which causes stress, guilt, and shame about being “bad at money.”
The (No) Budget Concept
Based on the user’s income and average monthly spending, we calculate a spending limit that removes the guess work and keeps users accountable to a single number.
Our Hypothesis
By setting users up with a default budget we can implement key behavioral nudges:
Remove the pain point of creating a budget by automating the process
Improve spending awareness and create more conscious spending habits
Reduce the cognitive load of mental accounting with detailed budget categories
Early Explorations to Define the Mental Model
In early explorations for spending data visualization, I was experimenting with different mental models to make money (abstract and usually invisible) feel more tangible.
Concept Testing the Mental Models
After early rounds of sketch explorations, we narrowed down to 2 data visualization styles — either a timeline graph or a circular gauge shape. The 2 visualizations each had their pros and cons: we thought that the circular gauge might resonate more with users because of it’s inherent simplicity, but it lacked the contextual information that the timeline provided—specifically the pace of spending, and how much of the month was left. Additionally, we knew that either data visualization could follow 1 of 2 mental models: should the money appear to deplete (as if running out of a tangible resource), or accumulate, following the trajectory of spending as a positive value. To determine which of these 4 mental models would feel the most intuitive and most useful, I conducted a quick and scrappy qualitative usability study with SoFi employees (we recruited only from teams in operational, HR, or admin roles to exclude people with product or financial savvy).
Results
While the results were not unanimous and we observed that people’s preferences were very personal, the overall group preference leaned toward the depletion model combined with the timeline graph. Since this visualization was the one that the team (financial planner, myself, and the product manager) also thought was best, we chose to move forward with it. We preferred it for the same reasons most users did: 1) It reinforced the concept that money is a finite resource (which we hoped would positively impact user behavior), 2) The timeline could showing spending velocity and abnormalities, and 3) The timeline could better visualize when spending exceeded the target budget.
“I like the color coding; at a glance I can see if I’m doing good or bad. I think yellow means ‘slow down.’ And red means I’ve actually spent more than I’ve earned, which is important to know.”
— Participant 1
“The circle doesn’t tell you anything about the rate of my spending, so the line graph is way more helpful than the circles. The line graph would would clearly show the spike of a large, one-off purchase, I would feel better about that.”
— Participant 3
“I understand the [depletion timeline graph] better. You’re actually digging into your income, so it’s becoming less, not more. The graph going up is deceiving because it makes me feel like I have more money to spend.”
— Participant 2
Spending Target Set-up Flow
Once the user started connecting external accounts, the feature automatically starts tracking their spending in the form of monthly spending categories and cash flow. Setting up the spending target required a simple opt-in flow, where users would first input their income—based on this we calculated a recommended default spending target that users were able to adjust using a slider affordance. We worked with an in-house financial planner to determine a spending target that was 90% of the user’s income, which in theory would reserve a minimum of a 10% savings rate. Even though our financial planners say a 15-20% savings rate is ideal, we wanted to start off with a goal that felt very achievable and would set users up for early success with the product, and then evolve with the individual user’s needs over time. For example, if the user consistently spent under their spending target each month, we planned to send them in-app messages (behavioral nudges) to adjust their goal and level up their savings.
Final Solution: Monthly View & Historical Cash Flow
Based on the feedback from our usability test, we refined the timeline graph by adding more contextual information, specifically adding an additional dotted line to show how this month’s spending compared to their average, as well as key date markers along the x-axis. We also pulled the spending target number out of the graph to put it closer to the left-to-spend amount, as users said they wanted to be able to easily compare those values. While the spending target feature provides a very clear view of users’ spending in any given month, we identified the additional need to provide an additional view showing the historical spending vs. income over time. We developed the Cash Flow page to provide the longer term visibility into month-to-month spending/savings trends, as well as an annual savings rate. Paired together these 2 views of spending provide a balanced, micro vs. macro view, and help people start to think about longer-term financial planning.
