Monthly Budgets
Redesigning a legacy money management tool for Tangerine's app
Shipped August 2025
PROJECT SUMMARY //
Tangerine’s decade-old budgeting tool, Left to Spend, had seen a steady decline in engagement as user needs and design standards evolved. Our team redesigned the feature from the ground up to create a simple, flexible, and contextual experience within the app. The new design launched to over 2 million clients and boosted engagement with Tangerine’s money management tools.
Contributions
UX / UI Design
Prototyping
Usability testing
Design system expansion
Engineering handoff (iOS & Android)
Team
1 Design Manager
1 Product Manager
1 Business Analyst
9 Engineers (FE, BE & QE)
Timeline
6 months to ship
Before and after
Dynamic budget carousel cards
Budget input interaction
Unlike Canada’s Big Five banks, Tangerine operates entirely online with no branches, no account fees, and no minimum balance requirements. This model attracts younger, digital native Canadians.
About 40% of our clients are between 25 and 44, with an average chequing account balance of $1,500. Many live paycheque to paycheque, meaning tools that help manage day-to-day spending have the biggest impact.
While traditional banks serve wealthier clients with investment and estate planning tools, Tangerine clients are different. They need practical ways to track and control spending. The current experiences weren’t delivering on this. A redesigned budgeting tool was a clear opportunity to help clients stay on top of their finances and rebuild engagement.
THE PROBLEM //
A sharp decline in app enagement caused by legacy money management tools
Tangerine’s original app launched with a handful of money management tools in early 2010. However, they haven’t been updated since. Our client base has evolved and so have design standards. The current experience couldn’t satisfy these new requirements.
One of these features was Left to Spend, a tool that allowed you to set a budget for the month to determine how much you had “left to spend”. In 2025, our team set out to redesign this budgeting feature from the ground up to make a product that would simplify the budgeting process.
How might we give our clients greater control over their budgeting while making the experience simple, flexible, and contextual to their spending?
CURRENT EXPERIENCE //
Understanding the issues with the current Left to Spend experience
Jamming with members from our design and product teams, we each went through the Left to Spend experience and noted our pain points. Summarizing our stickies, three problems stood out.
USER RESEARCH //
Understanding the approaches to monthly budgeting and money management pain points
To understand how Canadians approach budgeting today, we ran a national study through usertesting.com with 200 participants. We also gathered anecdotal feedback from those who don’t budget, many of whom said they simply didn’t know where to start. From our findings, we identified three main types of budgeters:
32%
Set a single overall budget for the month
48%
Focus their budgets on specific categories
20%
Combination of both approaches
We combined our insights and defined two ideal types of users for the experience
"1 and done"
Passive budgeters who want to keep track of their spending. They keep things simple by setting an overall budget for the entire month.
"The planner"
More involved with their personal finances, they dive deeper into budgeting and like to have granular control over spending categories.
DESIGN ITERATIONS //
Principles to guide the iterative design process
Taking everything we learned, we set out 3 guiding principles to remind our teams what the final expereince should feel like.
Simple
Adding and editing budgets should be quick and intuitive.
Contextual
Providing context to the user while they’re budgeting will mitigate guesswork
Flexible
Support different types of budgeting styles without forcing users into one model.
Architecturally, budgeting found its home alongside spending insights.
The legacy experience was buried at the end of the auxiliary menu, far removed from where users actually viewed transactions.
Accommodating different budgeting models
Our research revealed that there isn’t a single budgeting model that works for everyone. Unlike Left to Spend, which forced users into one approach, we wanted the redesign to support multiple budgeting styles.
Scaling category budgets
A key technical constraint was how Tangerine categorized transactions. There are 15 main categories, each with an average of 8 subcategories (119 in total). As a result, each spending category (e.g. Home, Food, Travel) had its own budget page, where users could edit their budget for that specific category. This structure influenced how we approached the page design and data display.
REFLECTIONS //
This was my first shipped feature out of school, the entire journey was a process. Here's what I learnt:
Tailor design pitches
I learned early in the project that not every audience needs the same pitch. Designers care about craft and consistency, product teams care about strategy and scope, and engineers care about feasibility. Adapting how I communicated to each group made alignment smoother and decisions faster.
Prototypes create alignment
Figma prototypes turned my static frames into shared understanding. Showing interactions early helped engineers flag technical constraints before development, and gave everyone a clearer vision of the final product. I’m proud that the shipped product is nearly one-to-one with Figma.
Share the full vision
Not every design concept will make it to production, but I’ve learned that showing the vision matters. A “no” from engineering or product is better than never sharing an idea at all. It opens dialogue and helps us scale back together toward what’s possible. Plus, if there’s an appetite for future enhancements, teams are already aware of the original vision.
The team!
