Behind Vox.com’s homepage refresh

As we wrote last month, we’re in the process of moving all of our brands’ homepages to a new, unified product. This week, we’ve relaunched Vox.com’s homepage. This is the first redesign of Vox’s homepage since 2014, and it was a chance for our team to work with Vox to create a homepage that better reflects their editorial strategy today.

Among the changes, you’ll see a newspaper-inspired layout, increased density, better wayfinding, and more promotion for video and podcasts.

The “Newspaper” layout

The first thing you’ll notice when looking at the desktop homepage is we’ve gone with a newspaper-inspired layout, which is a departure from the previous photo-driven design. In our kickoff meeting in January, the Vox team told us they needed a homepage that felt credible, smart and represented the depth and breadth of their coverage. Additionally, Vox had grown, both in terms of audience and coverage areas, since their last homepage refresh. Their homepage needed to reflect their new editorial strategy.

To us, that meant creating something that was more serious and functional, but still retained Vox’s distinct branding. We explored several layouts that focused on functional density before settling on this newspaper layout.

Why did we go with a newspaper layout?

First, it’s an established pattern that’s recognizable and credible within the news industry. Second, this structure allows us to display more content and increase density without sacrificing elegance. Lastly, the top eight stories in the hero provide an at-a-glance view of the most important stories of the moment, without the user needing to dig for it. We’re also displaying additional context around top stories, which gives audiences a greater understanding and gives Vox more opportunities to editorialize their front page.

It took lots of finesse to get the newspaper hero working just right. Because the hero is so visually pared down, we had to ensure the typographic hierarchy, the number of stories and the spacing were working perfectly. The yellow bracket around “Top Stories” is a seemingly simple detail that holds the hero together. We also spent lots of time in code, adjusting the type hierarchy and padding to get the balance just right. The GIF below shows some of the evolution of our designs.

(Thanks to the Vox team for their keen eyes during visual QA and our front-end engineers for all the fine-tuning!)

Increased Density & Better Wayfinding

A primary goal of this redesign was making it easier for users to get around. In contrast with Vox’s previous homepage which had many modules and sections, this homepage has two key areas: Top Stories and The Latest. Top Stories contains the most important stories of the moment, while The Latest is a reverse chronological feed. This structure is consistent across all of our new homepages, since our homepage audience typically consists of return visitors who are looking for fresh content since their last visit

In practice, it means we’re calling attention to Vox’s most important work, while also increasing the density of new stories and providing clear content signals. The increased density is especially apparent on small screens.

Highlighted Podcasts and Videos

If you look at the Vox homepage on your phone, you’ll notice that videos have a special treatment. Improving video viewing experiences has been a goal for the entire Vox Product team. For our new homepages, we focused on making video playable everywhere. Now, you can watch Vox’s stellar video content straight from their homepage.

We also have a new podcast module which looks especially snazzy with the new podcast cover art our Brand Identity team has designed. We are highlighting video and podcast coverage to demonstrate how Vox expanded coverage beyond written words.

What’s next?

Along with the updates to the homepage, we’ve rolled out some updates to the entire site, including a revamped navigation with exposed links, a white page background, and improved type sizing for articles on small screens. We’re incredibly excited to have this new homepage and brand update for Vox out in the public.

We now have three brands running on our new homepage product: The Verge, Curbed, and Vox. As you can see, each is built on a consistent foundation, but each has a distinct expression of the homepage product. We’ll be launching three more new homepages in the coming months, so stay tuned!

In the meantime, share your thoughts with me @yeseniaa.

---

Many people worked on this project to make it a success, including Chris Haines, John Fuller, Sanette Tanaka, Ally Palanzi, Greg MacWilliam, David Zhou, Ben Alt, Jesse Young, Jason Ormand, and Krissy Kingwood from the Unison team; Jon Douglas and Nancy Seay from the Quality Assurance team; as well as Agnes Mazur, Susannah Locke, Andrew Golis, Melissa Bell, Ezra Klein, Allison Rockey, Lauren Williams, Joe Posner and the entire Vox editorial team.

Special thanks to my colleagues Katie Kovalcin and Sanette Tanaka for their thoughtful edits.