Budget

Redesigning a legacy money management tool for Tangerine's app

Shipped August 2025

PROJECT SUMMARY //

PROJECT SUMMARY //

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.

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.

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.

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

  • 01

    Set an overall budget

    For users who prefer to keep things simple, the new experience allows them to set one total monthly budget. A single number will track overall spending across accounts. Designed for: Those who want a quick, low-effort way to stay on top of finances.

  • 02

    Budget by category

    For those seeking more control, users can now budget up to 13 categories, tailoring their spending to personal priorities. Designed for: Those who would also like full control over how expenses are budgeted each month.

  • 03

    Track spending in real time

    Dynamic graphs update automatically as users spend, offering a clear snapshot of progress throughout the month. Designed for: Visual feedback for staying on track.

WHAT SHIPPED //

WHAT SHIPPED //

A flexible budgeting experience that adapts to how people manage their money

Contact

WHAT SHIPPED //

WHAT SHIPPED //

A flexible budgeting experience that adapts to how people manage their money

01

Set an overall budget

For users who prefer to keep things simple, the new experience allows them to set one total monthly budget. A single number will track overall spending across accounts. Designed for: Those who want a quick, low-effort way to stay on top of finances.

02

Budget by category

03

Track spending in real time

0:00 / 0:00

01

Set an overall budget

For users who prefer to keep things simple, the new experience allows them to set one total monthly budget. A single number will track overall spending across accounts. Designed for: Those who want a quick, low-effort way to stay on top of finances.

02

Budget by category

03

Track spending in real time

0:00 / 0:00

Before and after

Before and after

Before and after

Before and after

Dynamic budget carousel cards

Dynamic budget carousel cards

Dynamic budget carousel cards

Dynamic budget carousel cards

Budget input interaction

Category illustrations I created

Category illustrations I created

Category illustrations I created

Category illustrations I created

Why we built this

Why we built this

Why we built this

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 Process

The Process

The Process

The Process

THE PROBLEM //

THE PROBLEM //

THE PROBLEM //

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 //

CURRENT EXPERIENCE //

CURRENT EXPERIENCE //

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.

PROBLEM 01

PROBLEM 02

PROBLEM 03

Cumbersome setup with minimal guidance

Creating a budget required going through 6+ screens, like filling in a never ending form and users received no guidance on how much they typically spent, making them left to guess.

PROBLEM 01

PROBLEM 02

PROBLEM 03

Cumbersome setup with minimal guidance

Creating a budget required going through 6+ screens, like filling in a never ending form and users received no guidance on how much they typically spent, making them left to guess.

PROBLEM 01

PROBLEM 02

PROBLEM 03

Cumbersome setup with minimal guidance

Creating a budget required going through 6+ screens, like filling in a never ending form and users received no guidance on how much they typically spent, making them left to guess.

PROBLEM 01

PROBLEM 02

PROBLEM 03

Cumbersome setup with minimal guidance

Creating a budget required going through 6+ screens, like filling in a never ending form and users received no guidance on how much they typically spent, making them left to guess.

USER RESEARCH //

USER RESEARCH //

USER RESEARCH //

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 //

DESIGN ITERATIONS //

DESIGN ITERATIONS //

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.

Budget would live as an extension of Tracker

At the start of the project, Tangerine launched Tracker, a new hub where users could see spending across all accounts. We saw the perfect opportunity to integrate budgeting directly into Tracker, giving it both visibility and context. Now users could see their spending and immediately take action by setting a budget.

Budget would live as an extension of Tracker

At the start of the project, Tangerine launched Tracker, a new hub where users could see spending across all accounts. We saw the perfect opportunity to integrate budgeting directly into Tracker, giving it both visibility and context. Now users could see their spending and immediately take action by setting a budget.

Budget would live as an extension of Tracker

At the start of the project, Tangerine launched Tracker, a new hub where users could see spending across all accounts. We saw the perfect opportunity to integrate budgeting directly into Tracker, giving it both visibility and context. Now users could see their spending and immediately take action by setting a budget.

Budget would live as an extension of Tracker

At the start of the project, Tangerine launched Tracker, a new hub where users could see spending across all accounts. We saw the perfect opportunity to integrate budgeting directly into Tracker, giving it both visibility and context. Now users could see their spending and immediately take action by setting a budget.

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.

ITERATION 1

FINAL

Flexibility and control initially confused users

We designed a home page that allowed flexibility for setting an overall and/or category budget. However, usability studies showed that users were confused when asked to differentiate the 2. In later iterations, we moved the available categories to a separate page to better manage progressive disclosure.

ITERATION 1

FINAL

Flexibility and control initially confused users

We designed a home page that allowed flexibility for setting an overall and/or category budget. However, usability studies showed that users were confused when asked to differentiate the 2. In later iterations, we moved the available categories to a separate page to better manage progressive disclosure.

ITERATION 1

FINAL

Flexibility and control initially confused users

We designed a home page that allowed flexibility for setting an overall and/or category budget. However, usability studies showed that users were confused when asked to differentiate the 2. In later iterations, we moved the available categories to a separate page to better manage progressive disclosure.

ITERATION 1

FINAL

Flexibility and control initially confused users

We designed a home page that allowed flexibility for setting an overall and/or category budget. However, usability studies showed that users were confused when asked to differentiate the 2. In later iterations, we moved the available categories to a separate page to better manage progressive disclosure.

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.

ITERATION 1

FINAL

Editing budgets in a modal

We started with a modal-based design on iOS to let users quickly edit category budgets. But during our feasibility review, the tech team flagged performance and implementation challenges with this complex interaction. From a UX standpoint, we also realized that modals work best for quick, focused actions, not for managing several categories at once. Outcome: We moved away from a modal and explored a full-page layout for better clarity.

ITERATION 1

FINAL

Editing budgets in a modal

We started with a modal-based design on iOS to let users quickly edit category budgets. But during our feasibility review, the tech team flagged performance and implementation challenges with this complex interaction. From a UX standpoint, we also realized that modals work best for quick, focused actions, not for managing several categories at once. Outcome: We moved away from a modal and explored a full-page layout for better clarity.

ITERATION 1

FINAL

Editing budgets in a modal

We started with a modal-based design on iOS to let users quickly edit category budgets. But during our feasibility review, the tech team flagged performance and implementation challenges with this complex interaction. From a UX standpoint, we also realized that modals work best for quick, focused actions, not for managing several categories at once. Outcome: We moved away from a modal and explored a full-page layout for better clarity.

ITERATION 1

FINAL

Editing budgets in a modal

We started with a modal-based design on iOS to let users quickly edit category budgets. But during our feasibility review, the tech team flagged performance and implementation challenges with this complex interaction. From a UX standpoint, we also realized that modals work best for quick, focused actions, not for managing several categories at once. Outcome: We moved away from a modal and explored a full-page layout for better clarity.

REFLECTIONS //

REFLECTIONS //

REFLECTIONS //

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.

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.

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.

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!

Next: Change category

curtisdizon@gmail.com

Lorem Ipsum

curtisdizon@gmail.com

Lorem Ipsum

curtisdizon@gmail.com

Lorem Ipsum

x (Twitter)

x (Twitter)

x (Twitter)

LinkedIn

LinkedIn

LinkedIn

© 2025