Logo of ostrich in egg

Credit Cards Optimization

U.S. News & World Report

previous best credit card page
Previous Design

The Project

Update the U.S. News Money team's Credit Card Category pages, in order to improve usability and increase lead generation conversions.


U.S. News is known for providing trustworthy, unbiased advice that helps people make important life decisions. In Money, the Credit Card Category pages rank and evaluate different credit cards, helping readers identify which card would be the best fit for them. This section gets thousands of visits a month, mostly from organic traffic, and makes a lot of money for the business. These pages already perform well, but the team wanted to find ways to optimize them further. I was brought in as lead designer to lead research and design implementation.

Iterative Design Approach

Because this section is important for our users and the business, and it is already performing well, we approach any updates with caution and data. We rely on research to shape design changes, and we test these changes slowly before releasing them to everyone.

Usability Research

In order to better understand how users were currently interacting with these pages, I conducted usability research. I ran heat maps with CrazyEgg, and conducted user tests through Usertesting.com.

heat map
Heat Map
user testing platform
User Test

Main Takeaways

Establishing Goals

Once the usability research was complete, I collaborated with the product manager, tech lead, and SEO analyst to set up optimization goals based on these results.

Primary Goal: Optimize List of Top Credit Cards

We heard repeatedly that people mainly want to see and compare the top credit cards.

Secondary Goal: Highlight the Editorial Content

paper sketch of card layout

The Design

With these goals in mind, I got to work sketching out ideas. I then moved into high-fidelity mockups, using real data to make sure the layout would work in practice.

The new card design is more streamlined, with more white space and less bold text to make it scannable. The most important data points are highlighted in the default view, and then the accordions provide progressive disclosure for people (and Google) who want more information. And the cards are a bit shorter on mobile, so you can now see the whole card on a screen.

Previous Card
previous card design
New Card
new card design
new card design expanded
With Long Text
new card design with long text
Previous Card — Desktop
previous card design
New Card — Desktop
new card design

The page now has a table of contents in the left rail on desktop, so that people can find the editorial content further down the page. After discussing with the product team, we decided to put the mobile table of contents below the cards instead of at the top of the page. This way, the secondary goal would not interfere with the primary goal of highlighting the list of top credit cards. We intend to A/B test this placement later.

sketch mockup for desktop
Sketch Page Mockup

Feedback and Build

After a couple rounds of feedback that included adding some explanatory tooltips and adjusting the layout for some data outliers, it was time for the tech handoff. I created frontend assembly tickets and included style, behavior, and accessibility requirements. I met with the tech team to discuss the tickets, and we talked through the requirements, including creating a new AccordionCompact reusable component for the cards. I also built the corresponding AccordionCompact symbol for our Sketch library.

accordion symbol built in sketch library
New Symbol for Sketch Library

Once the development work was complete, I QAed the updates and worked with one of the developers to set up a split url test in Optimizely. We are going to be testing the new layout compared with the current version to see how the changes impact lead generation clicks as well as page engagement. The test will be launching soon, and hopefully we will see some positive results.

new live credit card page
New Live Page Ready for Testing
split url test in optimizely
Split URL Test in Optimizely

Next Steps

We have plans to continue testing and optimizing these category pages. Once the new design launches, I will run another round of heat maps and user tests for some feedback. We also intend to A/B test the placement of the table of contents on mobile. And for a future project, we are discussing adding a filter feature to the list of credit cards.

Through continuous testing and optimization, we will keep working to provide our users with clear and actionable advice that empowers them to make informed financial decisions.