Jessica Prague

Eater App

Designing a personalized watchlist experience for Eater, a food recommendation app
Jump To:

Context •  The Problem •  Research •  Brainstorming •  User Flow •  Design Decisions •  Final Flow •  Prototypes •  Takeaways

Overview

A feature allowing users to create personalized watchlists to share with friends and make food recommendations.

Team

5 Engineers, 3 Designers, 1 Project Manager

Role

Product Design Intern

Timeline

6 Weeks, Summer 2018

overview image
Context

About the Project

In July of my summer internship at Vox Media Company, I moved to the Consumer Products team to help design a Progressive Web App for Eater, one of Vox's eight media brands. The Eater App offers restaurant recommendations to users based on location, cuisine types, and overall interest. Unlike dining apps like Yelp, content for Eater comes from trusted Eater editors who are physically immersed in the world's greatest food cities. I was tasked to create a new feature that will increase engagement and create more of a "food experience" within the app. Working closely with other designers and engineers, I designed a watchlist feature, which allows users to create and share an assortment of personalized collections of restaurants.

final design

Final Screens

Let’s see how I got here 👇🏼
Getting Started

Understanding the Current Eater App

The Eater App (not yet launched) is a multi-surface product that helps users explore restaurants in their city and discover places to eat. The app currently consists of 3 tabs:

current screens

The 3 current pages

The Problem

"If you’re looking for good food recommendations, how often and for how long do you see yourself utilizing and engaging with this app?" 

the problem

By exploring the app and talking to potential users, I realized that users are limited to only cuisine and location explorations. They must enter the app knowing what they're in the mood for, which causes (1) low engagement with the app (you must enter with a goal) as well as (2) a limited opportunity for exploring.

THE GOAL/OBJECTIVE

To drive richness and increase engagement within the App, creating more of an experience.

"How Might We's"
user Research

Understanding our Users

On approaching this problem, it was important to gain a better grasp of how Eater users discover places to eat. We conducted 7 interviews with individuals who use Eater and had several conversations with casual Eater users. Our goals were to:

Affinity Diagram

I then began to map our observations from user interviews in order to pinpoint the underlying themes and trends from research. Using countless post-its, markers, and a whiteboard, I constructed the affinity diagram below. As I presented this to my team, what really stood out to us was the fact that users open about 2-3 different apps (Notes, Maps, Google Sheets, etc.) from the time they research places they'd like to try to when they actually eat out.

affinity diagram

Digital Version of Affinity Diagram

Creating the Affinity Diagram

Creating the Affinity Diagram

Original Affinity Diagram

Original Affinity Diagram

user research takeaways

Key Findings

1.Eater users like to share and receive restaurant recommendations from friends.

2. Users typically plan meals out ahead of time.

"Earlier in the week, on Mon. or Tues., I will start looking through restaurants and look at different options. I like to plan which meals I am going to eat our versus cook."

3.Users like to stay organized and categorize their favorite restaurants.

"I create spreadsheets and use my native 'Notes app' to save ideas for food and restaurants. My lists are more aspirational, and I even have a restaurant bucket list!"

4.Multiple apps are used to decide where to eat out.

"I keep a ton of lists. A lot of the time I am on Eater I will email myself the articles. If I am on google maps, I keep notes in my cellphone."

5.Users really trust Eater's curated lists because the content is edited, so it's reliable.

Personas

Empathizing with the Target Users

To really get a feel for the target users, I always like to create fictitious personas so that I can jump into the users' shoes and really understand their needs, wants, thoughts, and priorities. The target users typically fall somewhere between this Foodie Spectrum:

the spectrum

I fall somewhere between Lucy and Jackson 😎

Persona1 Persona2 Persona3
Three Personas

Obsessive Foodie (Sage)

Moderate Foodie (Jackson)

Casual Foodie (Lucy)

Brainstorming

Exploring Solutions

During an hour-long "brainjam" session with my manager, we brainstormed 3 different features that could solve the lack of engagement problem within the app and create this elevated Eater experience.

1. Travel Guides

Seeing cities and hotspots across the world through different stacks of travel-related Eater content, such as "The Hottest Restaurants in Lisbon."

Feature 1

Low-Fidelity Sketches of the Travel Guide Feature

2. Watchlists and Sharing

Creating personalized collections of lists, like "Brunch Ideas" or "Summer Meals," that users can interact with by creating and editing them, adding restaurants, and sharing with friends.

Feature 2

Low-Fidelity Sketches of the Watchlist Feature

3. Photos and Instagram

Attaching user-generated photography and/or Instagram posts with each restaurant.

Feature 3

Low-Fidelity Sketches of the Photo Feature

User Stories

How Will Users Utilize Each Feature?

Now that I brainstormed 3 potential features, I analyzed how each of the 3 foodies will use each feature. This helped me understand which feature will be most impactful for the users. 

Features Map

Next, I paired up each persona with a potential feature and went through user scenarios. The goal was to take these three feature ideas and create actual use-case scenarios on how foodies would iterate through the flow.

1. Watchlists ✕ The Obsessive Foodie

2. Travel guides ✕ The Moderate Foodie

3. Photo feature ✕ The casual Foodie

user-story-1 user-story-2 user-story-3
Choosing the feature to pursue

The Watchlist Feature

I initially loved the travel guides feature, as it elevates the app to a worldly, aspirational experience that combines food and travel. After sketching out some initial ideas, I learned we are limited by Eater's content and what's available in the API. Since we can't create our own travel content, this travel experience might not be as valuable.

I realized that with these constraints, we might have to go back to the drawing board. You can’t fall in love with any idea because it may not be the best solution.

Thus, I decided to move forward with the WATCHLIST FEATURE because:

  1. It gives users something actionable to do, making it more of a tangible tool.
  2. It can minimize the amount of apps users open use as they research restaurants.
  3. It keeps the user engaged with the app beyond a simple restaurant search.
  4. List-making is a natural output of the research and discovery activities of the app.
Drawing from other Apps

How Other Platforms Do It

competitive analysis

How Instagram and Yelp Execute their "Collections" feature

Although different apps, Yelp and Instagram both have a fully-functioning "Collections" feature, where users can create their own unique lists/folders of photos (Instagram) and local businesses (Yelp). While analyzing how Yelp and Instagram execute their "Collections" feature, two things stood out to me that I wanted to emulate in Eater:

  1. Both apps separate Collections from Favorites. This gives users the opportunity to save or favorite a restaurant, but not necessarily add it to a specific watchlist.
  2. There are 2 different entry points. Users can add and delete items on the Watchlist page (see Figure b above) or directly from each item page (see Figure c).
INFORMATION ARCHITECTURE

User Flow Diagram

user flow diagram
hierarchy
Design Decisions

Medium-Fidelity Mockups

1. Adding a Restaurant to a Watchlist

After understanding the content requirements as well as the three different pages and their hierarchy, I explored different modals that will pop up as users add a restaurant to a watchlist.

Adding a Restaurant to a Watchlist

Medium-Fidelity "Add to Watchlist" Explorations" feature

Explorations C, D, & E felt more natural with desktop, and D & F did not give enough priority to the image. Also, E had too small scrolling space, and A & E had no distinction between recent and non-recent watchlists.

Thus, I decided to pursue option B because the large containers prioritize the image, and "Recent Watchlists" offers quicker access to more commonly used watchlists.

2. The “Saved” Page – Displays the List of Watchlists

Once a restaurant is added to a watchlist, users can then view their personal watchlists in the "Saved" page.

The Saved Page

Medium-Fidelity Explorations for the Saved Page

Tradeoffs:

A — Cannot fit enough watchlists on the screen; too much scrolling.

B — Image avatars are too small (not enough emphasis on the picture); too much room filled up by unnecessary Watchlist metadata.

C — Can fit a lot of watchlists at a time; visual element is successful.

D — Not enough emphasis on the picture; filters seem useful, but are in fact unnecessary.

E — No visuals (uncompelling and isn't enticing to users.)

As a result, I chose option C. The narrow shape affords easier scrolling, fitting more Watchlists on the screen at a time. Additionally, the narrow shape with the right-facing arrow is helpful for the user's mental model (skinny watchlist opens up into thicker restaurant containers).

3. The “Watchlist” Page – Displays the Watchlist Details

Clicking on a Watchlist brings the user to this watchlist details page, which contains the watchlist title card on the top (title, details, settings) and a list of all the watchlist's restaurants. I explored a bucket view (A) and a list view (B).

The Watchlist Page

Medium-Fidelity Explorations for the Watchlist Page

Deciding between the two explorations, I landed on option A because of the successful visual element. Images are what we want to prioritize, as the zoomed-in photos offers this emotional, mouth-watering connection to the food, making users want to dive into the experience. With the small thumbnail photos in B, users are not able to see enough of the food for it to be useful.

4. Scrolling Through the Restaurants of the Watchlist

By clicking on a particular restaurant, users are brought into a deeper watchlist view. Think Spotify playlists — you can view the overall playlist details and all the songs in it (the watchlist page), and you can also surf through the playlist by clicking on a song and swiping left/right (these restaurant pages).

The Restaurant Page

Medium-Fidelity Explorations for the Restaurant Page

I asked users which exploration was best for conveying that they are within a watchlist, swiping through the different restaurants. Users favored A & B because the red watchlist title card lets you have top-level access to the watchlist from within — it offers a sense of hierarchy. Between A & B, I decided to pursue option B because it is easy to see that you can swipe horizontally.

Visual Design

Feedback, Iterations, & Micro-interactions

Through user testing and several team meetings, I continued to iterate on the designs, shifting to high fidelity.

Revisions

Revisions:

  1. Created a "Settings" section on the top of the Watchlist page, so the number of restaurants in the Watchlist underneath.
  2. Removed the Eater-generated metadata because a restaurant can belong to multiple (ex: Katz's Deli is included in "29 Classic Restaurants Every New Yorker Must Try" and "The 38 Essential NY Restaurants").
  3. Added the red active-state Watchlist button, so users have the ability to delete each restaurant from the Watchlist by clicking on the button.
Revisions2
When Should We Prompt Users to Log In?

With this Watchlist feature, there is value proposition for a logged-in experience. I created this flow chart to figure out when the app should ask users to log in / sign up.

Login Flow

Since there are 2 entry points to view/edit Watchlists, I decided to design two login screens — a full-screen version and a slide-up modal. This way, when a user is not signed in wants to add a restaurant to a watchlist, they won't be transferred to the saved page, but a login modal will slide up over the restaurant page, pictured below.

login interactions

Login Interactions

My intention was to always tie the login experience with an action (adding restaurant to a Watchlist), so that logging in doesn't seem like an annoyance to the user, but adds to the overall personalized experience.

I chose red as the login screen background because it makes this easy red/white dichotomy of red background = logged out, and white background = logged in.

How Can Users Share Watchlists With Friends?

Another interaction with this feature is the ability to share watchlists with friends via email, text, or sending in-app. I explored how the screens will look when a user clicks "Share with Friends."

share with friends

First & Final Iterations of "Sharing with Friends" Interaction

In designing these screens, I initially thought it'd be simpler and more intuitive to allow the user to search for a friend's username in-line. I tested this out using paper prototypes and realized that users were confused with in-line search. They asked, "Where would I be taken when I search for a friend's name? What if I want to send a watchlist to more than one user at a time?"

With this confusion, I decided to separate this interaction into 2 screens. When users click "Send to Another Eater," they are transported to an Instagram-like page that allows them to search for other Eaters (friends). This alternative feels less cramped, and including 'Recent Eaters' is much more convenient.

Final Flow

Final Watchlist Interaction

final flow

Final Flow of the Watchlist Feature

final share flow

Final Flow of "Share with Friends"

INTERACT WITH SCREENS

Prototypes

You can interact with the two prototypes by clicking on the Watchlist Flow or the Login Flow below:

watchlist prototype
login prototype

You can interact with the two prototypes below by clicking on the Watchlist (fork & spoon) button. Or, you can interact with the Watchlist Flow here and the Login Flow here.

Conclusion

Reflection & Takeaways

This project helped me understand that design must always be intentional. All design decisions must be backed up by reasoning, and just because something looks aesthetically beautiful doesn’t mean it’s the best solution to your problem. The Eater App is planned to launch this fall, and the designs of this watchlist feature this will be implemented in the minimum viable product.

Next Steps

next steps
Check out More of my Projects
Facebook Watch / Instagram Hashtag Filters / Uplift / CU Reviews / Daily UI