Compare Cards

American Express

Most compare card sites have very poor conversions. So I took it upon myself to do a case study on what was doing well, what was not and how we could improve the overall experience.

 

Competitive Analysis

The comparison of products for their features and specifications will help make a better decision for a new experience.

  • Using bars to separate each of the cards out

  • Bottom sticky navigation

  • Once compare cards clicked it would go to a new page

 

First Sketch Iterations

After I went through the competitive analysis of how other companies compare credit cards, I started sketching out new ways to display the compare card experience on American Express’s website. At every stage of the design process, my goal was to bring clarity to the user experience so that it is easy for a customer to find information fast.

IMG_2734.jpg
IMG_0249.jpg
IMG_0431.jpg
 

Presentation to Stakeholders

Learning about the competition and starting an internal conversation about UX can be a challenge for many stakeholders. Our goal should be to have buy in on all levels of management which include discussions of what is possible from our current conversion rate. This needs to be done

 

Desktop Wireframes

When working through a new concept, it’s best to show the stakeholders wireframes with no color or images as to focus on the UX concept/functionality over the UI. The purpose of this case study was to design a better experience across desktop and mobile, as over 96% of our users use one or the other to compare cards.

 

First Mobile Concept

This new concept allows users to easily view the different cards within their VAC and compare. Inspired by Apple's iPad Pro experience on desktop, this option would allow users to stay on the VAC while looking through all of their options.

 

Second Mobile Concept

This mobile interaction is closer to the current live version with a bottom sticky nav for the three cards instead of two. With these three cards, I have created a tab experience to be able to click through the three cards to compare. As the user scrolls down the comparable details, the user can click between the cards and see the same details on different cards.

 

Learnings

After creating this case study, I presented it to the VP of Product as well as stakeholders that would be involved in the project. Once the presentation concluded, they agreed with me that it was time to make updates to the UX/UI experience but that due to the 1.45% conversion rate on the live experience they won’t be able to bring this into a sprint till the new year.