Product Comparison Tools

Project: Credit Card Comparison Tools

Role: Lead Product and UX Designer

Cross-functional team: Design, Engineering, Research

Focus Areas: User research, early engineering collaboration, mobile UX, rapid prototyping, stakeholder alignment, and data-informed iteration

The Challenge

While redesigning the credit card product and landing pages on td.con, we 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 swiping between product specs

  • Side-by-side comparison modules adapted for smaller screens

  • 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

  • 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

  • Developed 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

  • 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 weekly based on insights

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

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. I 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).

We learned from design research that users want more side-by-side views when it comes to comparison, so we are testing several options to enable that behavior

Simple changes to our current compare drawer (adding a 4th column on desktop and a 2nd row on mobile) will allow users more control when comparing. I drew inspiration from eCommerce websites like Patagonia and Best Buy and modified our UI within our existing style and brand standards.

A modal window on desktop will appear when changing selection, rather than bringing the user back to the main landing page to select a different product. Below, the desktop and mobile renditions of this carousel

This concept I designed is being prototyped now and will go into user testing in early July 2025. My team has two other concepts that we will be testing as well.

You can view the current experience for comparison on td.com now by selecting “compare” on any of the products.