Protoyping in Figma

A love-hate relationship

Credit Card Comparison Tool Redesign

Role: UX Design Lead
Tools: Figma, TD Design System, Design Research
Team: UX Designer (me), Design Researcher, Engineers

The Problem

Through user research on td.com’s credit card experience, we found a consistent pain point: customers wanted a clearer way to compare credit cards side by side — especially on mobile. Our existing experience only allowed for limited comparisons (up to 3 on desktop, 2 on mobile) and lacked flexibility, interactivity, and clarity. Users often had to jump back and forth between pages to gather the information they needed, leading to frustration and drop-off.

The Goal

Redesign the credit card comparison tool to:

• Enable more flexible comparisons (up to 4 cards on desktop and mobile)

• Improve the mobile experience

• Reduce friction when adding/removing cards

• Surface key differences clearly while still providing access to detailed info

My Approach

I led the design effort, starting with a competitive audit of product comparison experiences across e-commerce sites like Patagonia, Best Buy, and Apple. I used these insights to guide interaction design decisions that emphasized flexibility and ease of use.

Key improvements included:

• Expanded Card Limit:

  • On desktop, I updated the layout to support up to 4 cards by adding an additional column and optimizing padding.

  • On mobile, I redesigned the comparison drawer to allow 4 cards, not just 2, improving parity across devices.

• Enhanced Interactions on the Compare Page:

  • Drag to Reorder: Users can now rearrange the order of credit cards, which we hope prove to be intuitive during testing and aligned with mental models from online shopping.

  • Expand/Collapse Sections: Long tables of info can now be toggled open/closed by section, giving users control over how much data to view at once.

  • Add/Remove Within Modal: Instead of navigating back to the homepage, users can open a modal carousel to browse available cards, clearly seeing which are already selected.

Prototyping Strategy

To bring this to life for user testing, I created a mid-fidelity interactive prototype in Figma, focusing on key interactions rather than building out every possible edge case (since... we still had about 3,000 other projects 😅). Collaborating closely with our design researcher, we scoped the prototype to:

• Simulate drag-and-drop card reordering

• Demonstrate expand/collapse sections

• Mimic the modal-based card selection flow

We intentionally kept the prototype lean while still capturing the core experience, allowing users to complete realistic tasks and provide useful feedback.

What’s Next

We're launching moderated testing in the next few weeks. From there, we’ll iterate based on user feedback and prioritize the most impactful improvements for development. I’m especially excited to see how the mobile modal and drag-to-reorder features perform.