Case study 01 · TD Bank
Digital Customer Assistance Portal (DCAP)
An online tool that lets TD credit card customers who’ve fallen behind on payments see their options and sort things out on their own time, without having to pick up the phone.
Role
UX Designer
TIMELINE
2023–2025 · First version designed in 3 months
TEAM
10+ people across product, engineering, QA, visual design, copywriting, accessibility, compliance and the business
PLATFORM
TD online banking (web) and the TD app
featured in TD’s Innovation Project Showcase
The problem
635,000 customers who’d fallen behind on their credit card couldn’t be reached by phone, and had no way to sort it out online.
When a credit card customer falls far behind on payments, their account goes into collections, the process a bank uses to get back the money that’s owed. Until DCAP, the only way to work it out was to talk to someone. TD would call, email or send letters, and the customer had to respond. TD had seven days to reach them before the account was sent to an outside collection agency, where interest kept growing and getting back on track got harder.
When we looked into why so many people weren’t responding, it made sense. Falling behind usually means something difficult has happened in someone’s life. Many people felt embarrassed talking about money with a stranger, or were already so stressed that they were avoiding the phone altogether. A lot of them told us they’d rather handle it on their own. There just wasn’t a way to do that online.
So the goal was bigger than fewer phone calls. We wanted to give people a private, low-pressure way to see their options and act on them. We wanted TD to feel like a partner helping them get back on their feet, not just a bank chasing a payment.
What we learned from customers
For people who’d fallen behind, how it felt mattered as much as how it worked.
I worked with TD’s research team and tested my designs with people who had real experience falling behind on credit card payments. What we learned went beyond “is this easy to use”.
People told us the usual process left them feeling overwhelmed and powerless. The tone and clarity of what they read mattered to them as much as what the tool could actually do. Being in control, able to deal with it privately and on their own time, made them less anxious and more willing to trust the process.
That shaped every decision after. Each screen had to help someone feel informed and supported during a stressful time. It needed friendly language and enough detail to choose a plan with confidence. Being clear wasn’t enough on its own; it also had to feel like the bank was on their side.
“
It felt like the bank was finally working with me, not against me.
Usability testing participant
Synthesis and insight map from the research
Mapping the experience
Before designing any screens, I mapped how customers would find the tool and every path they could take once inside. They could pay the full amount, pay part of it, schedule a payment for later, or choose a payment plan. Depending on what they qualified for, there were four plans: pausing minimum payments for a while, a year of lower interest, a longer-term payment plan, or a settlement (paying a reduced amount to close the balance). On every path, the priority was clear, step-by-step guidance.
Design decisions
Most of the design work went into three screens: the alert that brings customers in, the page where they choose a plan, and the page that explains the plan they chose. For each one, here’s what we went with and what we moved away from.
The way in
A "Things to do" alert on the homepage, something TD didn't have yet.
People who don't answer phone calls usually don't open letters either, so the way in had to be somewhere they still go: their online banking. I explored different spots and styles on the homepage customers see after they log in. TD had nothing like it, so whatever we designed had to be reusable by other teams, not a one-off.
WHAT WE WENT WITH
A two-column layout with the alert at the top, using colour, clear labels for screen readers and a single obvious button, while keeping things like My Accounts easy to reach.
WHAT WE MOVED AWAY FROM
Our first idea, a carousel of rotating alerts. Carousels are hard to use with screen readers, make it easy to miss something important, and look odd when there's only one alert.
Choosing a plan
Helping people find the plan that fits.
Once customers were in, this page showed them the payment plans they qualified for. The goal was to guide them through it, so they could understand each option and choose the one that best fit their situation.
WHAT WE WENT WITH
A clear title, then each plan in its own row with a short, friendly explanation and a Select button. That gave people enough information to move forward with confidence.
WHAT WE MOVED AWAY FROM
Plans side by side in columns with centred text, which felt cramped and hard to read. We also dropped a version that focused heavily on monthly payment amounts, which didn't suit people who were here because they'd fallen behind.
Plan details
Clear next steps, in reassuring language.
If someone couldn’t pay the full amount or part of it, they could choose a payment plan instead. After they picked one, this page explained it in full: what they’d pay, how long it lasts and what happens next. The details changed with each plan so people could easily compare them, and the whole page was designed to show the bank was working with them.
WHAT WE WENT WITH
The same structure for every plan: what to do next, what happens during the plan and what happens after it ends. People always knew where they stood.
WHAT WE WENT WITH
Warm, human language at the most personal moments, like “it’s not uncommon to experience hardship”, plus a clear note that their answers stay private.
Testing and what we heard
I ran two rounds of usability testing, six people each, all with experience falling behind on credit card payments. In the first round, people worked through the tasks on their own while we recorded, to check whether the payment steps were clear. The second round was one-on-one with a facilitator, and focused on whether people understood the plans and how the tone made them feel.
"
Very easy and user friendly, no anxiety waiting times… I can choose what option works best.
"
"This is a really great idea… especially during pandemic/debt recovery."
The biggest lesson was that clear structure and the right tone did most of the work. Even small changes to wording or layout made a big difference to how confident people felt.
Final designs
Mobile
I designed every screen to be responsive, so DCAP worked just as well on a phone as on a computer. I also worked closely with the TD app team, and the designs held up well enough that they reused them for the app version instead of starting from scratch.
Mobile screen: the Things to do alert on the online banking homepage
Mobile screen: choosing a plan
Mobile screen: confirmation after accepting a plan
The two main journeys
Everything above comes together in two key journeys: paying the full balance, and accepting a settlement. Both start from the “Things to do” alert on the homepage.
Paying in full
Prototype: paying in full
Clickable prototype: homepage alert → payment options → pay in full
Accepting a settlement
Prototype: accepting a settlement
Clickable prototype: homepage alert → payment options → choose a plan → settlement
What I learned
Empathy and clarity have to work together.
When you’re designing for people going through financial stress, every message has to feel supportive but still be clear enough to act on. Leading DCAP’s design also helped me grow as a leader. I guided conversations across teams, kept decisions aligned and made sure the experience worked for both customers and the bank.
I also learned how much it pays to bring people in early. Involving compliance, accessibility and engineering from the start helped us create designs that could be reused beyond DCAP, starting with the “Things to do” alert.