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
fig 2: Trevor's second
fig 3: Trevor's third
Ben
fig 4: Ben's first design, front page
fig 5: Ben's first design, results page
fig 6: Ben's second design, front page - results page would be the same as first design.
fig 7: Ben's third design, an SMS/MMS interface for feature phones.
Miren
fig 8: Miren's design for tiny screens (e.g. smartphones).
fig 9: Miren's design for regular webpage.
fig 10: Miren's design for highly specific profiling of dietary restrictions and preferences.
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
[todo]
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 than
Story
[todo]
Analysis
[todo]