“Shopping" for Credit Cards

TD Bank, U.S. (td.com)

TEAM
Product Design Lead
3 Mid-Level Designers
Content Designer
Design Researcher

ROLE
Product Design Lead (UX/UI)

FOCUS
Credit card comparison / product comparison tools on desktop and mobile

The Challenge

While redesigning the credit card product and landing pages on td.com, my team conducted user research to validate layout changes. During this process, we uncovered a strong and previously under-appreciated user need:

Customers wanted to compare credit card products side-by-side — clearly, easily, and especially on mobile.

Though we had prior research around general shopping behaviors, this desire for real-time, interactive comparison surfaced more strongly during follow-up testing. We knew we had to pivot to meet this need.

The Solution

We designed and tested a set of interactive comparison tools, with a focus on:

  • Mobile-friendly carousels that allow for more side-by-side comparisons

  • Modular compare charts built for future extensibility

We also explored enhancements to existing tools, identifying areas where current experiences could be updated with minimal lift.

A few iterations of mobile carousels that we tested for product comparison

My Role & Contributions

I co-led user testing and synthesis that uncovered the core comparison need:

  • Partnered with engineers early, well before prototyping, to weigh in on technical feasibility and shape component-level discussions

  • Worked with my team to develop various interactive prototypes for multiple comparison concepts — both net-new and enhancements to legacy tools

  • Collaborated closely with researchers to validate our assumptions and refine usability across desktop and mobile

  • Worked with Accessibility to ensure our designs met the needs of all users

  • Advocated for the user, even when stakeholder preferences leaned toward vertical layouts or overly visual presentations that didn’t resonate in testing

  • Maintained rapid test-and-learn cycles, iterating based on insights

A Figma file being prepped for prototyping to test a modification of an existing comparison tool

Our current comparison table on td.com can only accommodate up to 3 products on desktop and 2 on mobile. We wanted to enable up to 4 on both, and allow more user control (drag columns, expand/collapse rows, highlight key differences) while simplifying some elements of the current flow (like using a modal to switch products instead of refreshing a page).

Engineering Partnership as a Superpower

This project was a standout example of design-engineering collaboration done right:

  • Engineers were embedded early in discovery

  • Their input helped us avoid infeasible design directions

  • We aligned on shared goals for performance, responsiveness, and flexibility across platforms

This saved time, reduced rework, and ensured smoother implementation as components moved into development.

Outcomes (Ongoing)

Several comparison tools are now in development

  • One new mobile-first carousel module is heading into testing

  • Legacy comparison charts are being refactored for A/B testing

  • Stakeholders have aligned behind data-driven UX decisions, shifting strategy from visual-heavy to usability-focused design