overview

Project

Creating a new version compare card page for the American Express website to drive revenue.

Role

Sole designer working with product manger and marketing stakeholders.

 
 

Timeline

2 months

Target Demographic

Customers that would like to compare credit cards on the American Express website.

 
 
 

 

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

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.

 
 

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.

 
 

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.