Blog | OurCraving -- an open project

This blog focuses on user experience of restaurant discovery, technical background of OurCraving - an open project for restaurant discovery

User Experience of Restaurant Discovery - Part Two

January 6, 2016 15:42

In part one of this article, I went through the user experience of searching in Zomato. In the part two, I will briefly cover the experience on Yelp, TripAdvisor and Foursquare using the same criteria. 

Earlier I was following a very loose structure to review the user experience when covering Zomato. The review was based on some basic principles from Don't Make Me Think and Goal-Directed Design. 

In my review, our users have only a single goal: 

restaurant discovery, i.e. find an interesting restaurant to go  

 Here is a list of the refined criteria I tend to use: 

Action Evaluation
Start searching Good - immediately find where to start searching;
Poor - have to scan the entire page to find it
Narrow down Good - the first visible control is useful and easy to find
Poor - the first visible control does not help or confusing to use
Search results Good - the results are accessible and providing useful information  
Poor - the results are not easy for users to digest
Association Good - the results can be effectively associated with the current user  
Poor - the current user cannot associate with the result

This user's persona could be defined as: 

  • has experience of using computer/mobile device
  • has knowledge of common web controls and understand how to interact with them
  • may or may not be familiar with the city/area of searching
  • has preference (i.e. foodie, food lovers, experienced in eating different food)
  • have a short attention span (i.e. lose interest if buggy interface) 

I believe that this user represents most users. If not now, it will be in the future. 

If you still remember part one, Zomato scores Poor in all 4 categories, here is why:

Action Zomato Evaluation
Start searching to start searching, focus on the search text box; but its popup menu makes users think and the design is confusing
Narrow down the first filter control (6 categories) does not really help users to narrow down results
Search results only 1 item can be shown in the view port, and from there, some filter controls are confusing
Association does not offer a good connection between the user and the results, no way to order the results, no way to tell how many results are out there (even in the first page) 

 So, how does other websites perform?


Yelp's landing page (2016/1) is as follows:

Yelp landing page

Keep that in mind that Yelp is a website to find local businesses, not limited to only restaurants. In contrast, Zomato is for finding restaurants only. In addition, from the beginning, Yelp was built by reviews from crowd-sourcing. 

Therefore, due to these 2 subtle differences, Yelp's landing pages show more related to businesses not just restaurants. A major action item also encourages users to submit a review. The landing page does not immediately highlights where I should start searching. In fact, the action item, which calls out for review distracts me from locating the search control. Another call call-out item to create my account is also distracting. Basically, for me, my eyes were scanning the middle first, and then flowing back to the top to find the desired control. 

Fairly speaking, Zomato did a better job. They have the search bar right in the center and it is very large. 

However, once I focus on the search bar, in Yelp, I will see:

Yelp search bar popup

This, I will say better than what Zomato offers. These 5 categories offered by Yelp have distinct difference, while Zomato offers (Breakfast, Lunch, Dinner etc.) are all just restaurants. 

Next, the search suggestion provided by Yelp is much less confusing. 

yelp search suggestion

The crucial difference between this list of suggestion and the one populated in Zomato website is: selecting any of those suggestion will lead me to results related to Taco. But if you recall how it works in Zomato, selecting most items in their suggestions will lead me to a particular restaurant page. The latter defeats my purpose of searching, unless I know about the particular restaurant beforehand. 

Next let us look at the result page. 

Yelp search result pageYelp search result page

In a monitor with 1920x1680 resolution, I am able to see 5 items (the screenshot was made with one item cut off, feel free to try it on your own). A few things I would give kudos to Yelp's design: 

  • The filter bar is on the top. And the controls there obviously would narrow down my search results;
  • The filter bar is decluttered, and I can expand by simply clicking [All Filters];
  • The map is resize-able; 
  • The result page shows expectation to the user: it shows how many items are displayed on this page and how many items in total. 




Unlike other two sites mentioned earlier, TripAdvisor is a travelling sites, which is popular to find anything related to travel, including Hotels, Flights, Things to do, Restaurants, and so on. It is important to understand this because their UX and interaction design could be different due to their business focus. 

To get to their restaurant discovery feature, you need to access:

The following is their landing page

TripAdvisor Restaurant Discovery Landing Page

It is clear that I can use the big textbox to search. I also really like the way that they show "XXX Food Near Me", which immediately draws my attention: it's about me. Although after I click the link to it, those options are not really near me at all. It is still plausible with such a small feature. 

Unfortunately, their search bar is not really usable. As soon as I started typing a word in there, it populates a list of suggestions, and the page selects the first one by default. 

tripAdvisor search suggestions select the first one by default

No matter what I have tried, such as hitting the Enter key, Space key, or ESC key and then hit the Search button using the mouse. The first item in that list is always selected (2016/01). I will say this is a defect in the program. Even I am in Seattle, I am forced to go to Fish Creek in Wisconsin when my intention was actually looking for restaurants that serve fish. :( 

Therefore, I can not really search anything in TripAdvisor. Actually, I recognize that TripAdvisor is not really meant to search. It is almost like designed to browse. After poking around the website, I found out that the best way of doing restaurant discovery is simply going to the top menu and select All Restaurants. It will open a page with all the restaurants people have ranked. They are sorted by ranking by default. 

To be honest, this is another way of discovery, compared to enter what you want to eat, you can explore what you can eat. After all, their desired users are tourists, who are considerably seen as explorers (or adventurers). Therefore, TripAdvisor offers a different way (but of course, there is still no excuse for the defective search textbox). 

TripAdvisor All restaurants

Similar to what I saw in Zomato, I am still not a big fan to those filter bars and overwhelming cuisine types. However, I do like the the logic of listing all restaurants. Moreover, the first filter I can see is: Restaurant | Dessert | Coffee & Tea, and then more. Compared to what Zomato has, this filter type is more useful, considering the fact that most users of TripAdvisor are tourists. Often having something light (such as bakery or bistro) are more attractive than having a heavy meal, because you can experience more in different locations. 


If my memory serves me right, Foursquare has gone through a few changes. Now the website (or the app) of Foursquare is primarily used for place discovery, while their branch (Swarm) is used for place check-in and meet-up. 

This separation is debatable. However, personally, it gives the main Foursquare website a good opportunity to reshape the design and experience. Their landing page is the cleanest and most straightforward in terms of what a user should do when it is opened. 

Foursquare landing page

The background is the map of the current location. It has a big textbox and a few tags, allowing the user to either enter text to search, or go directly to open a page listing results matching one of those tags. 

Foursquare search page

Once you open the search result page, you can almost see 5 items in the result list. The right side is the large map control anchoring each result. I really like their map display. It is the largest among all other websites. However, since the results are paged and each page shows 30 items. At first, it looks good. Once you choose to see more results, which will open another 30 items. The map becomes overwhelming. I don't expect the map will be too useful once I open 90 or 120 items. 

Foursquare starts focusing more on personalization, and it is the only provider that does that. I am very impressed by that. For example, they show a filter of "Haven't Been", which is an interesting concept. Other than that, they don't really rely on filter controls. What excites me the most is, they don't have the cuisine filter. It is good, because I always feel that kind of filtering is useless. The reason is simple. Today so many chefs are versatile, we cannot simply classify a restaurant in one single specific cuisine. It is not only bad for the business but also unfair to experienced chefs. So, in another word, Foursquare relies on more using text to filter. Doing so makes the layout cleaner, however, it's arguably inconvenient for some users. After all, to key in a filter phrase, one must performs minimum 3 actions: move the mouse, click the textbox, typing the phrase. 

Foursquare does have a unique and interesting design: My Tastes. 

Foursquare - choose your tastes

Once I select my tastes, and when I open the generic Food discovery, anything matches my tastes will be highlighted in pink. 

Unfortunately, I am slightly disappointed that Foursquare does not use my selected tastes to prioritize the search logic. For example, when I click Food tag and open the result page, only the 3rd item shows a highlighted phrase that matches my tastes. The next one is 18th. My disappointment lands on: why not simply show the results that match my tastes first. I would expect to see the first item with a phrase that falls in my selected tastes. 



In summary, I create the following tables (please refer to my review criteria): 

Action Zomato Yelp TripAdvisor Foursquare
Start searching Poor Good Poor Good
Narrow down Poor Good Medium Poor
Search results Poor Good Good Good
Association Poor Good Good Medium

To recap, this review on user experience of restaurant discovery discusses only 4 providers: Zomato, Yelp, TripAdvisor, and Foursquare. I did not include Google Place, Foodspotting, and Zagat, or other providers. The review focused on a single user's goal: finding an interesting restaurant to go.