Vegitude - GR2

Scenario

It is a dark and stormy night. Ben Bitdiddle, a vegan with several years of experience cooking for himself, has a hankerin' for mac n' cheese. Having made a number of vegan mac n' cheeses before, he wants to try something new, so he'd like to look at a number of both vegan and non-vegan recipes.

Individual Designs

Trevor

fig 1: Trevor's first design

This is a very minimal design, allowing the user to simply type in what the user wants (eg. "Vegan Stir-fry") and get a resulting recipe page. 

fig 2: Trevor's second design

This is a more heavy-handed design than others, with a "basic and an "advanced" search ability: the former allowing one to search for a dish with certain dietary restrictions and the latter allowing one to search using the ingredients one has on hand.

fig 3: Trevor's third design

This design is a more visually-focused design, allowing one to choose their dietary restriction (or choose to further customize their dietary restriction. After choosing their particular dietary restriction, they will be brought to a page with popular recipes for their dietary restriction, a list of popular substitutions made for people with their dietary restriction, and the ability to search for particular dishes that adhere (or may be able to adhere) to their dietary restrictions.

Ben

fig 4: Ben's first design, front page

The search page for this design is fairly minimal -- it provides a text box to enter the name of something you're searching for, and check boxes to indicate your dietary restrictions.

fig 5: Ben's first design, results page

The results page provides a left column allowing the user to edit their search and view results. The right column shows the ingredients and directions, with substitutions based on the user's restrictions.

fig 6: Ben's second design, front page - results page would be the same as first design.

This design allows users to enter what ingredients they have on hand and what meal they're making, and would then search for recipes with those ingredients.

fig 7: Ben's third design, an SMS/MMS interface for feature phones.

You text your search to a number, and it then texts back a list of recipes. You text which recipe you want to see to the service, and then you get back a recipe.

Miren

fig 8: Miren's design for tiny screens (e.g. smartphones).

The interface is as straight forward as possible. When a recipe name is clicked on, the recipe drops down below the name without navigating to a new page. The screen can scroll around recipes without having to close the active recipe.

fig 9: Miren's design for regular webpage.

Standard webpage. There is a featured recipe section which changes daily to make sure that there is a large variety of recipes for daily users.

fig 10: Miren's design for highly specific profiling of dietary restrictions and preferences.

User profiles are highly specified by a quiz that the user takes when first visiting the website. Recipe suggestions and search results are highly tailored to users.

Design Storyboards

Design #1: Dish-Based

fig 11: Design Storyboard #1

Story

Ben Bitdiddle, worn weary from a long day's work, wishes to cook himself and his girlfriend a delectable dish they both can enjoy. Given that his girlfriend can't eat gluten and he hasn't had much experience cooking her food, he turns to Vegitude for help. Being a fan of Mac n' Cheese (and knowing his girlfriend loves meals with a lot of cheese), he opens up the simple, streamlined website and simply types in "Gluten-free Mac n' Cheese with Tuna." He then presses the "Give it to me!" button. He is then transported to the result webpage, which consists of an outside website's recipe page for delectable Tuna Mac n' Cheese. At the top border of the webpage is list of possible substitutions for the recipe to make it properly Gluten-free, two navigation buttons to flip to different recipes for the same dish, and a search bar if one wishes to search for another dish. After clicking through a couple recipes using the "next" and "previous" buttons, he settles on one he likes. He cooks the dish accordingly, simply substituting the macaroni for some gluten-free macaroni as suggested in the top left segment of the page. 

Analysis

The design, as a whole, worked for Ben. He typed in what he wanted, and the website gave it to him. At the same time, Ben was not given any nice display of choices. He was instead given a single result without easy access to others. Although Ben did use the next and previous buttons to look through a few recipes, this involves blindly traveling linearly from one recipe to another, which involves reloading webpage after webpage. In the end, it gives Ben what he wants, but not as efficiently or as nicely-presented as it should be. 

Design #2: Ingredient-Based

fig 12: Design Storyboard #2, part 1

fig 13:  Design Storyboard #2, part 2

Story

Ben looks in his pantry and picks out some key ingredients: he has eggs, flour, quinoa, avocado, and pasta. He enters them in one at a time, and then clicks "Search". The results page has a left column that presents a list of recipes, as well as filters to search for particular recipes or restrict the recipes to vegan recipes, dairy-free recipes, etc. When he clicks on a recipe, he sees the full recipe in the right column. For the ingredient list, he can use a toggle switch the view the original recipe or a substituted version that meets his dietary needs. If he clicks on an ingredient, he can see what is was before substitution, where to buy the ingredient, and alternative substitutions.

Analysis

This design is not well-suited to helping Ben find mac n' cheese. He could filter the recipes with the search bar in the left column of the result page, but the design is oriented more to finding recipes for a given set of ingredients. However, the results page provides a clearly navigable listing of recipes, and the recipes are augmented with important information about substitutions, presented in the context of the recipe itself.

Design #3: Restriction-based

fig 14: Design Storyboard #3, part 1

fig 15: Design storyboard #3, part 2

Story

Alyssa P. Hacker has a number of friends who are vegetarian, and one of them has a nut allergy in addition to being vegetarian. She wants to cook a dinner for all of them, so she decides to browse vegetarian recipes to find one that is suitable. She would like a recipe without nuts or a recipe from which she can easily remove the nuts for the allergic person. She clicks the "Vegetarian" button on the front page (fig 14). She can now browse vegetarian recipes on the next page (fig 15). Alyssa is pleased to see that there are icons which indicate if a recipe is also nut-free, pescatarian, vegan, etc. She scrolls through recipes, hovering over the ones with the nut-free symbol to see short recipe summaries on the right side of the page. When she finds the one she wants, she clicks on it and is brought to the full recipe page which is more descriptive than the hover-description.

Analysis

This design is best when Alyssa is looking to browse through recipes by dietary restriction rather than to find one specific recipe. The frontpage is minimal, but it doesn't help to sort the results in any way other than by type of restriction. The icons help with further sorting by dietary restriction, but there are no ways to sort by difficulty or cook time even though those descriptions are displayed.