Background

What do you do when you get a new Credit Card? Some do plenty of research, comparing brands and looking at comprehensive lists. For most people, that didn't seem to be the case. Our client's onboarding experience included a microsite to educate users on their card's benefits and how to make the most of them. These sites were digitized from Direct Mail pieces and as their online presence diverged from the paper version, they started to feel dated. Our client wanted to optimize these sites while retaining an adaptable template for all their card products.

Process: Having maintained the sites for two years, we first leveraged analytics to see what was going on. Once we had an idea of simple things we could address, we iterated on a few design options. Once we narrowed down options we ran those past users with concept tests, that took us back to the drawing board. Finally, we ran some A/B tests while reviewing heatmaps, scroll reach, and other key performance indicators (KPIs) over time.

Results

Our initial design updates involved repositioning headlines, icons, and drawers. These changes aimed to improve specific KPIs by minimizing content into distinct sections and reducing scroll fatigue. Users could view benefit categories and self-select into relevant content. This made things easy to find and satisfied a shorter attention span - not everyone cares about insurance as much as points.

After the first round of testing, we improved scroll reach, with over 150% more users reaching the bottom of our pages. Amazing! But clearly, this didn’t completely capture user engagement.

Upon further testing, we shifted our design approach. We prioritized user control over content organization. Although the first round of testing showed improvements, we still faced challenges:

1. There was a low diversity of engagement across content types. Heatmaps revealed an “F-shaped” and clustered engagement pattern.

2. Information overload due to dense text layout.

To address this, we redesigned the site as a multi-page experience rather than a microsite. While this reduced scroll gains, we still achieved a 30%+ improvement from the previous site. It still gave users control of where to go, but allowed us to intentionally guide them through the site. Ultimately, enhancing user education was our main goal. So it was great to see measures of higher value engagement improved, like -

Increased avg. time spent on pages by 33% and Clicks-in to benefits by 44%!

Reflections

Yays:

• The final design resulted in a far more performant site that would ease concerns around the site being dated.

• This design also gave us a lot more insight into how to weight the different pages. By nudging users down a path, we could more equitably distribute their attention and facilitate reading across categories - like travel benefits and payment features.

Nays:

• An effort like this would have benefited from a round of usability testing and eyetracking studies to get a more accurate idea of how users were processing information.

• The pandemic may skew data in terms of interest in acquiring a card and using specific features. This made some comparisons tricky while leveraging older data. Averaging measures over time to smooth out spikes and dips will help complete the picture.