eater thumb@2x.png

Eater Maps

Eater Maps

As part of the Audience Experience team at Vox Media, I worked as the Design Lead to re-imagine Eater's popular maps into a dynamic web product with as much personality, point of view, and usefulness as the content itself.

The resulting re-design provides an experience that is more tailored to users varying needs, more in line with Eater’s editorial strategy; and saw dramatically increased performance metrics for scroll depth, ad impressions and bounce rate.

eater.com/maps

 
eater thumb@2x.png
 
Artboard 1@2x.png
Artboard 1 copy@2x.png
Artboard 1 copy 2@2x.png
 

Our discovery process included gathering data about current usage, navigation, demographics, entry and exit points. We then built prototypes and conducted interviews to gain insights on our hypotheses before moving into design.

We worked with Eater to create a new experience that provides better emphasis on the content; designed a navigation that serves casual browsers and focused researchers; and created a new experience that unifies this experience on the web.

 
Before/After: Mobile Recommendations

Before/After: Mobile Recommendations

 

Exploration & Curation

Eater’s maps serve as dining guides that provide a more trustworthy source versus aggregation algorithms or crowd-sourced reviews. Their maps focus on what makes a place distinctive; highlights unique or under-represented locations; and covers well-known places with a fresh perspective.

As a result, we realized readers interact with Eater maps in different ways. Some enjoy reading Eater’s unique perspective to stay informed about a city’s food scene. Others use the maps more actively. They want to eat.

With that in mind, we designed an experience that gives the user control over how they interact with the content. Our final product provides immersion with the editorial content without sacrificing utility that users need to make a dining decision — sharing the reviews with friends, finding related guides, making reservations or getting directions, are all at their fingertips.

 
A sampling of iterations during interview and testing phase

A sampling of iterations during interview and testing phase

Google maps display refinements before/after

Google maps display refinements before/after

Maps product in use on Curbed

Maps product in use on Curbed

 

Built on a flexible design system

Eater was identified as the primary editorial partner for the map product, but as part of Vox Media’s Chorus platform it is an available feature for other sites on Chorus. Using our design system, the maps product is also used by Curbed to feature architectural tours and city guides.

 
 

Small UX Wins

  • We added the neighborhood info for each restaurant. This data was being stored but not displayed for users. We show it to provide better location context.

  • We moved up the restaurant info — address, phone number and website we’re hard to find. Now it’s not.

  • If a restaurant has a more in-depth Eater review article, we’re including the rating and link to the review if you really want to know more.

  • If a place has been included in another Eater map, we display those maps now so you can stumble down any rabbit hole you like.

  • We added buttons for Google Maps, Foursquare, OpenTable and other services. Users can get the info they need and move to action as soon as they like.

  • We swapped out social sharing for restaurants in our maps, and included a quick “copy url to clipboard”. Users can share a specific Eater restaurant recommendation more directly with friends via text, etc.

  • We cleaned up our Google Map API display settings. Providing a less cluttered, more focused map layer to the experience.

For more insight into some of the challenges we addressed, I wrote a launch post on the Vox product blog.