Fun+Cooker+Design

Matt Orlove @Chris Carmel Jen Gorski

__**Steps 1 & 2**__ **- Low-Level Development and Evaluation**

__Prototype A__

Each page in my prototype has a Fun Cooker! banner and log in interface across the top, and the top navigation buttons just below featuring Hot Recipes, Themed Recipes, Search, Tips & Tricks, Favorite Recipes. The Hot Recipes page doubles as the home page, Themed Recipes would be the section for themed recipes (surprise!), the Search page features the ability to search the site recipes by various restricting factors, Tip & Tricks section is for help figuring out cooking methods for new chefs, and Favorite Recipes is for a logged in user to quickly go to their loved dishes.

Home Page / Hot Recipes - [|Sketch] | [|Balsamiq] The hot recipes page is the home page and the first the user reaches when they arrive at the website, whether or not they've properly signed in yet. This sketch shown is made as an after signed in status, which is why the upper corner link takes one to their profile. Before signing in, there would be a username and password interface for logging in. Throughout the life of the website, users would upload their recipes and vote on others. The top results of the recipe rankings would show up in their own small blurbs featuring an image of the final dish, name, rating, style, time involved, recommended audience, and their associated tags. This is to make a quick and clear show of the best recipes, and as well these top dishes will scroll down one recipe per x seconds so that a number of top recipes can rotate through.

Search Page - [|Sketch] The recipe search page I designed was focused on customized searching. It features the ability to include and exclude ingredients, each separated by semicolons so as to not restrict the user to only so many. It also features a dietary restriction sections where a user can specify how many calories are desired and any other specific dieting lifestyles and allergies. Finally, if one so desired, a user may choose to specify the style of dish they are interested in cooking him or herself.

Search Results - [|Sketch] The recipe search results page is of course where a user is taken after searching the website with their specific needs. It can be visually organized in three different manners similar to that of iTunes album organization. The user can either see the results as a block list of recipes, very much akin to the Hot Recipes display, as a grid of images featuring the dishes and their title just below, or as a slideshow with more information about each recipe that can be scrolled left or right. Once the desired layout is chosen by the searching user, the website will remember this selection and maintain for the duration of the user's logged in visit.

Recipe Page - [|Sketch]| [|Balsamiq] The Recipe Page starts with an image of the completed dish that links to a gallery that users would be able to upload their photos of the dish to as well, giving plenty of example outcomes. To the right of this image shows the title of the dish, the community's rating, it's style and recommended audience, as well as the cookware necessary and the tag cloud for the searching function which would each link to a results page with dishes tagged similarly. Below this is the ingredients section, with a link to possible substitutions for whatever dietary restrictions a user may have, followed by the recipes procedure. Finally, at the bottom of the recipe page is a section for commenting from the community. Users can give their opinions of the dish and any changes they made in addition to their personal rating of the recipe.

Tips & Tricks Index - [|Sketch] The Tips & Tricks Index page is much like the Hot Recipes page but for articles meant to help beginning cooks around their kitchen rather than recipes. Below the navigation buttons there is a search box for only these help articles. Each result would link to its own Tip or Trick page that featured an article with an informative analysis of and clear instructions for any particular cooking method. The boxes show a picture associated with the article, a brief overview of it's subject, and a difficulty rating. In the end we decided that this would be too much for beginning cooks and that any specific tip or trick associated with a particular recipe would be make clear on that recipe page.

Tip/Trick Page - [|Sketch] Each tip and trick would have their own page with a title, difficulty rating, optional video tutorial if the uploader should so choose to make one, the required tools and a easy to follow walkthrough. As mentioned in the section above, we decided that any information on particular cooking methods would be made clear on the recipe webpage featuring such methods, and as such the tips and tricks section would be redundant.

Profile - [|Sketch] | [|Balsamiq] The user profile would be reachable from any page on the site by simply clicking the static link to "my profile" in the upper right corner. A user can customize their profile by choosing an avatar; entering their real name, age, and location; and favorite dishes. They can also write about themselves in the "about me" section. Below this is a small list of their kitchen supplies, a section for their uploaded recipes (initially only their highest rated ones, a visiting user would click the "more" link to see the rest) and a section for their favorited recipes by other users (with its own "more" link for the rest of them not rated so high).

__Prototype B__ Home Page - [|Sketch 1] |[| Sketch 2] | [|Balsamiq] My first design was based on the task of searching for recipes based on tags, with a search tool taking up most of the page. Below this I had an area for cooking help sites and a couple of sample recipes. However, I realized that I left out one of the most important tasks, allowing the user to login and become a user. So, for my other sketches, I divided the main area into an area where the user can either login, search, or browse recipes. I also got rid of the helpful sites at the bottom so the focus is on our page, not other sites. My other group members liked the overall simplicity and directness of my layout, including the main header bar at the top of each page. The main concern with my design is that it allows anyone to use the site, and not just registered users. We debated a lot about whether our site should be open or not, but decided it would be best to only allow members to view recipes. This emphases the community aspect and encourages users to participate in uploading recipes and commenting on them.

Recipes Page - [|Sketch] My recipes list and search results page is similar to the designs of my group members. The main area is a list of recipes, where each recipe has an image, its popularity, the time it takes to prepare it, its difficulty, and a short description. Along with this, my design had a list of the tags or keywords that the user used as search criteria and that each recipe includes. Each tag can be deselected, expanding the results, and there is an area where the user can enter additional keywords to the search criteria. This design was well received and our home page features many of the same features. In addition to showing recipes, we also decided to include notifications on the home page to alert the user when recipes have been uploaded or commented on.

Individual Recipe Page - [|Sketch] | [|Balsamiq] Both of my layouts follow the conventional designs of a recipe page, an image, a section for instructions, and a section for ingredients. Besides this, I included a section for supplies which would feature cooking supplies not included in the ingredients section, such as a stove or measuring cups. My original design featured the ingredients and supplies on the left, alongside the instructions. I decided this was not a good design because you would want to know what you needed before going into the instructions. For my second design, I placed the ingredients, supplies, and tags below the important, quick facts of the recipe. This design complemented my design for the home page because of the three boxes. For the most part, we all had similar designs and followed them for our final design. At first, we were going to use the three boxes in our design, however, we were nervous about one block being much longer then the others and not looking how we wanted. For this reason, we moved the tags to the information at the top, giving the ingredients section space for multiple columns.

User Page - [|Sketch] | [|Balsamiq] For the most part, the designs my group created for the user page are all very similar. We have an image of the user, some information about them (username, name, University, and favorite foods), and a “My Recipes” and “Favorite Recipes” section. “My Recipes” features all the recipes the user has uploaded, and “Favorite Recipes” are those the user has rated highly. In the design of these sections, I did not include any description of the recipe, only the image and name. We decided to keep this dependence on images and the simplistic design for our final user page. The main difference we implemented was the removal of the “Favorite Recipes” section since the user will most likely add these to their “Recipe Books” and not need them on their user page. We also added sections that features users who the user is following and those that are following the user. Putting these elements on the user page adds emphasis to the social aspect of the site by making other users easily accessible.

__Prototype C__ Home Page - [|Sketch] | [|Balsamiq] My home page was designed with a huge focus on the following aspect of our site. Half of the page was going to be your notifications regarding recipe adds and comments and ratings and basically you're every interaction with the site. Clearly this is a terrible implementation - why should half of the main screen of our site be this feed that could potentially remain static for long periods of time. When I presented this implementation to my group they like the idea of having notifications, but as a drop down menu rather than an entire column on the home page. However, this idea did inspire our eventual finalized home page in that it will be a timeline that will continually update (similar to Twitter) based on what you're following (people or tags) as well as tell you when somebody comments on your recipe, or adds it to their recipe book, etc. Essentially all notifications will be streamlined into your timeline which will be the central place you'll head for updates.

Recipe Page - [|Sketch] | [|Balsamiq] My recipe page ended up being very similar to our final version, although this could probably be said for each of our recipe page prototypes. Everyone liked my side box that had links to print the recipe, make it full-screen, add it to your recipe book, and share it in many different ways. They also liked the header for the recipe - which included the recipe title, overall rating, uploader information (user & date), as well as the ability to ask the uploader a question. My comment section was a little too unfriendly in regards to space usage - we eventually settled on a design where the user information took up much less space and allowed the actual comment text to take focus, which is exactly what should be emphasized.

User Page - [|Sketch] | [|Balsamiq] Each of our user pages were also very similar, most likely because we had already briefly discussed the general information we wanted to be displayed. Mine was a very simple design that certainly had all the info anybody could want about a user but the general consensus was that it was repetitive, boring, and generally unattractive. There is no specific information that takes focus - uploaded recipes, favorited recipes, things you're following, and followers were all presented the exact same way. Our final design emphasizes uploaded recipes and completely removes the ability to see recipes which were added to the user's recipe book - which we think should give users some privacy, while focusing on what we determined to be the most important aspect of the user page - the user's uploaded recipes.

__**Step 3**__ **- Reevaluate & Make Decisions**

The similarities between some of our page designs (most notably the user page and recipe page) was a clear sign that what we were doing was going to be intuitively on point. For our home page, as well as our basic layout, we made many compromises and discussed which features should be highlighted. We took parts from each of our designs, as well as completely altering many aspects of what we wanted our website to initially be (we changed our focus from an open, personalized school based recipe website to one that requires an account and is more focused around following specific foods and people - similar to a Twitter type system) in order to decide on our final design.

We spent the longest amount of time deciding what the layout of the website as a whole should be - the header, footer, and title bar that are each found on every page. We determined what links we thought were most important and should be easily accessible no matter where you are on the website. Our final result is something we are all very happy with and we think our users will feel the same way.


 * __Step 4__ - Refined Design**

Transition Diagram - [|Balsamiq]

__Login Page__ - [|Balsamiq] One of the main decisions we had to make was whether guests could use the website to interact and view recipes. We did not want to limit the site, however, allowing guests to view recipes does not give people incentive to join. Since the site depends on users uploading recipes, we decided it is necessary for people to become users before using Fun Cooker. Therefore, we had to design a login page that was interesting and inviting enough to gain users, without giving guests access. We achieved this by featuring images of the top recipes at the top of the page that automatically change. We also made signing up as quick and easy as possible, a potential user only needs to enter their desired username, password, and the city they live in. To focus attention on the returning users, the login information is shown when first visiting the page. When the “Sign Up” button is pressed, the input fields for login disappear and the fields needed to sign up appear. This separates the two tasks elegantly without forcing the user to visit multiple pages.

__Home Page__ - [|Sketch] | [|Balsamiq] The home page is the first page that user will be brought to upon logging into their account. It has the traditional banner and profile link at the top, and navigational buttons just below this to common site destinations. In the top right corner below the navigation bar is links to take the user to a random recipe from either the site's entirety or just from the recipes in their recipe book. The real feature of the home page, however, is the latest updates that the user is "following." This feed is populated with recipes associated with the user's tags and people of interest. In addition to this, this is where the user will get notifications based on other users' activities involving their recipes such as comments received and new followers. Along the right side of the page is an index of tags and users being followed, with check boxes to designate what should be shown in the feed (initially all are checked) with links below each section to allow for checking all or none and text boxes with the ability to add tags and users to follow.

__Recipe Book Page__ - [|Sketch]| [|Balsamiq] This is the page that will be used most often. The main focus of this page is the user’s uploaded recipes and recipes they have added from other users. To aid the user, we added controls at the bottom to view more recipes without having to leave the current page. Below this section is a row of suggested recipes. We want to include this feature because the suggestions will be based on recipes in the user’s recipe book and will be useful to people learning to cook. In addition to these main functions, we added viewing options to present the recipes in whichever way the user finds most helpful.

__Recipe Page__ - [|Sketch] | [|Balsamiq] Our recipe page took aspects from all of our prototypes. We each had the same basic idea but with a few layout changes. The top half was taken and slightly updated from Prototype C, while the comment section and ability to sort comments by the user's rating for the recipe or date added (which is the default) was taken/updated from Prototype B. All three of our ideas were very similar so this conceptually wasn't too much of a departure from our initial thoughts.

__User Page__ - [|Sketch] | [|Balsamiq] The user page (or profile) is where the user describes him or herself. It displays the user's avatar and username, along with their region and an "about me" blurb where they can share information about themselves and their cooking ability/style (should they so choose). More prominently featured below this is a grid view of the user's recently or highest rated uploaded recipes, as well as a link to a more complete index. Below this are sections featuring users they are following, each linking to that user's personal profile, and a section showing who is following them, again linking to that user's personal profile.

__Upload Page 1__ - [|Balsamiq] The upload page went through many revisions before we finally came up with a design we all liked. Our goals for updating were to 1) make uploading as simple as possible to encourage submissions and 2) somehow have a system where tags could be automatically generated rather than the user having to add them themselves. This was important because, since our entire system is based on following specific tags, it would be extremely important to make sure the tags for each recipe were as accurate as possible and would be consistent throughout the entire website. This first upload page will generate tags based on the general meal for the recipe, what the recipe's dish is, and what the primary ingredients of the recipe are. For example - if a turkey sandwich were being uploaded, tags would be generated for #lunch, #sandwich, #turkey, #bread, etc.

__Upload Page 2__ - [|Balsamiq] Once the continue button is pressed on Upload Page 1, the user will be taken to this page. The layout is very similar to the actual recipe page - we thought this would make it very simple for the user to find their way around. Once they become familiar with the recipe page layout, this page will be very easy to navigate. Everything else is pretty self explanatory: the ingredients section will be automatically filled with the primary ingredients from the previous page (with room too add more), there is the option to upload images for each step (but certainly not necessary), and the "Total Time" number will be automatically generated based upon how long the prep and cook times you enter are.

__Region Page__ - [|Balsamiq] The Region Page establishes a community for the user based on their location. This includes other users that live in this area as well as local favorites. We decided to have this page because the recipes on the home page and those suggested are based on foods the user already knows and likes. The local favorites gives more variety because it lists any of the top recipes that a user in this community may have uploaded. Originally, we planned on including a University page which would have the same features. However, college students are not the only people that could benefit from our site. By creating a Region page, we keep the community aspect of a University page without limiting the potential users.

__Settings Page__ - [|Sketch] | [|Balsamiq] The settings page is for a user to edit any particular setting regarding their account. It links to edit sections for their profile settings (to edit their information), following settings (to edit users and tags they may be following), privacy settings (to edit settings regarding their personal information as well as blocking users they may not wish to interact with), and special search options (where the user would set constant search options, such as food allergies, that would persist when searching for recipes rather than specifying with each query).