TD Clear Credit Card: Simplifying a Complex Product Through UX Design

The product truly is one-of-a-kind

The challenge

TD Clear is a unique credit card offering fixed monthly payments instead of traditional revolving interest— TD’s answer to products like Affirm. But the structure is complex:

  • Two credit limits ($1,000 and $2,000) and a technical issue within the application software that forces us to put them both on the front end

  • Corresponding monthly fees ($10 and $20)

  • A “predictable monthly payment” model that varies based on usage

  • Regulatory constraints that limit the language and presentation we can use

The Learning Center my team inherited (above) was a bit of a “link farm” with no real content strategy and outdated content

To complicate things further, we lacked a component (module) in our website platform library (Adobe Experience Manager) that could support this highly specific product format. The value prop for building such a custom component from scratch was considered low by our central component pod, so the request was deprioritized.

My Role

As the UX and visual design lead, I was responsible for:

  • Translating a dense financial product into a digestible, user-friendly layout

  • Navigating legal and compliance constraints around wording and tooltips

  • Collaborating with researchers, developers, and our platform governance team to find a viable path forward

  • Advocating for a better long-term design solution once we were able to acquire our own dev resources

Our first approach

We initially launched a side-by-side layout (pictured above) to distinguish between the two TD Clear credit line options. Despite the product’s complexity, usability testing showed this layout helped users generally understand the difference. However, it wasn’t ideal for accessibility or mobile responsiveness, and didn’t scale well with our comparison tool.

The Breakthrough

When dedicated developers joined our team, we revisited the layout. I proposed a tabbed interface, which:

  • Reduced visual clutter

  • Allowed us to isolate each credit limit and its features

  • Integrated more cleanly with our credit card comparison drawer

  • Maintained compliance by using required language (“predictable monthly payments”) and layered explanations via tooltips

The new tabbed interface

What Made It Hard

  • Compliance Overhead: Every word that goes live on td.com must go through a team of legal and compliance folks. Words like “easy” were off-limits.

  • Technical Constraints: Our site runs on a rigid component system. We had to work within the existing library until we could get our own development resources.

  • Product Complexity: Even with improved design, the card’s structure is inherently hard to understand, so simplicity and education had to coexist.

  • Comparison Drawer Compatibility: Tabs introduced new interaction patterns that had to be aligned with the new comparison flow.

Outcome (In Progress)

The tabbed layout is in development and will be live by end of July 2025. Early feedback from internal stakeholders and compliance reviewers has been positive, and we expect a smoother user experience with stronger product clarity and mobile scalability.

Takeaway

Sometimes, the biggest UX wins don’t come from flashy redesigns, they come from clarity. This project was a masterclass in untangling complexity, making regulatory compromises without sacrificing usability, and finding creative solutions within a limited system.