Credit Card Compare Tool

The problem: The existing credit card tiles on the card marketplace on CreditCards.com are hard for users to compare against one another when shopping for a new card to add to their wallet. The existing tiles are stacked vertically and don’t allow for easy comparison.

The solution: Worked with cross-functional teammates to create a card comparison experience that would allow users to add cards to a tool that would allow them to more easily compare side-by-side. Before creating wireframes, I researched other comparison tools from direct and non-direct competitors. I collaborated closely with developers and product owners to create an MVP solution as well as a follow-up stand-alone tool that would allow users to have direct entry to the tool without needing to add cards first from card category pages. Both solutions were then utilized on CreditCard.com’s parent website, Bankrate, after I left the CreditCards.com team.

Wireframe of card comparison tool standalone page showing card selection functionality

Showcases inclusion of hovers and dropdown states for the tool

Wireframe of standalone tool showing 2 of 3 possible cards being compared

Wireframe of standalone tool showing 3 of 3 possible cards being compared

Mobile wireframe of card compare results

Mobile wireframe that showcase the sticky header element to allow for easy apply

Screenshot of live site showing toolbar entry into the tool on mobile

Screenshot of live site showing toolbar expansion functionality

Early exploration sketches for the compare hub (not necessarily in order)

Behind the scenes of taking photos of my sketch book – the cat’s name is Stellaluna 🙂

Early sticky note exploration sketches of the add to compare functionality

Sketches exploring add to compare functionality and layout of cards to be compared

Early sketches of two cards added to be compared and functionality to add a third