Helping Customers Understand Where Their Money Went
YNAB's customer were doing manual math to understand basic spending. Meanwhile, competitors were offering advanced reporting suites while we fell behind.
Our goal was to design and ship new insights for YNAB that helped YNABers answer their most pressing questions.
Company
YNAB
Industry
Fintech
Year
2024
Timeline
4 Months
Role
Senior Product Designer
My Role
I co-led design with another product designer, working collaboratively with him on every part of the project, including research, discovery, testing, production design, and iteration.
My Team
1 PM
2 Product Designers
1 iOS Engineer
1 Android Engineer
1 QA
1 Customer Support Rep
1 Marketing Rep
The Challenge
Our customers were resorting to using spreadsheets for basic insights about their spending. On mobile, there was no way to see how categories related to each other. Understanding budget proportions required manual calculations and exports.
Competitive pressure was mounting. Other apps offered comprehensive reporting while we lacked modern data visualization capabilities.
Internal resistance ran deep. Leadership historically opposed reporting features, fearing they'd make YNAB feel too complex for average consumers.
The Solution
We designed a spending breakdown experience that helped users understand category spending proportionally across different time periods. By framing this as "reflection" rather than traditional reporting, we created something uniquely YNAB while solving real user problems.
The Impact
110%
Increase in weekly engagement for the Reflect Tab
How We Got There
When you could represent financial information in 1000+ different ways, we took a step back to find the core of our users' problem.
I led competitive analysis across personal finance apps while conducting discovery interviews to validate user needs. We presented feature request data and results from a PM-led email pilot to demonstrate genuine demand against internal skepticism.
Through research, we identified a core user goal that became our strategic foundation:
"I want to know how I spent towards my priorities, and as a result, understand how do my priorities stack up against each other. "
This research convinced leadership that spending clarity was a critical user need worth addressing.
We sent out a series of emails in an attempt to validate what our users wanted to understand about their spending.
The our pouring of love from our Newsletter testers proved to leadership that there was a clear unserved problem that needed attention. So we go to work.
To differentiate ourselves in a world of traditional 'Reports', we decided to position our experience as a 'Reflection' to align with our mission and encourage an introspective approach to spending.
My co-designer and I proposed repositioning spending analysis as "reflection" instead of traditional reporting. This wasn't just semantic positioning. It fundamentally changed our design approach from comprehensive data display toward understanding and personal value alignment.
Leadership embraced this framing because it differentiated us from competitors' data-heavy approaches while staying true to YNAB's values around intentional spending.
Building Iterativly
We built the experiences in small slices, each one building on the other and allowing us to time get feedback quickly.
We decided to start iteratively release a a clean, proportional spending breakdown that emphasized comparing categories and reflection over raw data. This helped us to quickly test our assumptions while building a foundation for future improvements.
We adapted our mobile experience for the web to make it simpler and more modern.
Initially launched with mobile-similar simplicity, but user feedback pushed toward higher information density. The larger canvas allowed more complex visualizations while maintaining our reflection-focused approach.
After receiving feedback from our community, we made layout changes to help them compare data visualizations more effectively.
Post-launch user feedback helped us understand where some of our assumptions had gone astray. We were able to make a quick pivot and rework the page's UI to maximize the information displayed in a browser.
We updated the layout based on user feedback to fit more information on the screen and work better for larger monitors.
Outcome & Impact On Our Customers
After launch, we saw an outpouring of love and engagement with Spending Breakdown and our revamped Reflect tab from our community on Reddit.
Key Learnings
Start with a strong foundation
While we had aspirations for comprehensive spending trends, solving the most critical user need first proved essential groundwork that remained valuable even when roadmap priorities shifted.
Design is critical to strategic positioning
The "reflect vs reports" framework helped us make consistent decisions throughout development and gave us a clear way to communicate our differentiated approach to stakeholders.
