SCOTIABANK

Credit cards category page optimization

In this page, customers have the possibility to compare different credit cards. However, the wide range of products displayed in this page could make this process more difficult. This is why we wanted to optimize this page solving problems of information architecture and navigation using an A/B test strategy.

Default

Users see all the cards displayed at once when landing in the category page causing a perception of “too many” cards that could make the selection process more difficult. Having the same product across different tabs could cause confusion making the comparison process more difficult as well as having too many tabs.

In mobile devices, users possibly skip the credit card filter while scrolling due to size, position and navigation pattern. Credit cards block don’t show any information that could help the user to compare.

Variant

The number of options in the tabs was reduced and a set of icons was implemented helping the customer to differentiate the type of reward for each card. A “FEATURED” tab replaced the “All cards” tab reducing the perception of “too many” cards while offering recommended products to the customer. Each credit card belongs to only one tab with the exception of the cards in the featured tab, reducing the confusion of having products in multiple tabs.

The Banner ad was removed for mobile devices and the filter was left in a fixed position at the top of the page allowing an easier access while scrolling. Introductory bonus and type of reward was added in each credit card block to give some information to the customer to compare. The order of the buttons was inverted to have a more logical order.

As a result, this optimization increased significantly the number of clicks impacting successfully the engagement of this page.