TASTEBUD

February 25, 2014 Authored by: Katie Madonna, Rochelle Ng, Riley Porter, and Heather Eberhart

Low-Fidelity Prototype Testing

CSE 440 – Winter 2014

1

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Low-Fidelity Prototype Testing CSE 440 – Winter 2014

Project Title and Team Breakdown Tit le TasteBud Team Names and Roles Riley Porter - Project Manager (keeps project on point) Katie Madonna - User Experience Manager (keeps us focusing on user) Rochelle Ng - UI Designer (keeps design principles in mind) Heather Eberhart - Archivist (review and turn in assignments) Problem and Solution Overview Many people have difficulties eating out at restaurants because of food allergies. Either they have a restriction on their own diet, someone they are going out to eat with does, or a child in their care does. It can be a very frustrating search to find restaurants to meet the needs of everyone in the group, and potentially dangerous if the information on allergens in food prepared in restaurants is not readily available. Currently, the method for solving this problem is to waste time scouring blogs and applications like Yelp for suggestions and then scrutinizing the websites of the restaurants they find to look for allergen information. Also, restaurants will turn up in a search as having the right allergen requirements, but in reality that might only mean there are one or two side dishes that meet the requirements and then that means the time pouring over the restaurant’s  menu  was  wasted  and  the  search  has  to  continue.   Technology could help solve this problem if there were a service to search for restaurants while also applying various allergen filters. This could allow users to search for the specific requirements they, or their group or child, need, with the confidence that the restaurants found will have food safe for them to eat. The service could also utilize a user base by having people comment and rate existing restaurants so that the other users have information on a restaurant before becoming too invested.

User Group and Contextual Inquiry Participants The target user group is someone with a food allergy or diet restriction, or going out to eat with someone else who has a food allergy. This includes all sorts of food allergies, like dairy, soy, vegetarian, vegan, or gluten free. Depending on the design we choose, the user group will narrow further to one, or a combination, of these groups based on further research and the design process. The narrowing that we expect is that the age range will become more specific, we may end up focusing on one food allergy, and we may focus on users at home in comparison to mobile users. Each of these groups has different needs, and for now we are able to design with all of the groups in mind, but as our project narrows we will be able to specify the target users more clearly. We interviewed varied potential users with our contextual inquiries, to get a better

2

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

idea of the different needs of the different groups. All of our contextual inquiry participants would be primary stockholders that would interact with our design directly and either have a food allergy themselves, or have kids with food allergies. We interviewed three participants during our contextual inquiry process. The first was Alana*, a 21 year old college student with milk and soy allergies (and also lactose intolerance). She has had allergies all her life, but in the two years Alana’s  allergies  have  become  more  severe.  As  a  result she pays a great deal more attention to the ingredients in her food. For our second contextual inquiry, we interviewed Sally*, a 57-year-old woman with a gluten intolerance. She has only had this food sensitivity for a short time and so she is still figuring out what restaurants are likely to have food items she can eat. In our third contextual inquiry, we interviewed Julia*, a 38-year-old mother with two young sons, Luke* (8) and Liam* (10). Luke and Liam are both allergic to eggs and nuts. In addition, Liam is allergic to dairy products. Julia rarely takes her children out to restaurants and prefers cooking for them at home because it is hard to find ingredient information for menu items at most restaurants, and she is worried about hidden allergens in restaurant foods. *Indicates that names have been changed.

Contextual Inquiry Results and Design Implications

Results Overall there were three important themes that emerged from our interviews. First, participants indicated that they often stuck to restaurants they knew well or chain restaurants because the menus were more detailed and easier to find. However, there was an overall desire to try new and interesting places if detailed menu information was available. Second, participants really enjoyed services that provided an easy and detailed filtering system with simple checkboxes for types of allergies or foods they wished to avoid. Third, participants expressed a desire for menus that listed exact ingredients in each of the menu items as well as ingredients used in preparation (such as types of oil and butter). Our Allergy Restaurant Finder needs to provide detailed menus, quick and easy filtering, and a way to find new and exciting restaurants without extra hassle. Design Implications Observation: Participants looked at approximately three other pages/links before they refined

their search or gave up. Implication: We need to make sure that the user can find what they are looking for easily. O: If people were familiar with the area, they tended to eliminate certain areas based on prior

knowledge. I: We need to offer a way to exclude certain areas from search results. O: If confronted with an unfamiliar area, users indicated that they would seek a chain restaurant

that they knew accommodated their allergy. I: If it were easier to find a restaurant in a new area, users would have more options of where to

dine, so we should aim to make finding a suitable restaurant as easy as possible.

3

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

O: Participants got disappointed when they found a restaurant, only to find  it  didn’t  offer   accommodations for their allergies.

I: We should only show options available to the user, so we must have them input their information prior to displaying any sort of results.

O: Participants were very excited when they came upon personal blogs, but mentioned that there

was luck involved in finding them. I: People with allergies value information provided by people with similar allergies, so it would

be helpful to provide a community where users could easily find and share their real life experiences.

O: Avoiding allergens at home is easy. I: Our interface needs to offer information comparable to what you would have if you prepared

your own meal (listing ingredients and cooking techniques for example). O: Our participants were often disappointed or frustrated with the lack of filters available on

current restaurant finding applications. I: We need to provide a filtering system to help users find exactly what they want.

4

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Sketches of Selected Design (Mobile App)

5

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

6

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Reasoning for Chosen Design We have a large user population. In the US alone, there are approximately 15 million people with food allergies. This does not include people with food sensitivities or people who choose to avoid certain foods based on lifestyle choices. Our contextual inquiry participants expressed a desire for some sort of application that allowed them to try new restaurants, easily find places to eat with friends, and provided detailed ingredients lists. When we came up with our designs, we tried to keep these ideas (as well as our other design implications described earlier) in mind. We came up with a smartwatch which was highly mobile, but difficult to display lots of information. We also designed a map based website which could provide extensive information, but was not particularly mobile and required some planning to use. In addition, we began to design a mobile application which turned out to be a happy medium between the two.

Our users indicated that a mobile application would allow for spontaneous plans with friends and provided the information they needed on the go. While the website was nice for extensive planning, it limited where it could be used. A mobile application allows users to find the allergy information they need exactly when they need it. It also helped to avoid disappointment when friends suggest places to eat because users will know exactly what they will be able to eat at each restaurant. We will be moving forward with the mobile application design to encourage spontaneity, provide new options, build community, and preserve mobility.

7

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Storyboard

8

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

9

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

10

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Paper Prototype Our paper prototype allows users to sign up with TasteBud and create a personal profile by inputting their personal information and indicating their allergies (screens 1, 4, & 5). Once they confirm their new profile or login to an existing profile (screens 2 & 6), they can perform many actions from the home screen (screen 3). The main pieces of functionality are searching for restaurants, connecting with friends, looking at recommendations (screen 8), and writing reviews. The main interaction ideas are to get users to create a personal profile, search for restaurants and filter the results (screens 9-15), and engage in the TasteBud community. To help users pick a restaurant from the  search  results  they  can  view  a  restaurant’s  profile,  read  other  users’  reviews  and  view  a  customized  menu  that  shows  them  their  food  options  as  well  as  a  detailed list of ingredients in each item (screens 16 -19). To simulate interacting with other TasteBud users, participants can bump phones with us, acting as a fellow TasteBud user, to exchange allergy information on our profiles and then perform a search based on our combined preferences (screens 3 & 21-23). Participants in the study can also rate restaurants and write reviews, which serve as helpful tips to other users in the TasteBud community (screen 20). Participants operate our paper prototype as if they were using their mobile phones, simulating touch  gestures  with  their  fingers.  One  member  of  the  TasteBud  team  acts  as  the  “computer”  and  switches the prototype view based on the interactions the user performs. Common affordances are used, such as buttons for pressing, scroll bars for scrolling, text fields to be pressed to bring up a mobile keyboard, etc. To connect with a friend, we have participants bump phones with us. To do this, they take their paper prototype and bump it with our prototype, which is just a paper cutout of a mobile phone.

11

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

12

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Evaluation Method

Tasks Our easy task was to find a place to eat nearby, given  the  participant’s  allergies.  To  do  this,  users  had to create a profile and enter their allergy information. Then, users could search for a restaurant near them and choose one from the map/list of search results. Users could look at ingredients in menu items for each restaurant and look at user reviews to make their decision. Our medium task was to write a review for a restaurant. Once a user has found a restaurant on TasteBud, they pretend to have gone and eaten a meal at the selected restaurant. To leave a review,  they  go  to  the  restaurant’s  page  to  write  a  review  and  rate  the  restaurant.  We  did  not  tell  users how to leave a review, so we could observe whether or not the process of writing a review was intuitive. Our hard task was to find a place to eat with a friend who also had allergies. In our study, we were the friend, and we told the user that we already had a TasteBud account set up. The user had to bump phones (paper prototypes) with us to exchange allergy information and choose from restaurants that were filtered based on combined allergy information.

Environment Studies were conducted either where the user lived or in a library meeting room depending on participants’  preferences.  To  set  up  the  paper  prototype,  we  laid  out  the  paper  phone  on  a  table.  When users did certain actions that triggered a change in what the phone screen showed, we swapped the paper phone with another paper phone with the appropriate screen. We had a paper cutout of a phone, so that they could pretend to bump phones with us. The tasks were recorded using a tripod and video camera set up to record the interface and hands of the user as they performed the tasks.

Partic ipants Our first participant was Julia, a mother of two sons. Both of her sons have egg and nut allergies. Her older son is also allergic to dairy products. Our second participant was Alana, a biology major with milk and soy allergies. Both of these participants were interviewed previously for our contextual inquiries, due to their familiarity with our project and differing perspectives we felt it would be informative and time saving to have them test our prototype. Our final participant was Natalie*, a 19 year old college student. She is a computer science major (who has not taken HCI) that has allergies to tree nuts and has minor reactions to some fruits. We wanted to get Natalie’s perspective because she has allergies that are less severe than out other participants and offered the perspective of someone who was more familiar with new technologies. *Indicates that names have been changed.

Procedure One of us went to each participant and set up the paper prototype. We recorded each study with the  user’s  consent,  so  that  we  could  go  back  and  take notes on important findings. Each user

13

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

performed all three tasks. We paused between tasks to ask questions and write down notes and responses. First, each user found a restaurant for themselves. Then, they wrote a review for that restaurant. Then, they bumped phones with our paper phone to find a restaurant where we could both eat at. Every time the user performed an action on the phone screen that led to a different screen, we swapped their paper phone with another one with the appropriate screen. We finished our tests by asking questions about overall impressions. After the tests were complete the conductor of the test watched their recording and compiled all their notes which were shared and discussed with all team members.

Measures While the user was performing tasks, we looked for anything the user did that was unexpected. We also looked for anything that could have possibly caused frustration for the user as indicated by hesitation or appearing confused. We did not time any of the tasks, but we kept an eye out for anything that took the user a long time to find or figure out. We also planned to keep track of any errors the user made in performing the tasks. We also noted any suggestions made by the user and anything they said they liked. At the end of two of the studies the participants were asked to rate on a scale of 1-10 how likely they were to use the app, how likely they were to recommend it to a friend, and to rate the usability.

Evaluation Results There were a couple of findings that were consistent across all users. When selecting a restaurant from the Near Me map, if the user clicks on one of the points, the app takes them to that restaurant’s  page.  Users  expressed  that  before  taking  them  straight  to  that  restaurant’s  page,  they  would like it if a small pop-up with a little bit of information about the restaurant. That way, they could decide if they actually wanted to view more information about that restaurant. We also found that for users, especially those who were less tech savvy, the bump was not that intuitive and  was  unexpected  as  the  phrase  “connect  with  friends”  implied  Facebook.  In  addition,  bumping limits users to exchange information with only one other user at a time. This can be inconvenient if the user wants to go out with several other friends who have food allergies. After bumping  phones,  users  asked  if  they  could  save  their  friends’  information.  Users  said  that  if  they  were going to have profiles, they should be able to also have a friends list and be able to contact their friends on the app. One user specifically noted that she would want to be able to set up plans ahead of time from different locations. Since we did not offer a way to connect with friends without  the  bump  and  didn’t  support  saving  friend’s  data,  this  wasn’t  possible  with  our first prototype. Additionally, all users expressed that they would like to bookmark restaurants, so they could save restaurants that they liked and have a quicker way to view dishes that were available to them at a given restaurant. Some findings were unique to one or two users, but were still quite important to the success of our prototype. For example, we were again reminded that users not only want information about ingredients inside dishes, but also information about ingredients that are a part of the food preparation process. One of the users expressed that the food preparation stage is often where the allergens are hidden. This was a minor flaw in the wording of the prototype, noting that peanuts were used as a garnish was meant to convey that more specific information was meant to be

14

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

included but was ultimately unclear to our user. Also, one user noted that it would be nice if the search results were accompanied by a color coded symbol that indicates the type of cuisine (which would carry through onto the map) as a way to easily and visually provide extra information. Our user with less severe food allergies was slightly overwhelmed by the number of filters, while our intention was to make these filters optional she hesitated in reading through the list and deciding what to pick. Two users found the location of the post review button somewhat unintuitive and hesitated in pressing it, and mentioned that it seemed like it might have been the title. Additionally one user noted  that  the  process  of  writing  a  review  (if  you  weren’t  already  on  a  restaurant page) was slightly complex and could potentially be simplified. As a whole users seemed to like the application and found it pretty easy to use, they indicated that they would use it if it was available and were very likely to recommend it to a friend.

Revisions and Refined Design Sketches To address the problem of only being able to connect to one friend at a time using the bump method, we changed it so that to connect with friends, all users who wanted to connect would push  the  button  that  says  “Connect  with  Friends”  and  the  phone  would  automatically detect other users around it that wanted to connect. As users are detected, their profile pictures pop up as icons. If someone was detected who was not part of the group (because perhaps that person was connecting nearby), they can click on the “X”  in  the  upper  right  corner  of  that  person’s  icon  to  remove that person from the group. Once all users have been detected, they can click the “Continue”  button  to  browse  restaurants  that  suit  everyone’s  food  allergies. Additionally, we made it easier to save restaurants to “Favorites” and to “Check In” to restaurants right from the restaurant’s page. Throughout the entire design, we went back through and made the back buttons consistent, keeping them in the upper left corner and just using the word “Back” instead of alternating between that and an arrow.

15

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

16

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Appendix

17

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Appendix 1 – Consent Form

Consent Form The TasteBud application is being produced as part of the coursework for the University of Washington Computer Science & Engineering course "CSE 440: Introduction to Human-Computer Interaction". Participants in experimental evaluation of the application provide data that is used to evaluate and modify the interface of TasteBud. Data will be collected by interview, observation, and questionnaire. Participation in this experiment is voluntary. Participants may withdraw themselves and their data at any time without fear of consequences. Concerns about the experiment may be discussed with the researchers (Rochelle Ng, Riley Porter, Katherine Madonna, and Heather Eberhart) or with Professor Maya Cakmak, the instructor of CSE 440: Maya Cakmak Computer Science & Engineering University of Washington mcakmak at cs.washington.edu Participant anonymity will be provided by the separate storage of names from data. Data will only be identified by participant number. No identifying information about the participants will be available to anyone except the researchers and their supervisors. I acknowledge that I have been given an opportunity to ask questions about the nature of the experiment and my participation in it. I give my consent to have data collected on my usage and opinions in relation to the TasteBud experiment. I understand I may withdraw my permission at any time.

Name ______________________________________________ Date _______________________________________________ Signature____________________________________________ Witness Name ________________________________________ Witness signature_____________________________________

18

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Appendix 2 – Testing Notes

Partic ipant 1 1 moment of confusion/hesitation 1 unsupported/unexpected action

Inconsistent back buttons o Some  literally  say  “Back”,  some  are  arrows,  and  some  are  X’s

Julia would like information about any ingredients used in the preparation process as well, and not just ingredients in the dish

o I think this was just maybe a just a miscommunication, I listed peanuts as (garnish) to indicate that certain details would be included. I was hoping to imply that the type of oil, sautéed in butter, etc. would be in the list of ingredients.

Bump phones? Not natural to everyone +1 moment of confusion/hesitation o Might  be  easier  to  just  say  “waiting  to  receive  signal  from  other  phone” o This would also be a better option to connect with multiple friends

When  on  the  “Near  me”  map,  would  be  good  if  when  you  clicked  on  one  of  the  points,  instead of taking you straight to the restaurant page, it gave a little blurb first, and you could decide if you actually wanted to look at the restaurant page

Forgot to add a check-in button on restaurants o Inconsistent with the stats

Would be nice to be able to bookmark restaurants o Maybe just add a heart icon on each restaurant page, and users can later access

their saved restaurants on their profile Tried  clicking  on  a  user  who  left  a  review  to  view  their  profile.  Didn’t  prepare  for  this.  

But,  we  would  support  viewing  other  users’  profiles.  +1 unsupported interaction Can we have friends and message them? It seems natural after you bump with someone

to be able to save them as a friend and connect with them.

Partic ipant 2 3 moments of confusion/hesitation 0 errors

Alana liked that we gave a numerical price instead of a number of dollar signs (actually indicated a real price, what did $ mean versus $$$)

In foods wanted/not wanted Alana was  quick  to  point  out  that  we  didn’t  have  coffee  shops  as  a  category,  she  mentioned  that  Yelp  had  ‘beverages’  but  that  coffee  shops  and  bars were pretty distinct and seemed like separate categories.

She  didn’t  think  saving  foods  wanted/not  wanted  would  be  very  helpful  since  it’s  likely  to change depending on the day, but noted it might be good if she really hated one type of food.

On the list of search results Alana asked whether the blank images were pictures of the restaurants or some kind of icon, this led to a discussion about what would be most useful. She liked the idea of a color coded symbol that corresponded to a type of cuisine (which  would  also  be  used  on  the  ‘near  you’  page  to  give  a  quick  indication of what type of food it was. She said this would be better than restaurant images since the image “rarely”  influenced  her  decision,  only  if  it  looked  very  “sketchy.”

19

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Alana said  it  would  be  more  natural  to  have  the  ‘post  review’  button  below  the  text  box,  since it seemed almost like a title. She had a little trouble locating it and seemed to want the  ‘return’  key  of  the  keyboard  to  post  the  review.  +1 moment of hesitation

She  noted  that  we  missed  a  ‘back’  button  on  the  restaurant  profile  page. She felt like a way to favorite a restaurant was missing from the restaurants profile page

as well, and a corresponding way to view your favorites, possibly from your profile. Alana asked  “do  I  need  to  sign  in  every time?  Or  would  it  save  the  data?”  She  said  she  

expected to not have to login every time she used the app. +1 moment of confusion/hesitation

Alana felt  like  the  app  could  be  “social-media-like”  and  that  would  be  a  pretty cool concept.

Alana was  unsure  of  whether  ‘Near  Me’  took  her  allergies  into  account,  something  like  “For  You  Near  You”  would  be  more  informative.  

During the process of bumping phones: +1 moment of confusion/hesitation o Alana was  hesitant  to  press  ‘connect  with  friends’  she  felt  like  this  could  link  you  

to Facebook, but given it was the only option she pushed it. I asked if adding a symbol to the button not associated with Facebook would make it clearer and she said yes. She noted that connecting your profile to Facebook might be a nice feature and make it easier to connect with people you know.

o She  wasn’t  too  sure  what  to  do  with  the  bump,  hadn’t  heard  of  the  technology,  “iPhones  don’t  do  that,  do  they?”  but that it was well explained, just unexpected.

o Alana felt  like  there  should  be  a  way  to  add  friends  who  aren’t  with  you  so  that  you could search for restaurants ahead of time if coming from different locations, she also thought it would be good to have an option to add a friend after you transfer info with them.

Usability: 7 Recommend to a friend: 9 Use themselves: 9

Partic ipant 3 2 moments of confusion/hesitation 0 errors I had Natalie test our prototype – she is allergic to some tree nuts and has a mild reaction to some fruits. She is a 19 year old college student in computer science (she has never taken HCI).

Natalie seemed slightly overwhelmed by the number of filters, one thing she mentioned was having foods I want all initially checked and unchecking  anything  she  didn’t  want.  She  wasn’t  sure  what  to  do  if  she  didn’t  want  to  specify  a  certain  type  of  food.  +1 moment of confusion/hesitation

She had some trouble with the process of writing a review, first you search for the restaurant and then go  the  restaurant  page  which  has  a  ‘read  reviews’  button,  but  there  is  no mention of where to write reviews, she said it would be more clear if the button said “read  and  write  reviews”.  +1 moment of confusion/hesitation

Natalie mentioned  including  a  ‘check-in’  and  ‘favorites’  button  on  the  restaurant  profile  page.

20

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Natalie mentioned  having  ‘near  me’  and  ‘search  restaurants’  combined  under  a  ‘restaurants’  button  that  takes  you  to  ‘search’  and  ‘near  me’  and possibly having favorites here or the ability to check-in at a restaurant.

She also felt like recommendations could be located in the profile. I asked Natalie if  she  felt  the  word  ‘connect’  suggested  Facebook  to  her.  She  said  no  that  

it implied a network  of  friends,  not  Facebook  specifically.  She  noted  that  she  doesn’t  use  Facebook much, that only a Facebook icon next to the word would imply that they were related.

Natalie was  aware  of  bump  technology  and  didn’t  find  it  as  unintuitive  as  the  other  participants,  she  didn’t  ask  any  questions  about  the  process  or  hesitate  to  bump  phones  with me once the searching icon appeared

Usability: 10 Recommend to a friend: 10 Use themselves: 10

21

Low

-Fid

elity

Pro

toty

pe T

estin

g |

2/2

5/20

14

Appendix 3 – Image of Testing Setup