GR2 - Designs
Scenario
Erin is going out to buy food for the week. Before leaving, she uses Dough to check how much money she has left for food this week. As she is putting away her food, she logs the food she purchased in dough. She also adds the total receipt amount, $57.45 to her budget tracking. Erin is hungry after shopping. She uses dough to look up suggestions of food to use to prevent waisting food from last week. It turns out she still has a bunch of asparagus in the back of her communal fridge. Erin didn't cook the asparagus earlier because she wasn't sure what to cook them with, so she uses dough to query external recipe sites for suggestions.
Designs
Design 1:
Design 2:
Upon loading the website, Erin sees the Dough home page. It is easy for her to find the login button at the top, and she enters her username and password in the modal dialog box that appears when she clicks it.
After logging in, she is presented with her dough splash page. It gives her a brief summary of the most relevant information to her regarding food supply, recipes, and food budget. Each section of the page supplies a link to a more in-depth page for each area, and links are also provided at the top in the form of tabs.
She wants to look at her budget before going shopping, so she clicks the budget tab. Here she views a progress bar representing the percentage of her monthly budget she has used. Her $300 goal was originally set during the sign up process for Dough, but she could change it at any time with the "edit budget" link. She could also view a graph charting her spending over time, see her latest purchases, and edit previous purchase amounts using the "edit purchases" link.
Erin goes shopping, and when she returns she loads up Dough again and proceeds to the food tab. Here she can see her food supply presented in thumbnail form. Each food thumbnail has a checkbox at the upper left corner so that multiple foods can be selected and have operations performed on them (delete, move, and change label). The foods are sorted by the time until they expire, and a progress bar at the bottom of their image represents the approximate time they have left. An icon at the upper right corner of the thumbnails represents where each of the foods is located (critical information for estimating time until expiration); ice represents food in the freezer, a refrigerator represents the fridge, and a cabinet represents food that is not cooled. These locations are changed with the "move to" command. It is also possible to change which types of foods are being displayed with the view multiple select boxes.
Erin selects "add food" on the previous page to enter the foods she has just purchased. This brings up a modal dialog box with several spaces for food. Entries can be removed with the minus sign, and more entries can be added to the list with the plus. If enough entires are included, a scroll bar will appear to scroll through them. To enter the foods, Erin can click "add food", or to quit she can press "cancel" or the x in the top right corner.
Erin begins to enter the food she bought. When she begins typing beef, the box predicts her entry with autocomplete. She only has to type "be" before it recognizes "beef" for her. Upon recognizing the word beef, Dough also fills in an estimated expiration date and desired storage location for her. Erin is able to go back and change these defaults if she so desires, but she is satisfied with the default result.
She presses "add food" to add all the new foods to her food supply. Dough prompts her in another modal dialog box to enter in her total bill for the food. Here she has the option to simply enter the amount or cancel it and do it later via the "budget" tab. She enters the amount she spent and presses "ok".
After seeing that the new items are added to her food supply, Erin goes to the recipes tab to find something to cook. Pressing "go" on this page would suggest all recipes that she can make with her food, but she has more specific ideas in mind. She presses the advanced option link to open up the advanced tab.
Under advanced options she can see different ways to refine the recipe search. On the lower left there is a list of items in her food supply sorted by expiration date. She notices the asparagus at the top and decides she should really use it up. She clicks the check mark next to it to select it and find only recipes involving asparagus. She presses go to query external recipe sites.
The recipe tab now displays the results of her search. She can scroll through them, click on individual ones to view them, or press back to go to the main recipe search page.
Erin decides poached eggs and asparagus sounds good, so she clicks on it. It brings up a pop up page containing the recipe from an external recipe site.
