PROJECT 2: REX THE CHATBOT Conversational UI
REX THE CHATBOT
a Facebook chat bot leveraging Yelp’s data and machine learning through account integrations across Yelp and BtownMenus.
Team C: Alison, Cameron, Hayden, Sanchit, Tosh Interaction Design Practice
Design Strategy Yelp, the current food/restaurant recommendation website has 142 million active users contributing to the food ratings and reviews system. This communal contribution has lead to a comprehensive database of food and restaurants to help users make food/restaurant decisions, as well as promoting local business. However, this has also caused problems: ●
●
Food searching process is time-consuming. People have to go through ratings and reviews on Yelp to make restaurant/food decisions when they are new to a place. A large amount of ratings and reviews are not relevant to the user. Food ratings and reviews are written by users who have various personal tastes, making the reviews less relevant and qualitative for visitors.
To address the above mentioned problems, we aim to Design a Facebook chat bot leveraging Yelp’s data and machine learning through account integrations across Yelp and BtownMenus. The output of our system should be more qualitative, efficient and “human” than Yelp’s current reviews and ratings on their app and website. Design Mantra
Fast Qualitative, Relevant.
2
Key data and insights from primary and secondary research i. Interview and findings To better understand how users make food decisions for online delivery, we conducted a semi-structured user interview on ten of our target users, IU students, who have had experience relying on BTownMenus or Yelp for getting food or making food decisions. Semi-structured interview techniques follow a framework rather than focusing on getting specific answers for specific questions. It allows for flexibility in responding to new questions resulting from the interviews themselves (Macdonald & Headlam, 2008). Below are excerpted interview questions and feedback from the users that are particularly informative towards answering our questions. How do you typically order food? ● Most people responded that they would go by cuisine or food category if they do not know for sure what they want. ● Others said they will order pizza and know exactly where to get it. ● Respondents suggested they would want to see pictures and food descriptions to help with food decision making. ● Respondents also said they order similar kinds of food regularly. Number of times a user mentioned a particular motive when making food related decisions
Have you ever had trouble ordering food online? How so? 3
● ● ●
●
All interviewees we talked to do not have problems in terms of placing orders online. Two users mentioned the technical problems they experienced when ordering food online. Sometimes they received odd error prompts with no idea what they meant. One heavy user of online food delivery services said he once ordered food online only to find out that the restaurant was closed and not making the food he wanted. He didn’t find this out until he had already paid and waited for his food. He called the online food ordering app and they told him of the problem. Respondents had problems with some coupon codes listed on the site being invalid when checking out.
How do you use Yelp to make food decisions? ● They only check reviews when they are unfamiliar with a restaurant. ● They would use the filters on yelp to customize their needs. What is usually done at first when in a new place is to do the top 10 rated restaurants, as they want to explore options and they do not know what to get. ● They do not mind going through reviews a bit, as this information greatly maximizes the possibility that they will get what they like, even in a new place. ii. Secondary Research - how to best utilize Conversational UI to address the problem According to Tomaz Stolfa, the co-founder at Layer, the history of Conversational UI can be dated back to 1986 when people would interact with computers by inputting text commands. Today, the definition of Conversational UI has gone far beyond text interaction. In 2016, there has been an explosive use of Conversational UI in commerce. Many of them adopted various forms of media in interactions, showing more possibilities other than pure text interaction that can happen in Conversational UI design. Here are the three takeaways during our secondary research about Conversational Commerce. ● Messenger service providers attempt to be the core of e-commerce and customer service (Abdel-Rahman, 2016). Major chat apps including Facebook messenger, Slack, Whatsapp, 4
●
●
WeChat have taken measures to integrate mini-chatbots to provide users with services such as Uber-ing a car without switching to third-party platforms. Dynamic cards is considered to be “the best design pattern for mobile devices” (Adams, 2016). Google, Apple iOS 10, and Twitter all moved to cards to personalize information presented to users. Many Conversational UI services also provide integrated cards as they can give bursts of information and are easy to manipulate for users. Tomaz(2016), in his article, explicitly expressed that hybrid interfaces in Conversational UI design will be the future, as it provides convenience, clarity and more than one option for users. Creating a good flow of conversation relies heavily on building a good information architecture and semantic meaning as opposed to the traditional principles of GUI design. Essential things in designing a Conversational UI, include suggestive hints that set expectations for users to avoid leaving them clueless as to how to start and continue with a given task. Giving personality to the bot and setting limits to avoid impairing productivity are also important points to guide a conversational design (Mariansky, 2016).
5
Personas Hannah Watson
Image source: https://randomuser.me/photos @ 9.14.2016 used here under educational fair use only Age: 20 Occupation: IU student Location: Indiana Gender: Female Bio Hannah is a sophomore at IU majoring in Elementary Education. She lives in an off campus apartment with her best friend. She typically orders from BTownMenus twice a month when she gets busy. She is familiar with the area around Bloomington and she knows different restaurants she likes, but has not tried a lot of places. She is willing to explore sometimes. When ordering food online for delivery, she likes to see pictures, accurate descriptions of food, and up-to-date deals if there are any, as she is very budget conscious. Goals - Make accurate food decisions when ordering online - Have u p-to-date deals on food if there are any 6
-
Wants to explore food choices
Frustrations - The online menus sometimes do not have detailed food descriptions - Coupon code is found to be invalid when checking out - Does not know what is good and is too lazy to read into reviews to explore
Jared Bradbury
Image source: https://randomuser.me/photos @ 9.14.2016 used here under educational fair use only Age: 18 Occupation: IU Student Location: California Gender: Male Bio: Jared is a Junior at IU studying business. He is a member of a fraternity. He is originally from an upper middle class family in California. As an out-of-state student, he does not care about his budget. He has an Audi and likes to try out nice food with friends during the weekend. He is very picky about the food and service quality but still does not like to sift through review after review to find something he would like to eat. He orders food online very frequently, sometimes four or five times a week and almost always orders just for himself. 7
Goals · Wants good food experiences · Be knowledgeable about the food quality in local restaurants Frustrations · Yelp reviews take too long to navigate · Information on food ordering websites is sometimes not up to date.
8
First Prototype – Foodie
9
Testing Procedures and Results In testing our first prototype, we made the decision to use a Facebook messenger bot. The users were given a prescribed scenario in which they had finished a meal, wanted to share their experience, and used the foodie bot to accomplish this goal. The scenario was as follows: Scenario You have just finished a meal at a new restaurant and found the experience deeply unsatisfying. You want to share your experience with your friend so they know how much you hated it. You had taken 10
some pictures of the food during your meal and want to send them those, but don’t want to go through the hassle of sharing each one through text. Instead, you open up the Foodie messenger bot and try the new sharing feature using that. Procedure ● The user would first select some recently taken pictures or videos of the food they wanted to share, which were presented to the user within the messenger window. ● The user then had the option of adding a text review in addition to the photos or videos. ● The bot would present the user with a preview of their organized “media package”, which consisted of the items they selected to share, formatted with a focus towards making the items conducive to sharing with friends. ● The user would then choose who they wanted to share the “media package” with using a list of Facebook contacts, presented within the messenger window. ● The user would then be prompted to share on Yelp. ● Feedback is given to the user, informing them that the information they share will ultimately help them get more accurate recommendations themselves. ● The user would then be shown three recommendations based on the media they had just shared. The user would have the option to save any of these recommendations as a Yelp specific bookmark so they could return to them later when they were interested in ordering food. Findings ● Users were confused as to why they would use the messenger bot to share any of this. They figured if they were already on Facebook, then they would just share through Facebook directly. ● Users typically did not seem to use the feature to add some supplementary text to the pictures or videos they were sharing. They figured if this was supposed to be a quick way to share, then they wouldn’t waste time typing additional comments, especially when sending to a close friend with whom they have frequent interactions. ● Users suggested that they may get overwhelmed by recommendations from friends, which would lead them to either a) ending usage of the bot and removing it from their chat list or b) turning off notifications for that messenger bot specifically. If they no longer received 11
notifications, users suggested they would be unlikely to return to the bot to check for recent recommendations.
Second Prototype - James the Recommendation Chat Bot
12
13
14
15
Because of the user tests and feedback from our first prototype, specifically the confusion with the social/sharing feature, we decided to pivot to another design that recommends users restaraunts based off their inputs in the chat app. Additionally, we realized the service was not taking advantage of Yelp’s data in order to provide more relevant recommendations to the user. We also found the use of a hi-fidelity prototype to stifle the feedback users were willing to offer. User Testing Scenario You’re on the bus to your home and want to order food for dinner. You remember someone mentioning ‘James Bot’ restaurant recommender bot that works with BTownMenus. It runs on Facebook Messenger so there’s no installation. You try it. Assume that it knows your order history from BTownMenus and your favourites from Yelp. Procedure ● The bot introduces itself and asks if the user is on BTownMenus. ● User selects certain food categories and enters any dietary recommendations. ● The bot prompts that the user can type ‘Suggest’ to receive a recommendation which is also presented as a direct button at that point in the conversation. ● User is presented one restaurant recommendation with photographs and details of the establishment along with a review from the user’s friend if they have reviewed the place. ● User can then select from ‘I like it’ or ‘Show me more’ ● If the user selects “Show me more” the bot presents another restaurant recommendation. ● If the user selects “I like it” then the bot notifies the user that it has learned more about them. Findings ● Users found single option responses for ‘Alright’/’Sure’/’Cool’ unnecessary. ● Users wanted to know what happened if they didn’t like the restaurant recommendations: There was no exit point. ● Users did not find one recommendation enough. They expected more options to choose from. After every two recommendations, the bot asked for more input keywords that fetched two more 16
● ● ●
results but displayed just one. The second result was displayed after the user clicked on ‘Show me more’. Users found it amusing that the bot was named 'James Bot’ but expected it to talk like James Bond or a British spy in general. Users had a hard time understanding that the more information they gave to the bot the better the bots recommendations would be. Users were not sure how their actions influenced the bot’s decision making and how those lead to improved recommendations.
17
Final Design - Rex the Recommendation Bot Learning from the user feedback received during usability tests of the second prototype, we designed the conversation to be quicker and more relevant to the user’s goal (getting a recommendation). The scenario is the same as the second prototype where the user is conversing with the bot for the first time. Key changes in this iteration ● Changed bot name to Rex (short for RECommendationS), since conversation style did not match with a British spy. ● Unnecessary single choice responses like, “Cool” and “Alright” were omitted. ● Three restaurant suggestions in a carousel in one round. ● Prompt the user that an action performed on the suggested restaurant will train the bot and in turn help them get better recommendations. ● Removed ‘I like it’ button that comes with each suggested restaurant because it is too ambiguous. ● Included more direct key call-to-action buttons such as “Place Order” ● If the user doesn’t like any of the three restaurant suggestions, then another set of three restaurant suggestions is presented in a carousel. ● If the user doesn’t like any restaurant from the second set, they are provided a link to Yelp.com for further browsing.
18
Design Rationale The goal of this final prototype was to provide users with quick and easy access to relevant food recommendations without the need to install a new app or use multiple different services or websites. Firstly, to quicken the interaction between user and service, we decided to use a platform that is nearly ubiquitous on every smartphone; Facebook Messenger. This platform has the obvious benefit of being more mobile friendly than navigating Yelp’s mobile website from a smartphone, but also afforded us the ability to offer photo carousels and other “mini-app” experiences within our conversation. We used this functionality to format our “media package” that organizes the user’s submitted information/media into a consolidated, easy-to-understand package. Initial research from users suggested that the vast majority start their online food ordering experience with a category in mind. Because they have an idea of what they want, many claimed they were unlikely to look for reviews. In an effort to make this service and the resulting recommendations relevant to the user, we decided to start with where the user starts; the food category. From our usability tests, it was clear users appreciated the “media package” specifically and cited it as a main reason for using the service. Based on the feedback from users that asking for suggestions multiple times was cumbersome, we decided to show users three recommendations at a time within this “media package”, to align with the three food categories they chose near the beginning of the interaction. We believe this service offers a quicker way to get relevant food recommendations at the moment the user wants them, thus providing an alternative to the tasking action of sifting through review after review on the Yelp website.
19
Sources Adams, Paul. (2016). Why cards are the future of the web - Inside Intercom. Retrieved September 14, 2016, from https://blog.intercom.com/why-cards-are-the-future-of-the-web/ El-Zohairy, Abdel-Rahman. (2016). Messenger Platform could be more powerful than you think. Retrieved September 14, 2016, from https://medium.com/@azohairy/messenger-platform-could-be-more-powerful-than-you-think-4ecc08fb5 a5a#.wg2v714xn Macdonald, S., & Headlam, N. (2008). Research methods handbook: Introductory guide to research methods for social research. Manchester: Centre for Local Economic Strategies. Mariansky, Matty. (2016). Cheating on the Turing test. Retrieved September 14, 2016, from https://medium.com/building-the-robot-assistant/cheating-on-the-turing-test-bc23a36db10#.j5b2u6vzs Messina, Chris. (2016). 2016 will be the year of conversational commerce. Retrieved September 14, 2016, from https://medium.com/chris-messina/2016-will-be-the-year-of-conversational-commerce-1586e85e3991#. uht88wrto Stolfa, Tomaz. (2016). The Future of Conversational UI Belongs to Hybrid Interfaces. Retrieved September 14, 2016, from https://medium.com/the-layer/the-future-of-conversational-ui-belongs-to-hybrid-interfaces-8a228de0bdb 5#.f6beme6gv
20
21