Bake and Barter

CS 220: Human Computer Interactions Project

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

P5: Implementation

Overall Design Rational

Final Design

Bake & Barter was designed to be simple and easy to use. The home screen provides quick access to the four main features if the app. We chose to make these features larger buttons because we wanted to users to be able to quickly and accurately select the correct functions.

We focused considerable attention on the content of our bottom navigation bar. We included a back button, to facilitate east reversability of actions, as well as to provide users with control. We positioned a home button near the middle. This allowed the user to escape back to home at any point in the application. We also included the messages in the bottom navigation. Messaging is used in this application to coordinate the exchange of items between sellers, so it was important that it was accessible at all times. Users also receive a notification when the have a new message. Lastly, our help documentation was located in our bottom nav bar.

Within the features and functions of the application, we kept several design guidelines in mind. We kept our formatting an colors consistent, as well as the styles of buttons. We also made sure that the pages linked together in a consistent manner. For example, after an item is posted the user is taken to their profile where all their items are stored, and similarly, after a recipe is uploaded the user is taken to their favorites where their other recipes are stored.

We also hoped to cater to universal usability in this design by implementing our features in common, popular ways. For example, our messaging system is modeled off of the iOS style. Additionally, we used standard icons for our back, home, messaging, and help documentation buttons in order to more clearly convey their functions.

We also provided user feedback by implementing user confirmation dialogs, such as when users posted an item, deleted an item, or uploaded a recipe. These dialogs were intended to give our users closure about the activity they had just performed, as well as provide them an update of the system. Additionally, we hoped that these confirmations will serve as a way to prevent user error. User error was also prevented by implementing the filter options and fields for item posts with selects and buttons, instead of only relying on the user to type in all the information.

In addition to our back button, users can easily reverse their actions. For example, in their Profile, users can delete items that they have posted. Due to the scope of this application and the function it serves, there is not a large memory load on the users naturally.

For this application, we also chose to use a largely monochromatic color scheme. Throughout the project, we continuously used a cupcake as our inspiration for the light, airy, and "sweet" visual aspects of our design. We felt this was appropriate given our target audience as well as the content of our application. Additionally, we decided to use a baking picture as the background on the home screen. We chose this approach as a way to differentiate our home screen from the others. Again, this background was relevant to the content of our application.

Learn more about the process in this presentation. Click here!

Changes from Previous Versions

While our overall, basic layout of our application remained consistent over time, we have made changes to many features throughout our implementation. A subset of the more notable changes that we have made throughout this process include:

Implementation Note

Depending on the browser and device, occasionally some of our pages need to be refreshed. In these instances, buttons may not seem responsive or the visual display may seem a little "off". However, after refreshing the page everything works.

Testing Note

Because we did not create databases for our project, we have created stock search and post results. If you wish to test the search feature, please search for "eggs" (either all offer types, barter, or cash in either all dorms or the quint) or "pan" (either all offer types, free, or barter in either all locations or the new dorms). The stock recipe that we have provided for posting is a fruit smoothie recipe. If you wish to test the recipe upload feature, please upload the following recipe:

Fruit smoothie



If you want to test the item post feature, please post "vanilla frosting", which you want cash for and which expires on 5/20/14.

View App

Click here to view the working version of our app! It is intended to be viewed on a mobile device some formating may be distorted if opened in a browser.


The Home screen has buttons for the four main functions of this application. It also has a link to help documentation. The messaging function can be found within the bottom navigation bar.

I Have...

The I Have... page allows users to post items that they wish to share with the Bake & Barter community. Users enter information about the item's name, expiration date, and offer type. Users can also upload a picture of their item. When an item is posted by a user, the item can then be accessed through the user's My Profile. Currently, the application has been implemented to post the default item of Vanilla Frosting.

Click images above to enlarge

I Want...

The I Want... page allows users to search for items that they would like. Items can include common or unique ingredients, as well as baking supplies. Users are able to filter the results by Location (dorms on campus) as well as offer type (free, cash, or barter). Users can also modify their search after they view the results. After search results are displayed through the I Want... page, users can then click on particular items to view details.

Click images above to enlarge

My Profile

The My Profile page serves two purposes in this application. First, users can update their basic contact information and their display picture. Second, a user's posted items are stored within their profile. Users are able to manage and delete items from this location.

Click images above to enlarge

Recipe Box

The Recipe Box has three sub-features, each are described separately below:

Search the Recipe Box

Similar to when users can search for ingredients using the I Want... page, users are able to search the application for new recipes. Once results are returned, users can then view individual recipes and add them to their favorites.

Click images above to enlarge


The Favorites button brings users to a list of their favorite recipes on Bake & Barter.

Click images above to enlarge

Upload a Recipe

When a user uploads a recipe, it is automatically saved under their favorite recipes. In this example, the user has typed in the recipe for a fruit smoothie and uploaded a picture. After hitting submit, the user is brought to their favorite recipes, and the fruit smoothie recipe is now visible. Currently, the fruit smoothie recipe is the default that has been implemented to demonstrate this functionality.

Click images above to enlarge


The messaging function is used to coordinate the exchange of supplies and ingredients. This feature was based largely on the text messaging feature of iOS devices.

Click images above to enlarge


The Help menu is intended to answer questions that users may have while they learn to use the application. These questions were designed based on the feedback that we had received during our prototype testing and heuristic reviews. Additionally, contact information is included for users who wish to learn more.

Click images above to enlarge