Today, many of Rocket Money’s financial insights—whether in emails or the mobile app—use the same component and format. This makes the information harder to scan and causes the content to blend together.
In this exploratory project, I redesigned key financial insights by rethinking how they’re presented—making them more digestible, engaging, and tailored to the content.
client
Rocket Money
role
Interface Design
before
after
Spent vs. Earned
To spark ideas, I began with quick sketches. The first concept used a scale metaphor to represent the balance between money earned and spent. While visually symbolic, it lacked the precision users need to clearly assess how these values compare.
Next, I explored a two-column bar chart—experimenting with both vertical and horizontal orientations. This direction felt more promising, as the direct comparison between bar lengths made it easier to intuitively grasp which value was higher.
From there, I refined the concept further, focusing on how to render the comparison in the clearest and most accessible way. The goal was to create a visual that helps users quickly understand whether they saved, broke even, or overspent—with minimal effort.
After sketching, I began designing how to present the information. In reviewing the first version, I noticed that the most important insight—whether the user was over or under budget—lacked visual hierarchy and was easy to overlook.
In the next version, I made the budget status and difference amount more visually prominent. However, the layout became cluttered, with too many text sizes and elements competing for attention.
To make the insight feel immediate and intuitive, the final version clearly states the budget status upfront. I also reduced type variation to create a more cohesive and scannable card, allowing the key message to stand out without distraction.
Top spending categories
Since this view focuses on the top five categories—not the full breakdown of spending—it’s not a true composition. That’s why I avoided using visualizations like pie charts or tree maps, which imply a complete whole. Instead, I focused on a layout that highlights the largest categories without suggesting they represent 100% of the budget.
I started with a vertical bar chart, but it relied on a legend to identify each category—forcing users to shift focus and slowing comprehension.
I added labels and icons directly in the chart for clarity. However, placing them on the right limited how far the bars could extend, making the largest category appear smaller.
I moved labels above the bars to let them stretch across the space, but placing the amounts inconsistently made it harder to scan and compare values.
I aligned all spending amounts to the right edge, creating a clean, consistent reading path that improved comparison and legibility.
Early versions used different colors for each bar, but this added noise. A single color reduced distraction and emphasized comparison.
The final design is simple, cohesive, and optimized for quick scanning—making it easier for users to instantly see where their money went.
largest transactions
The original Largest Transactions card was functional but visually flat—making it hard to compare purchases or feel the true impact of where money went.
The existing design was functional, but I saw an opportunity to improve hierarchy and make the content more engaging and distinctive.
To better reflect the idea of "largest" purchases, I explored using size as a visual metaphor—testing a Nested Proportional Area Chart. However, the overlapping layout made transactions feel grouped or related, which created confusion about their independence.
Next, I separated the bubbles to reinforce that each transaction was distinct. This approach also created a more scalable system: when transactions are similar in value, the bubbles appear proportionally close; when one stands out, the size visually reflects that difference. The result is a design that’s more scannable, expressive, and aligned with the goal of helping users quickly understand what made the biggest dent.
.png)
