In July of my summer internship at Vox Media Company, I worked on the Consumer Products team to help design a Progressive Web for Eater, one of Vox’s eight media brands. The App offers restaurant recommendations to users based on location, cuisine types, and overall interest. Unlike dining apps like Yelp and Bon Appetit, content for this app comes from trusted editors who are on the ground, 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 my manager and other designers and engineers on the team, I designed a watchlist feature, which allows users to create and share an assortment of personalized collections of restaurants.

Let’s see how I got here 👇🏼

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:

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?”

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”

  • How might we increase the amount of time users spend on the app?
  • How might we make this app more engaging?
  • How might we make this more of a mouth-watering experience?
  • How might we get people to feel more excited about what to eat?

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:

  • Understand how users make dining decisions
  • Discover the Eater elements that loyalists care most about (maps, news, individual writers, etc.)
  • Uncover pain points and product opportunities

Affinity Diagram

Key Findings

1) Eater users are influencers. They 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.

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:

I fall somewhere between Lucy & Jackson 🙂

Obsessive Foodie (Sage)

  • Extremely passionate about food, always exploring new restaurants and sharing recommendations with friends.
  • Follows food blogs and keeps up to date with all things food-related.

Moderate Foodie (Jackson)

  • Likes to dream about mouth-watering food experiences, follows some food Instagram accounts.
  • Won’t go out of his way to experience a new restaurant.

Casual Foodie (Lucy)

  • Enjoys food, but is unaware of the resources to become a full-fledged foodie.
  • Relies on friends’ recommendations and likes to dine at places that she’s already been to.

Throughout my entire design process, I made sure to stick these personas in the back of my head, always referring back to them when making my design decisions.

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

2. & 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.

3. Photos & Instagram

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

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.

Choosing 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

How Other Platforms Do It

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) or directly from each item page (see Figure c).

User Flow Diagram

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.

Medium-Fidelity “Add to Watchlist” Explorations

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.

Medium-Fidelity Explorations for the Saved Page

TRADEOFFS:

A — Can’t 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).

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).

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.

Feedback, Iterations, & Microinteractions

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

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 list metadata because a restaurant can belong to multiple (ex: Katz’s Deli is included in “28 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.

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.

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.

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.”

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 Watchlist Interaction

Final Flow of the Watchlist feature
Final flow of “Share with Friends”

Interact with Prototypes

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.

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:

  1. More User Testing
  2. Adding notes to watchlists
  3. User generated photos



Source link https://blog..io/eater-app-watchlists-a644afd14c51?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here