Bake & Barter

CS 220: Human Computer Interactions Project

By: Emily Faith Anderson, Beatrice Egan, and Claire Schlenker

P2: Storyboards + Design Sketches


Scenario 1

Catherine is a sophomore who lives in Munger and who is studying Computer Science. Tomorrow is her best friend Ana’s birthday, and Catherine wants to make cupcakes. She is a relatively experienced baker, and possesses a mixing bowl, a whisk, cupcake tin liners, and a cupcake pan. Unfortunately, after looking through her bin of supplies, she realizes that she doesn't have any ingredients. She takes her phone out of her pocket, and consults Bake and Barter. She implements a search query for eggs and learns that three students have listed eggs in their pantries. One match is Dev, who lives in Pomerory, has eight eggs, which expire in five days. Catherine clicks on "See the Rest of This User's Pantry" and notices that Dev has also listed vegetable oil, which Catherine needs for the cupcakes. Catherine clicks on the "Send a Message to this User" button, and types, "Hi Dev, may I please have two of your eggs and a quarter cup of vegetable oil? I am making cupcakes for a friend's birthday, and can give you two of them once they're cooked! Thank you." Catherine hits the "Send" button, and puts her phone into her back pocket. She walks to the Emporium, and buys one box of chocolate cake mix and one container of vanilla icing. While she is waiting to purchase her ingredients, she checks her phone, and sees that she has received a notification from Bake and Barter. Dev has sent her a message that states, "Sure, I live in Pom 222. I'll be in my room until 7, feel free to stop by whenever". Catherine replies, "Great, thank you so much, I'll stop by in 10 minutes". She finishes purchasing her other ingredients, drops them off in her room, walks to Pom, and knocks on Dev's door. Dev answers, and gives Catherine two eggs and the bottle of vegetable oil. Catherine promises to return it in a few hours, with two cupcakes for Dev. Catherine conducts her baking in Munger, tidies up and heads back to Pomeroy with two cupcakes in hand and the bottle of vegetable oil. Upon return to her room she notices that she still has half of a container of icing left, which she has no use for. She pulls out her phone, opens Bake and Barter, clicks on "I Have", and fills out the form to post her container of icing. She clicks "Submit" and closes the app.

Scenario 2

Betty is a junior who bakes regularly as she is off of the meal plan. She has an extensive pantry of ingredients and supplies. Betty downloads the Bake and Barter app in order to share her supplies with fellow students and reach out in the case she is missing something. She opens up the application on her iPhone and presses the “my profile” button, wanting to accurately update her information. She inputs her dormitory, Bebe 333, as well an image of herself and her year at Wellesley. Now, she is ready to upload items to her pantry. She navigates back to the home screen and over to the “I want…” section. This will allow her to upload both her perishable and nonperishable ingredients. She uploads a baking tray, a muffin tin, a baking sheet, measuring cup and spoons, as well as some parchment paper. For all these items she is willing to lend them out for barter and for free, so makes sure to indicate this while uploading them. For her perishable items, eggs and milk, she makes sure to note their expiration dates. For these items, she’d rather not give them away for free (because they are limited quantities) so she notes that she would prefer to barter or be paid in cash for them. Once she’s finished uploading her items she tucks her phone away. Later that evening she receives a notification from Bake and Barter! Lily, a freshman who also lives in Bebe, writes to her: “Hey! I see you have a baking sheet, I was wondering if I could borrow it this evening.” The two coordinate with one another over the in-App messaging system. Later that evening Lily borrows the baking sheet from Betty, who left it outside her room as she was going to be off campus that evening. Once Lily has completed her baking project she cleans up and returns the baking tray to outside Betty’s room.

Scenario 3

Anna, a first year, has recently become interested in the idea of learning how to bake. She has sugar from baking a pie a few weeks ago but wants to tackle her next project. A friend was telling her how she uses the Bake and Barter app to share her ingredients with dormmates and about the recipe sharing feature. Though her friend hadn’t tried this feature, Anna was looking forward to finding a recipe that could use her remaining sugar. She heads into the app and starts to search through recipies. She adds some favorites to her recipe box, so that she can look through later. It seems there is a great recipe for a lemon tart as well as some cherry chocolate chip cookies. The one that really stands out though is a raspberry dark chocolate molten cake. The ingredients aren’t too extensive, it would utilize the rest of her sugar, and the picture that the user uploaded makes it look delicious! As Anna already has sugar, and can grab a bar of dark chocolate and raspberry jam from the emporium all she needs is some flour, a cupcake tin, and a stick of butter. She navigates back to the home screen begins to search for her missing ingredients. She is easily able to locate a cupcake tin from another student who lives in Caz as well. For the flour and butter she has to make a trade for some sugar and $2 as well as a walk over to Lake to meet with Lender Laura. This is all easily coordinated through the in-App messaging feature and the 4 minute walk will be worth the finished product. Once she creates her masterpiece and enjoys a sampling of the delicious desserts she returns the cupcake tin to the lender in Caz. Really pleased with the recipe, Anna comments on it in the app and leaves a recommendation to future bakers that they can sufficiently cook the molten cakes for 11 minutes without being too soft on the inside.

Preliminary UI Designs

Design 1

This design uses a simple home screen, which displays the most frequently used tasks, but also uses a more complex navigation system. The navigation is controlled by clicking on the header, which produces a drop-down list of the pages. This design focuses on simplicity by combining relevant tasks. For example, “Manage Pantry” is considered as part of “Manage Profile” because it is affiliated with the user. However, this emphasis on combined functionality also means that not all specific tasks are visible on the home page. Also, this design uses buttons to guide user input and prevent errors Each individual's profile contains their basic information and the items that they have available. Each item is represented as a button, to maintain visual consistency. In this version, users are required to choose a photo and a preferred trade type for their item (which can be either free, cash, or a trade). If users want to search for an item, they can click on "I want", and then type in an item that they wish to search for. Item name and location are displayed in a button.

Design 2

This design uses an icon-based home screen as both the opening screen and the main navigation. Users can access this screen at any time by clicking on the “Bake & Barter” header. By the central navigation, this design focuses on making all tasks readily accessible, as well as clearly distinguishing between tasks to avoid overlapping domains. This design also prominently features drop-down boxes as a way to gather information from the user. This was chosen as a way to prevent user-caused entry errors.


Design 1

Design 2