Logo of ostrich in egg

SEO Updates to Car Rankings

U.S. News & World Report

previous car rankings page
Previous Design

The Project

Increase traffic by improving the Google rankings of the Car Rankings pages.

Background

U.S. News Cars publishes trusted, data-driven car reviews and rankings to help people find the right vehicle for them. Our readers have different priorities when looking for a car, so the content team creates rankings in many different vehicle categories.

There is a centralized navigation page with links to all of these vehicles rankings. This page is useful for Google, and it is also useful for people. Readers can scan the lists, find the category they are interested in, and navigate to the full ranking list. This navigation page already ranks well in Google, but the team wanted to optimize it further. I was brought in as lead designer on the project.

Search Engine Optimization

The SEO analyst had some specific ideas for improving the page's Google rankings, so I met with him and the product manager to talk through the suggestions. We already have detailed car review content for all of the vehicles listed in the rankings. The SEO analyst suggested bringing some of this original review content onto the page, since Google considers this type of content more useful to users. Our hypothesis was that this strategy would boost our Google rankings.

sketch mockup of page with text snippets
Functional, but not winning any design awards

We decided to test the idea before devoting a lot of design and tech resources to the project. I mocked up a minimalist version for the test. It accomplishes the goal of adding the original content snippets to the page, but it's not very scan-able. This was meant to be a quick proof of concept, followed by a more robust redesign if the test succeeded.

Since this change was for SEO, we couldn't run an A/B test. Instead, we launched the changes on only the SUV section, in order to minimize any potential negative impact. After a few weeks of monitoring the results, we saw that the added content snippets were giving the page a boost in Google rankings. It was time to devote resources to a redesign.

Establishing Goals

For this second phase, I met again with the product manager and SEO analyst to align on project goals:

sketch mockup for mobile
Sketch Page — Mobile

The Design

With these goals in mind, I got to work on the design. The added review snippets are useful, but they needed to be displayed in a way that was legible and not visually cluttered. I turned the list into cards and added the vehicle image.

On mobile, you scroll sideways to see the three cards. That way, the lists don't get too tall and you can still scan through to find the most relevant list.

I also updated the navigation so that you can still get to the other vehicle types (Cars, Trucks, etc.), but the emphasis is now on jump links that highlight all the featured categories on this page.

sketch mockup for desktop
Sketch Page — Desktop

Feedback and Build

For this page, I designed a new card component for our design system called MediaObjectCard. During a critique with the design team, I realized that another designer was working on a similar component for a different product. We aligned our designs and worked with the developers to make sure that this component was built to be very flexible, so that it can accommodate a wide variety of content for different use cases.

component in Storybook
MediaObjectCard Options in Storybook
component live on mattress page
MediaObjectCard Live on 360 Reviews
component live on careers page
MediaObjectCard Live on Careers

I also designed a hover state for the card. I coded it in Codepen in order to communicate the desired behavior to the developer.

live code in codepen

Results

The new designs continued to show the SEO boost we saw from adding the review snippets, and heat maps show that the updated pages are getting a lot of clicks into more content, which is the primary goal of this navigation page.

rankings page live
Live Page
heat map
Heat Map

By collaborating with the SEO team and understanding the requirements and constraints, I designed practical updates to these navigation pages that improved SEO as well as the user experience.