Hi, us again. If you’ve been following us recently, you know that our team is in the midst of moving all of our brands’ homepages to a new, unified product. As of today, our eight flagship brands’ homepages are all running on the same version of Chorus (our content management platform).

Six of our brands—The Verge, Curbed, Vox, Polygon, SB Nation, and as of last night, Eater—are running on our homepage product designed last summer. Recode and Racked are running on an earlier, though still unified, version of the homepage. Once we move SB Nation’s team sites over in a few weeks, all of our brands’ websites will share the same roots.

This week, we launched a new homepage on Eater. Eater holds a special place in our hearts, and in our stomachs. As the authority on dining and food, Eater helps their audience navigate how to dine, drink, and enjoy around the world.

Eater joined Vox Media in 2013 and the homepage hadn’t been refreshed since 2014. Since then, says Eater managing editor Sonia Chopra, they’ve expanded their videos, longform, and starred reviews, and doubled down on maps, travel, newsletters, and big packages. Their new homepage needed to reflect their shifting editorial priorities, and help them guide their audience in the best way possible.

One brand, 24 homepages

Referring to a single Eater homepage is a misnomer. The Eater network is actually made up of 24 separate sites—the national eater.com site, as well as 23 city-specific sites—and each have their own homepage. The national site and city sites differ in the behaviors of their users, editorial strategies, and types of stories published. For instance, the national site tends to feature larger trend pieces whereas city sites publish more functional, service content like maps and guides. We had to create a design that served both.

“Where should I eat?”

We had one simple goal that drove our homepage design—make it easier for Eater’s audience to figure out where to eat. All of our homepages at Vox Media already abide by a set of principles around delivering better performance, providing clear content signals, addressing user needs, and enhancing brand impact.

For Eater specifically, we focused on tightening the hierarchy, surfacing high-traffic stories, and offering enough flexibility to serve both city and national sites.

Each relaunch is an opportunity to iterate on the homepage product by focusing on the needs of an individual brand. In practice, this means that whichever improvements we make to the homepage for Eater will benefit all of our brands.

Starting with research

We spoke with Eater’s editorial team back in August when we were first designing the underlying homepage product, and again earlier this spring when it came time to zero in on their launch. Ashley Tsang from our Data and Analytics team examined what was working and wasn’t working with the current site. Here’s what we learned:

The original site lacked hierarchy. The original homepage was “too intense and busy,” noted Eater editors in our first round of conversations. There were too many modules and signposts trying to direct the audience. A carousel of stories on mobile hid some of the top pieces of content. Though there were differences visually, the differences did not abide by a system and so it was hard to tell which stories were important and how they related.

People are looking for city sites. Perhaps not surprisingly, a lot of our users come to our national site looking for our city sites. Starting from the national homepage, the most commonly viewed subsequent page is the city site directory. On large screens, we found that our “Cities” link had the highest click-through rate of all links available in the top navigation.

Our city sites were successful in drawing in our audience. We learned that our city sites have a high click-through rate and were successful in engaging users with content. Each city site prominently features two high-performing pieces—the city's essential 38 restaurants, and a curated map. We wanted to make sure that we maintained the click-through rate by keeping that content highly visible in the new design.

Shifting focus

The design team went through two large rounds of design. We started out thinking we’d design different layouts for the national site and city sites. We planned to focus on news and trends with the national site, and functional, service-oriented content like maps and guides with city sites.

We learned though, that the our initial city site approach made Eater seem too static. Eater editors—both city and national—wanted to showcase their new and timely content, and our two-pronged approach wasn’t supporting that. We decided instead to prioritize one layout with enough flexibility to cater to both city and national sites.

The final product

A primary goal of our homepage product was make it easier for folks to navigate. Eater’s original homepage had a lot of modules, but this homepage has three main sections, plus a desktop-specific section:

1. A cover area featuring one, two, or three of the most important stories. We said goodbye to the carousel from Eater’s original mobile layout and instead surface the most important stories all at once.
2. A three-slot “promo bar” that features two stories and Eater’s newsletter. Our city sites are using this section to promote persistent guides and maps, whereas national is using it to showcase their annual best restaurants piece and national restaurant map.
3. A story feed showing stories in reverse chronological order. A header titled “The Latest” above the feed and a more judicious use of labels within the feed serve to further orient people.
4. Sidebar modules cater to sites’ specific content needs (only visible on large screens). For instance, on city sites, we use the sidebar to address one of our audience’s main questions—Where should I eat?

As noted during the Vox.com design process, this structure generally consistent across all of our new homepages, since we’ve found that homepage users are typically return visitors who are looking for fresh content since their last visit. As with past homepages, this structure means we can call attention to Eater’s most important work, while also increasing the density of new stories and providing clear content signals.

Streamlining navigation

Streamlining the navigation was a huge priority for us. One of our biggest wins was making city site links more prominent on small screens.

The navigation pulls city links out of the hamburger menu and saves users a step on mobile. Compare the number of steps with the original homepage (open menu; select Cities, which loads the directory page; select city), compared to the steps with the new homepage (select Cities opening a dropdown, select city).

Expressing the brand

This project did not include a full branding refresh the way The Verge and SB Nation did. Rather, we relied on Eater’s existing style guide to reimagine how Eater’s brand could be expressed visually on the homepage. We did take into account, however, how Eater has evolved since their style guide was first created. For instance, even though Eater has a wide color palette, we decided to lean heavily into the reds, oranges, and purples, which felt more on brand than say, the yellows or yellow-greens in the style guide. We also incorporated Eater’s illustrations in both the promo bar and newsletter module on stories, an homage to its fun, bloggy roots.

Finally, we greatly streamlined the typography. Eater was over our font performance budget, so we spoke with their editorial team and jointly decided to remove one of the Glober fonts that wasn’t as successful in the new design.

Looking forward

We are just a few launches shy of having all of our websites at Vox Media on this refined, unified platform. We’re already seeing the benefits of having this platform in place: as we design and build each one, we can rely on patterns and practices from past homepages. For example, we use the same promo/evergreen bar pattern on Curbed, Polygon, SB Nation, and Eater.

We can iterate more quickly and roll out changes to many brands at once instead of just one. For example, the addition of a newsletter link in the navigation is now an option available to all, not just Eater. At the same time, we’re treading carefully, committed to maintaining the unique characteristics and distinct visual language of each of our brands.

We’ve got a few more homepages to go, so stay tuned! In the meantime, share your thoughts with us @ssktanaka and @yeseniaa.

---

This project is a joint effort by the Unison team: product manager Chris Haines; designers Sanette Tanaka, Yesenia-Perez Cruz, John Fuller, and Jared Fanning; developers Ben Alt, Greg MacWilliam, Josh Larson, David Zhou, Jesse Young, and Jason Ormand; and support manager Krissy Kingwood.

Many people worked on this project to make it a success, including Jon Douglas and Nancy Seay from the Quality Assurance team; Nate Edwards from Revenue Support; Ashley Tsang from the analytics team; and Amanda Kludt, Sonia Chopra, Helen Rosner and the entire Eater editorial team. Special thanks to Ryan Gantz and Kelsey Scherer for their thoughtful edits.