TD Bank (US)

Role
Design Lead, UI/UX Design

Project goals

• •     Digitize several credit card customer experiences that thus far have only been accessible to users through mail, paper forms or through the phone with customer service agents.
• •     Reduce call center load and allow users to independently manage their credit card preferences.

Features

1. Balance Transfers
2. Income Capture
3. Replace Credit Card (coming soon)

What I did

I designed the wireframes for Balance Transfers on mobile, and the end-to-end experience of the feature on desktop. I led the mobile design for Income Capture and Replace Credit Card features.

For all features, I collaborated with product owners, project managers, business analysts, copy writers, designers and developers to iterate and build features. For Balance Transfers, I collaborated with researchers to define user testing questions and validate scenarios.

Balance Transfers

Our goal was to design a native balance transfer workflow experience with digital capability that is flexible, convenient, engaging and intuitive.

At the time, TD customers were not able to process balance transfers digitally through online and mobile banking. Customers would receive a Balance Transfer offer in the mail and mail in a cheque or call to transfer their credit balance.

Challenges

Managing impact to other platform areas
We had to ensure that any changes made that impacted areas of the platform outside of balance transfers were communicated with the teams managing that area, and approved to implement. This limited the number of entry points that were possible on the home page, but proposing several iterations allowed us to still provide users with optimal entry points.

The team had extensive documentation of components for iOS, Android and Web which we referenced throughout the project, contributed to when needed, and collaborated with internal product teams to ensure that the components we were using are up to date.

We had to ensure that any new screens created followed existing styles. For any new components proposed, we presented our solution to TD leads in charge of the design system for approval and implementation into the components library.

Understanding Balance Transfer processes
Starting this project, I was not familiar with balance transfers as well as the terminology and abbreviations used across the customer banking platform. Creating user flows allowed me to quickly validate my understanding of the process and ensure that the screens designed will provide an accurate user experience.

Prior to joining the team, a competitve analysis of the banking transfer processes in other banks was also conducted. Taking the time to analyze competitor screens and prioritize best-in-class features helped to gain a clearer understanding of user expectations.

Building trust and convincing stakeholders
Being unfamiliar with standard balance transfer procedures was a challenge at first, but gave me a set of fresh eyes when thinking about the user experience. This allowed me to propose solutions that while prioritizing the user, pushed the boundaries of existing stakeholder perspectives that were held from a business lens. Validating assumptions through user testing and referring to usability heuristics allowed us to advocate for the user and create a seamless experience.

Managing user expectations
My goal for this implementation was to make sure that users have a clear understanding of their balance transfer offers prior to beginning the flow. This included the offer amount, the length of the offer, expiry date, balance transfer fee and a link to learn more about balance transfers in general.

After feedback from stakeholders, we also had to make it clear to users that offers are specific to certain credit cards. For a seamless user experience on Web, I included all offers in a collapsable menu with the credit card image and name as the primary heading.

User Testing

An unmoderated and remote online study was completed asking 21 participants to walk through several tasks in a prototype to answer to the following questions:

1. Are users able to find how to transfer a balance to a TD credit card?
2. Which paths do users take to balance transfer?
3. Do users understand the process of transferring the balance?
4. What barriers exist to transferring a balance to a TD credit card?

User Testing Results

Are users able to find how to transfer a balance to a TD credit card?
Almost all users were able to find a path to Balance Transfers. However for half of these users, their initial impulse was to select a link that would not have led to Balance Transfer. These users believed Transfers at the top of the page would lead to the Balance Transfer flow.

This was one of the primary entry points to Balance Transfers that I initially proposed but received pushback from stakeholders. After presenting these results, we were able to validate our assumption and receive stakeholder support.

Do users understand the process of transferring the balance?
All users were able to complete the Balance Transfer flow, One user tried to continue with the flow without typing in a balance amount. Once getting the error message, they corrected and completed the flow.

Three of the users noted the fine print was clearly displayed in the flow which was helpful in having all the information (such as the Balance Transfer fee).

What barriers exist to transferring a balance to a TD credit card?
One user wondered if the transfer happened immediately and whether there were any security measures. Another user was surprised she could complete this process online and didn't have to call.

Solutions Overview

Throughout the balance transfer experience, we accomplished several key goals including:

• •     Ensure users are notified on all platforms that they have a balance transfer offer available.

• •     Give users multiple entry points that are easy to find to view their offers.

• •     Create a hierarchy that communicates that offers are specific to a credit card. One card might have an offer, while another has no offers.

• •     Balance transfer offer details, fees and processes are transparent and easily visible.

• •     Be proactive with error messaging. Preempt issues whenever possible and help users recover gracefully.

• •     Use existing patterns where appropriate from the TD digital ecosystem.

Outcome

Our deliverables were the first MVP of balance transfers which included user flows, wireframes, and visual designs for native mobile and browser. Balance transfers were integrated seamlessly into the existing TD platform allowing users to view and action on their balance transfer offers online in a way that is fast, responsive and informational. This feature was released in early 2022.

I was the lead designer for this implementation on native mobile and tablet for iOS and Android, and collaborated with copy writers, business leads, engineers and another designer who led the desktop web experience.

Challenges

Managing personal banking and business banking credit cards
One of the biggest challenges was managing the experience across all user profiles, including those with personal credit card accounts, business credit card accounts and both. I had to manage several flows that could account for all experiences, making sure to indicate to the user what information they should have prepared before beginning the flow.

Entering income for multiple credit cards
I also had to account for scenarios where a user is managing multiple business credit cards and is looking to update their business income for all cards.

While there was no way around asking the user to input their gross annual revenue for every business credit card due to backend limitations, we made sure to make this step as quick as possible by displaying all previous business revenues entered and making use of the native keyboard to allow the user to navigate quickly between income fields.

In comparison, income entered for personal credit cards is a global update and will apply to all personal credit cards.

Outcome

This feature was launched in Q2 of 2022 for native iOS, Android and web platforms, allowing users to update their annual income and gross annual revenue for both personal and business credit card accounts.