clock menu more-arrow no yes mobile

Filed under:

Evolving the Eater Maps experience

Today we shipped an updated version of our Eater maps, which are among the most engaging content across all of the Eater sites. We wanted to provide the best possible experience for our users who turn to Eater when they’re looking for trusted recommendations on where to eat.


Discovery— how do people use Eater maps?

To start the project we worked with our User Research and Analytics teams to understand pain points in the current maps experience, and to better understand the context in which people use Eater maps today.

CHALLENGES

Our research surfaced several challenges, in reviewing them with the Eater editorial team we identified a few areas of focus for our new maps experience.

  • Users were unclear how to explore more content from map pages. The maps felt disconnected, and next steps weren’t always clear. We needed to provide easier access to related content, better navigation, and clearer affordances within the map listings.
  • Confusion how the maps were populated. While the maps are listed numerically, they are ordered by geography (not by rating or other factors). Context was missing. We needed to clear up this distinction, while still helping users navigate longer lists.
  • People use our maps differently. Across our audience, people use Eater maps in two primary ways. One group views the maps mostly as restaurant reviews, and enjoys reading Eater’s content to stay informed about their city or the food scene in general. Other people use Eater maps more actively. They want to find a place to eat. Eater’s recommendations provide a more trustworthy source versus crowd-sourced reviews elsewhere.
Before: The previous desktop approach over-emphasized the map, and the mobile reading experience felt too crowded with the map sitting on top while you scrolled.

We needed to provide better means of navigation, more context, and more targeted support of specific tasks. We also wanted to make the guides easier to read in general by improving visual and type hierarchy, and adjusting other UI issues.


Delivery—finding product balance

After having a clear understanding of the UX areas we wanted to improve, we created some refined user journeys. We also began sketching out solutions and wireframes.

IMPROVING READABILITY

We initially focused on adding new utility features that felt too similar to Yelp, Foursquare, or Google map products. While it might have added some nice features, for Eater our core focus was on the editorial content and we didn’t want that to get lost.

Finding the right balance was a challenge. After a few rounds refining wireframes, we felt like we were striking the right tone for Eater.

After: An evolved design with more focus on recommendations

We created a more engaging content experience on desktop by inverting the focus. The map is still present and provides reference for location, but the primary focus is now on the recommendations. This adjustment allows for a better reading experience and more space for featuring photography.

On mobile, we again kept the reading experience front and center, and removed the map from the initial view altogether. Instead, we added the option to toggle over to a more map-centric view.

We also added a few more details — like including links to Eater’s review ratings when available. If a restaurant is featured in any other Eater maps, we’re including those as well for easier exploration and discovery.

AND CLEARER UTILITY

For hungry commuters, or friends looking for a new place to try out, we’ve focused on giving them the help they need to find a great spot. Our goal was to still provide access to the utility people want, as clearly as possible.

Before/After: Mobile Recommendations

  • We added neighborhood info for each restaurant for quicker reference, and pulled up other relevant reference information like the address, phone number and the restaurant’s website.
  • Based on our user research, buttons for Google Maps, Foursquare, OpenTable and other services are also available to allow users more specific info as quickly as possible.
  • In place of social sharing for restaurants in our maps, we included a “copy to clipboard” link, so users can share the restaurant recommendations more directly with friends.
  • We cleaned up our Google Map API settings to provide a less cluttered, more focused map layer.

Eater maps can now be adjusted based on the users preferred view.

By providing two views for the guides on mobile, we’re allowing users who want stronger location context to have a better experience. They can explore via the map, and expand places to find the same key information.


Wrapping up—launching updated maps on Chorus

This was a unique challenge, and we’re excited to have it launch today. Check out “25 Lovely Outdoor Dining Spots in NYC”, or “20 Essential Brunch Restaurants in Chicago” to see it in action.

Like everything we work on for Chorus, we’ll be continuing to learn, iterate and improve on our maps, but we’re hopeful this is a step towards a better experience.


This project was a joint effort by many people across Vox Product, including, but not limited to:

Audience Team: Priya Ganapati, Yesenia Perez-Cruz, Andrew Johnson, Ian Carrico, Ambika Castle, Ben Alt, and Kristin Oakley.

User Research: Gregg Bernstein, and Analytics Team: Ashley Tsang and Deeplaxmi Adke.

Special thanks to Amanda Kludt, Sonia Chopra, and the rest of the awesome Eater editorial staff. Thanks to Andrew Johnson, Sanette Sloan, and Yesenia Perez-Cruz for their helpful edits.