Case study • Self-serve product

Credit Card Payment Options

A self-serve portal that lets customers with past-due credit card balances choose a payment option that fits their situation.

Credit card payment options surfaced in the TD mobile app
RoleLead Product Designer
Timeline1 year
PlatformWeb responsive
ClientTD Bank

Problem

Help for a past-due credit card was only available by phone, and most of the accounts that ended up sold to collections belonged to customers the call centre never managed to reach. Many never knew help existed.

My role

Led design from concept to launch, leading two designers and partnering with content design and research.

Outcome

Tens of thousands of customers used it in the first month, and nearly half took action. 2024 TD Project of the Year.

Context

TD proposed creating a digital self-serve portal that allows the customers with past-due credit card balance to select a payment option based on their preferences and their financial situations.

Before, the same service was only available through the Call Centre. But most customers could not be reached, even after months of agents actively dialling before charge-off. Besides, many customers prefer a digital experience to engage with the bank to resolve their past-due account balances.

While this portal was a new concept for the Canadian market at TD, USA Online Banking already had a similar portal. Our design team was engaged to create an easy and intuitive experience for the customers to complete the flow with a certain action or action plan.

Experience principles

From the human-centred design objectives set for the project.

Empathetic

Convey consistently that TD is helping, not opening another transaction to collect money.

Understandable

The payment options were complex and hard for a general audience to follow. Make them plain.

Easy to complete

A simple, guided process that a stressed person can finish without confusion.

What I did

  • Owned the design and led the team, a UX designer and a visual designer, from concept through launch.
  • Engaged the content designer into research instead of at the end. A content designer normally arrives at a later stage to write final copy. I partnered with ours from the start and collaborated with him to write the testing copy, so language was something we validated with users. The flow was text-heavy and the payment options were complex for a general audience, and people would be reading it at a stressful moment.
  • Built the studies with a dedicated researcher. Designing the tests together is what let us put both the flow and the language in front of users in one programme.
  • Worked inside a weekly review cadence. A design director and three senior managers at TD reviewed the work every week to make sure it aligned with the design system and the art direction, and to hold up to senior scrutiny continuously rather than at a few milestones.
  • Built a working demo. This was more effective at conveying the vision than traditional presentation decks for the business owner. The portal user experience demo was used to share the vision with senior audiences and to socialize the experience across the businesses.

Design process

  • Observed and analyzed the online DCAP USA experience to gain basic structure concept, and applied Canadian requirements, which contained new features.
  • Information architecture analysis to create an intuitive user flow.
  • Introduced the “Things To Do” section in the Personal/Business Financial Summary page and Credit Card Account Activity tab as an entry point to the DCAP flow.
  • Created step-by-step flow with simple and guided process with simple language.
  • Applied the design system to create a consistent EasyWeb experience.
  • Ran 2 user testings: 1. to test usability on payment flow 2. to test DCAP program concept and copy comprehension.
  • Applied the user test feedback and finalized the design and copy.

Research & discovery

The research question was narrow and useful: identify exactly which elements, words, and steps people found frustrating or confusing. Not whether they liked it. Where it broke down.

A dedicated researcher on the team ran the sessions, and we designed the studies together. Two rounds:

  1. Usability of the payment flow.
  2. Concept comprehension: testing the copy itself to get to a tone and content that worked for people in a difficult moment.

Testing the copy separately mattered, because the options themselves were the hard part. The differences between paying in full, paying in part, and committing to an arrangement are not distinctions a stressed person should have to decode.

What came back:

It worked! Customers found the flow easy to complete and the options comprehensible.

The tone landed. They described TD as being on their side and helping them out of difficulty, which was the emotional result we were designing for and the hardest one to get right.

Many didn’t know help existed. Customers under real financial pressure had no idea the bank could assist them at all. That reframed the problem: this wasn’t only a servicing tool, it was how people would find out they had options.

Outcome

Moving the service into digital banking changed who it could reach. In its first month, the tool reached tens of thousands of eligible customers, with 46% taking action, and 73% of the “offers” (payment options) presented were accepted.

About two-thirds of that traffic came through mobile rather than desktop, and the two channels converted at almost exactly the same rate. Customers in this situation were reaching for their mobile app. It also contributed to reducing charge-off rates and call-centre volume.

They found their options themselves, in a flow they understood, in a tone that told them the bank was trying to help.

It won the 2024 TD Project of the Year, was recognized across the bank for innovation, and was featured in the TD Innovation Showcase.

Within one month of initial launch:

46%of customers took action
73%of offers presented, accepted
~2/3of traffic came from mobile

Reflection

What made this work was the team I engaged. A small cross-functional group, the senior business manager, a business analyst, a subject-matter expert, compliance, and the engineers, who stayed in close and constant contact through a Teams group chat and jumped on a call the moment something needed resolving. On a product this sensitive, that kind of trusted communication is what let us move quickly and get the details right.

It’s also why the Project of the Year award went to the team rather than to any one of us. That’s the right way round.

“Yoko’s data driven design approach ensures experience decisions are rooted in user experience insights… She effectively articulated the vision, design direction and from there fostered an inclusive, collaborative environment where she encouraged participation from all key stakeholders.
Truly one of the best partnerships I’ve had.”
— Sr. Manager, Business Management, CCR Leadership, TD

Let’s create something people love.

Open to conversations about design leadership, product strategy, and human-centred design.

Contact me