Facebook Messenger: A better way to discover and compare eateries

Independent project | Duration: August 2018

“No matter what culture, everywhere around the world, people get together to eat.” — Guy Fieri

Eating an inherently social activity — in all parts of the world, since the dawn of time — people seek others to gather for a meal. Technology today makes that easier — many people search for places to eat while chatting with their friends online, especially on the Facebook Messenger platform.

The People Problem

When I communicate with friends about where to eat, I want to be able to come to a mutually agreed-upon decision as efficiently as possible. But it’s hard to do that because…

People have to “leave” the conversation in order to search

People will often return to messenger discovering that messages have been sent since they last checked. This makes it difficult to gauge the current status of the conversation and find specific information due to disappearing content.

Comparing choices involves many steps

Members of a conversation must view each restaurant separately, reading through the details, exiting, and entering another view. This makes it difficult to compare the options efficiently. Also, not everyone sends information about restaurants the same way (screenshots, plain text, links, etc..), which means that there is no centralized source for information.

The Research

My objective is to identify the common pain points of searching for and discussing various eateries through Messenger.

Along the way, I planned to:

  • Learn which tools are commonly used to search for food and how people used different features of those tools
  • Understand how people prioritize different criteria (location, price, etc.)
  • Understand how people navigate between the conversation and searching for food

Research Insights

I talked to 14 people and observed and recorded the actions of two individuals trying to plan a meal in a Messenger group chat.

Trends

  • While switching between different applications (Yelp and Google maps were used the most) to search for places, people tend to lose track of the conversation or forget details.
  • In general, location, type & quality of food, and price are prioritized the most. People will weigh each differently based on circumstance.
  • Photos are essential in making a final decision about a restaurant.
  • Looking at restaurant suggestions from friends involves many back-and-forth actions that makes side-by-side comparison difficult.
  • People have to comb through messages to find the right information again for the purpose of comparison or verifying the final details.

Ideation & Concepts

Initial Concepts

Personalized Recommendation System

This concept would take all members of a group chat through an on-boarding experience where they would answer questions about their preferences and receive personalized recommendations. This would require all users to enter a new session through an invitation by one member who initiates the session.

In-Chat Search Experience

Users can search for restaurants, send details, and view/compare suggestions in one place — inside the chat. This option places heavy emphasis on maximizing efficiency of the food-searching process.

I moved forward with the In-Chat Search Experience because it addressed my main user problem better and was the simpler and less disruptive solution. I decided not to pursue the personalized recommendation system concept because it could hinder productivity by not producing results as quickly and discourage users from using it due to a much longer on-boarding process.

Inspiration

iMessage, WeChat, and Snapchat

I looked at iMessage, Slack, and WeChat for inspiration because they allow users to easily integrate additional functionality.

iMessage allows users to access applications through a bar on the bottom. Clicking on an app button loads a view that extends from the bottom and does not interrupt the flow of the conversation above.

There are multiple functions embedded within WeChat, including ride-hailing, paying, and posting photos to a social feed. It is an all-in-one app that recognizes that users will want to do different things throughout their day while they interact with other WeChat users.

When Snapchat users receive a snap with a custom location, they can swipe up to view more details about that location — the data is pulled from TripAdvisor.

The Entry Point

Because this feature further expands upon Messenger’s functionality, I decided to place it as a new item under the extensions menu:

But how do we let users know that they can now find food on Facebook Messenger? Without some sort of prompt, they might take a long time to discover this feature or never find it at all.

I decided to make use of Facebook Messenger AI in order to notify people about this new functionality.

Various trigger/entry points

During user testing, people thought B was too glaring and obtuse. With B, there was no apparent way to dismiss the prompt, and since it was attached to a specific message it would disappear along with it if new messages were sent.

People were confused by A because they weren’t sure what clicking on the link would do. Furthermore, I realized that I shouldn’t rely only on using color to indicate an action.

I eventually settled with C because it won’t disappear due to its fixed position, is easier to dismiss, and is consistent with Facebook’s current predictive UI.

How Should Search Results Be Displayed?

Initially, I considered displaying search results in a format like this:

After showing it to users, I realized it wasn’t that far ahead of switching from messenger to another app to search for restaurants, because it blocked nearly the entire conversation. So, back to the drawing board:

I played around with some concepts for displaying the search results within a smaller modal view in order to allow users to simultaneously keep track of the conversation while browsing.

Users said they were not keen on viewing results in a top-down list format if they were contained in such a small area. #3 was inefficient because users would only be able to view one place at a time. #4 created a disconnect between the restaurant and images attached to that specific restaurant.

I chose to pursue #1 because it would provide a view of multiple restaurants, and users found the side-scrolling more natural. While the other options would provide more space for details, I found that users would click into each thumbnail for a more detailed overview anyways, so trying to cram more information into each item would add marginal value.

Interaction Design — Searching

This was the original layout of a search bar and active search mode. The lack of parallelism between the two confused users when I tested the prototype with them. They also found the two text fields in editing mode to be ambiguous.

As a resolution, I added a search and location pin symbol to each of the fields in order to clearly establish their identities. I also combined the two text fields into one to create a more seamless transition between the two screens.

Designing Restaurant Overview Screen

Displaying the Information

Each restaurant’s Overview Screen can be accessed by clicking on a search result thumbnail. Based on feedback from user research, I prioritized photos, price, location, rating, cuisine, and hours by showing them first on the overview page, so people can access that information immediately. I planned on using data from Google because they have one of the largest records of places in their database.

All info (left), what the user sees right away (right)

Should users be able to view other options from the Overview Page?

A, unlike B, provides a way for users to browse through other restaurants while they’re inside the overview page.

While testing A, I found that users kept asking how they would go back to the search results. Although the navigation bar provides an easy way to switch between restaurant overviews, the titles on the bar lack context, making apple-to-apple comparisons between search results difficult. A ended up being too ambiguous in terms of its purpose within the feature.

With B, users won’t spend as long in Overview mode because they will have to return to the search results to browse other options. This option is more lightweight and makes it clearer for users to figure out how to return to the search results.

How to Make Comparisons Easily

After suggestions are made, people will start making comparisons. As stated in the people problem above, the current flow for comparing restaurants often involves many steps.

The current flow for comparing options within Messenger. Users must go into one choice, come back out, and enter another.
What if there’s also a way to move between choices?

Reviewing the details of a specific place will often trigger users to make comparisons with other options. So I decided to place that interaction within the overview screen of a restaurant.

The navigation bar at the top allows users to tab through options that were shared in the chat, allowing them to quickly make side-by-side comparisons.

Final Interaction for Searching and Comparing

Video Walkthrough
1/2
2/2

What’s In It for Messenger?

Facebook Messenger is my go-to for chatting with others and one of my most-used applications in general. The advent of Extensions and Messenger AI made me realize that Messenger could become an all-purpose app for discovering new experiences and places by leveraging the power of online communication. Because it is so widely used and notable for its seamless interactions and concise, clean design, investing in this area would make Messenger a more powerful platform.

Reflection

This project changed course many times since its beginning. Doing it taught me to be as focused and specific as possible with my people problem to avoid feature overload and to be intentional with every detail.

Special thanks to Lena Yeoh, Sneha Khullar, Vivian Xiao, Tony Li, Kenta Takatsu, Mind Apivessa and Cathy Liu for the honest and thoughtful critique, as well as inspiring me to learn more about and embrace the design process.

Author: Sophia Deng

Collect by: uxfree.com

Comment

Top