Blog | OurCraving -- an open project

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

What is Craving Proposal and why I think it will be useful?

February 11, 2016 08:33

Craving Proposal is a novel design that allows groups of people do restaurant discovery together. 

Motivation

First Problem: Agreement

Firstly, let's consider the following conversation: 

A: Hey, do you want to go out and eat? 

B: Sure, where are we going? 

Next, if A responds, "How about restaurant 123?" and if B is in favor of that restaurant, this conversation can end. They go to the restaurant and eat happily ever after. 

However, this work flow works only in a familiar area and two people are adjacent to each other. 

In the following scenarios, this conversation will become longer:

  • Friends live in different areas of the city 
  • Friends visiting a new city 

Now imagine when a few friends travel to a new city, the conversation will probably be: 

A: Are you hungry,  what do you want to eat? 

B: Yup, I am OK with anything. (don't we all hate that friend who is OK with everything?) 

A: How about seafood? 

C: Hey, you know I am allergy to fish, right? 

A: Ah, sorry, I forgot about it. How about Steak? 

B: Ugh, I just had steak last week. 

A: Alright, I am going to find some places interesting and share with you folks. 

You see, people have preference. Each person has something he or she wants to eat, does not want to eat, or cannot eat. When looking for a place as a group, each member in the group would like to know what they can eat in the restaurant. 

Of course, I will not deny that there are other cases all friends come to an immediate agreement when they see the first restaurant in front of them. 

if everyone just goes to the restaurant I pick that'd be great

Unfortunately, when an agreement fails to establish at the beginning, it usually takes a long time to finalize. 

Second problem: communication

The next problem is about how to communicate opinions. 

This problem is applied less in on-the-road scenario, instead, it is applied in scenarios when friends are sitting in front of their computers while discussing where to dine out. 

Based on years of personal observation (actually, just the way I remember), group dining out is always initiated by a single person. Today at least, one person will start sending message (via SMS or any messaging software) or emails to invite others. A typical IM (internet messaging) conversation could be: 

A: Lunch?

B: Sure, where? 

A: How about 123? 

B: Let me ping C. 

From here, if multiple people can establish the agreement on the first choice, the conversation ends and they go eat lunch happily ever after. Otherwise, a conversation could become: 

A: Lunch?

B: Sure, where?

A: How about this one? http://yelp.com/restaurant/123 (not a valid URL, but represent a choice found online) 

B: Interesting. Have you tried this one? http://yelp.com/restaurant/456 

A: Let me ping C and D. 

C: Guys, let's try this one. http://yelp.com/restaurant/789

D: I tried last month, and I don't really like it, even though I don't mind giving it another chance. I will be interested in this one: http://yelp.com/restaurant/000 

This communication is dragging and inconvenient, because first, it involves multiple links. Each person has to open the page and read everything. Second, they have to talk into it until an agreement is established. 

strong opinion in where to eat

Craving Proposal

Craving proposal is a design that allows you and your friends share a list of options, cast a vote, and discuss it on a single page. 

A design in Ourcraving looks like below: 

Craving Proposal Design 

By default, a user does not have any proposal. When browsing a dish, there is a button to add a dish to the proposal, which will immediately create a new proposal if none exists, but add to the latest proposal, or the user can manually pick which proposal the dish is added to.

add dish to proposal 

The idea is that the dish you add, will add the restaurant to your proposal. However, when you open the proposal, you are seeing the dish you were looking at, for you. 

You can add multiple dishes to the proposal, in another word, each dish has a corresponding restaurant. The proposal has a unique URL so you can just send one link to all your friends. 

Here is something more interesting. 

When your friends open the proposal URL. They might not see the dish you were looking at. They will see the restaurant options. But they could see a different dish, depending on their own preference. By default, if they never setup preference, they probably see a random dish. If there is enough data, the proposal page will display the dish a user is most likely interested at. Therefore, even the restaurant options are all the same, different user sees different content from it based on each's craving habits. 

Finally, users can cast a vote to the option. Other users should be able to see them immediately. Unfortunately it is not coded in current version of OurCraving. Using some technique like SignleR, I believe it is totally possible to achieve. 

Conclusion

This article introduces a new experience in restaurant discovery for groups of users. It supports:

  1. Using one single URL to communicate with multiple options;
  2. Different users see different content from the same list of options; 
  3. Voting system for decision making 

I believe that this design, if fully implemented, will be able to effectively help groups to find a place to dine out. What do you think of it? 

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

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. 

 


 

TripAdvisor

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: http://www.tripadvisor.com/Restaurants

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. 


Foursquare 

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. 


 

Summary 

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. 

User Experience of Restaurant Discovery - Part One

January 4, 2016 20:50

When we refer to "Restaurant Discovery", it is fairly natural to think of searching and finding, because, after all, it is to discover restaurants.

We know those names: Yelp, Foursquare, TripAdvisor, yet another a very hot name, Zomato, which acquired Urban-spoon in 2015.

How does each of them help diners look for a restaurant? This article goes over and focuses on reviewing user experience on only restaurant searching from those mentioned websites. In part one, I will first go to Zomato. 


Zomato

The following is the screen of Zomato home page: 

Zomato Home Page @ 01/2016

I like the cleanness of its interface and embedded with colors. Just at the first glance, it exposes a lot of food images. I will discuss content on similar websites in a different blog, here let's just look at the layout and interaction. 

In this home page, there are 3 columns:

  • LEFT: a set of filter controls; 
  • MIDDLE: city feed, with a list of diner posted content (reviews); 
  • RIGHT: collections

As you see, the part really useful for searching or finding a restaurant, is only the LEFT side. Of course, there is a very large text box in the top-center. It is good, and I like it. However, when you tap into the textbox, something pops up to distract your focus from searching (see it later). 

The middle part offers choices; however, the content is simply about other people, not me. 

The right portion provides a collection of restaurants, which appears to be a good idea; trying to copy ProductHunt's collection concept. Unfortunately, accessing those information is inconvenient, i.e. must go through too many steps to find a restaurant. Unlike ProductHunt, which primarily was for browsing and following. A user on restaurant discovery is generally having much shorter attention span. I will elaborate this point in Part Two.  

Personally, I do not understand what purpose the "Quick Searches" serves for me. It has 6 choices: 

  • Breakfast
  • Lunch
  • Dinner
  • Take Out
  • Delivery
  • Drinks and Nightlifes 

Here is a quick thought: if I open a restaurant discovery website at 9 pm, it is very likely I am looking for "Drinks and Nightlifes". In fact, does it really matter? How about just show me what is currently open? In fact, if I can pick a time, the website should be smart enough to filter out all restaurants are not doing business at that time. Not to mention, in those 6 categories, many restaurants will overlap. Besides the fact this particular categorizing will not necessarily help me narrow down my search, the worst part is, when I first come to this website, click a "type", say "Dinner", I am seeing the following pop up window:  

 Must select an area after hitting a type

This is genius. I have to manually pick an area. 

Did you see the scroll bar and can you imagine how long is it? 

Two obvious drawbacks:

  1. The areas are ordered alphabetically, if I am living in an area starting with letter "W", I am forced to scroll to the bottom. Or you can argue, I can move the cursor to the text field and type "W" to search. Yes, that will make it a better experience (sarcastically). 
  2. How does a person new to the city know what area he/she is at? 

What will be a better approach? Of course, just detect my location and automatically select a starting area for me. 

After selecting an area, I will enter a page with the top is a horizontal tab control that lists the same 6 categories. Interestingly, there is an additional option now: All. 

After selecting an area

Here is what puzzles me: what is a typical workflow for a user coming to a restaurant discovery website? The basic needs of a visitor are: 

  1. Hungry; 
  2. Needs a place to eat; 
  3. Needs to know what can eat in that place; 

By default, most people are open to all options, i.e. ALL. Next is to narrow down the search. But Zomato seems to be doing something very interesting: force me to narrow down first, and then provide me an option to open to ALL

If we look at the additional filters in the left side, we can see Cuisine 

More filters

Obviously, if I don't like any of those cuisines, I will hit [See all cuisines]. Yes, as the number indicates, there are 110 of them. So I am seeing this next: 

All cuisines

That is a long list to look at. I don't know if anyone ever goes through 110 cuisines and carefully select what he or she is interested. By then, the person might already have starved to death.  

Here is my thought, which could be non-sense: 

  • If I want to eat a burger, does it really matter it's an American cuisine, British or an Italian cuisine? 
  • If a Japanese restaurant is offering a burger, which uses tempura eggplant as bun, Sashimi and Japanese Salad in the middle, with Mayo and other house sauce, call it New Sashimi Burger, does it qualify as "Burger"? 
  • If I want to eat Pork Belly, who cares what cuisine it is, if it tastes good? As far I know, French, Chinese, American and Korean can all make beautiful Pork Belly. Why do I want to limit to a specific cuisine? 

who got time for reading 110 cuisine types?

Finally, when I focus on Zomato's search box, the 6 categories immediately show up: 

zomato search box

This is what I mentioned earlier, what could distract the users. Without any input, this popup reminds you to just click to select one of those 6 categories. When I first experienced it, I paused my action...because it MAKES me think: should I click, or should I enter? What will happen if I select one of those options? Can I still type? 

In addition, please pay a little attention to the mask in the search box, noticing it says "restaurant" there? 

Once I start typing, I can see the result dynamically popped up (and those 6 categories are gone now): 

Here is something really confusing. What is "Outlet"? 

Once I select one, it comes out to be "Restaurant". So why don't they just call "Restaurant"? I really don't understand. 

In the result page, I can see some new filter controls, for example, Popular Cuisines filter (when searching "Fish"): 

popular cuisine filter

NOTE: this control does NOT provide a "More" button. So that's all the cuisines I can filter.

Just by looking at this control, I am confused because:

  1. Why I am not seeing Japanese or Chinese food? Then I realize the options are probably based on all the records shown on the current page. 
  2. Are those options overlapped?
  3. If I choose [Seafood], am I seeing all results, since I am searching "Fish"? 
  4. There is no where I can see how many items in this page, so what does (30) mean? Is it just a subset of the result? 

I can probably ignore all the comments I made earlier and only look at the search results, which are the most important part in my entire restaurant discovery user experience. At first, I want to emphasize that I am using a monitor with 1920 x 1680 resolution, which means I expect to see more. The following is the result page from Zomato (on 1/6/2015)

zomato_search_result_page

Can you guess what was the first thing grinds my gear? 

I can see ONLY one result!

It is true that I can use the map to hover those icons and scan results. 

I did. 

Here is a fun fact. I tried to use the feature: Search when I move the map. Zomato never finished loading. 

zomato keeps loading

Besides the never-finish-loading (after 15 minutes), can you see crowding those icons are? Personally, keep panning the map to find a restaurant is just not my thing. But, I do have to give them a kudos on using different colors for different rating when visualizing the restaurants. I do like that feature a lot. 

It is very unfortunate that I was having trouble of using Zomato's search. The result list is long, I have to keep scrolling. The interaction is just not efficient, and the list doesn't help me locate (mentally) where they are, and what I can eat. They emphasize the restaurant name in each item; they then use light grey text (on top on a white background) to display some review text, which is very difficult to read. There are a lot to look at in each result, but I feel that I do not know what to focus, where I should pay more attention to. 

You will have to try it on your own. 

I could, scan each item and open it to read the full content. But again, ain't nobody got time for that? 

The final question remaining is: how do I associate all those results with me, in terms of my location and my interest? In Zomato, there is none. Because the results are not selected based on my current location or searching for the food item, the results seem to come from everywhere in the selected city and the page highlight the restaurant name. I am guessing, if there is a bar called Dead Fish, but does not really serve any sea food, but could potentially show up in the list. 

In the next part, I will describe the criteria I use for reviewing and discuss other 3 similar websites. 

User Experience of Restaurant Discovery - Part Two