Presentation is loading. Please wait.

Presentation is loading. Please wait.

Sweet & Savory LISA MITCHELL USER-CENTERED INFORMATION DESIGN DR. NATALIE HRUSKA 6 AUGUST 2014.

Similar presentations


Presentation on theme: "Sweet & Savory LISA MITCHELL USER-CENTERED INFORMATION DESIGN DR. NATALIE HRUSKA 6 AUGUST 2014."— Presentation transcript:

1 Sweet & Savory LISA MITCHELL USER-CENTERED INFORMATION DESIGN DR. NATALIE HRUSKA 6 AUGUST 2014

2 Table of Contents Stakeholder3 User Demographics5 Needs Assessment6 Personas7 User Scenario 10 Functional/Content Specs11 Features Tables 13 Content Tables21 Architectural Map25 Wire Frames26 Style Guide28 Prototypes30 References33 Contact Information34 2

3 Stakeholder Anne Hartnett, a mother of five children from Dallas, Texas, always has her hands full when it comes to feeding her family. Each child seems to eat a little differently than the other, and it gets a bit difficult to keep the meal ideas fresh and new. She has a lot of family recipes, and makes use of a few cooking websites, but it is hard to keep up with what ingredients can replace other ingredients and she does not always have the time to sit and figure out how to cut a recipe for the serving size needed. As a mother who strives to keep her family healthy, Anne also looks for nutritional facts for each meal her family partakes. More and more websites have the nutrition facts available, however, the nutrition facts is a limited feature in most cooking sites. Anne and a couple of other moms have gotten together to create what they consider to be the perfect recipe website. They all have put in ideas to make the website easy to use for anyone with or without great knowledge of computers. These moms also realized that children are learning to cook at an early age nowadays and they too want their children to be comfortable in the kitchen, keep up their healthy eating habits, and explore other foods as well. The most important concern is that anyone, any age, with any computer experience can easily use the website anywhere at any time. 3

4 Meeting the Objectives: 4 Sweetandsavory.com is a special recipe site that desires to cater to all who cook or want to cook. The stakeholder requires that this site be user-friendly, while still providing as many options and variety as possible to each user. By implementing the many dropdown boxes for various options, and using two search features, this site will allow users not only to narrow their search, but also to widen their search and knowledge of food. There are several different types of cuisine to search by, as well as the ability to use keywords in a different search bar that is located right next to the “Search by Ingredients” box. Once a user joins the site and signs in, they will have a save feature to keep track of all their favorite recipes. If a user decides not to join, there are still options to make sharing and printing recipes just as easy as saving them. By bringing so many options to the site for users to easily find the recipe they need, the stakeholder and user objectives have been met, with room for constant improvement. Any user can also contact the administrator by with suggestions and concerns.

5 User Demographics Age: No age specifications. This website would be targeted at anyone who cooks, bakes, and loves food. Children are learning to become great chefs at a very young age, the older generations have years of experience, however, still need some help from time to time in deciding the best recipe for certain ingredients. Gender: Not gender specific. Anyone, both male and female can use a cooking/recipe site. Education: The most education needed is to be able to read. No other education is specifically needed for the use for this site. Computer Experience: Targeting both experienced and inexperienced computer users. Anyone will easily be able to use and navigate through the website, use the “search by ingredients” bar, and review each recipe they try. The site will be clean and simple. Previous Knowledge: None needed. Functionality: No add-ons or other software needed for the use of this site. It can be accessed on any computer, smartphone or tablet. 5

6 Needs Assessment The potential users of this particular website is limitless. There is not just one targeted group. This site would be for anyone of any age who can and wants to cook. However, the leading targets are busy mothers, bachelors, single fathers, and college students. The website should be available on any type of computer such as, smartphones, tablets, laptops, and desktop computers. No extra software needed for the use of the site. Options will be available to the users, such as printing and saving favorite recipes, writing recipe reviews and sharing their own recipes on the site. Correspondingly, sharing recipes from sites to can be difficult for beginner’s on computers, this site will strive to make sharing users’ favorite recipes a cinch for even the most novice of computer operators. 6

7 Personas 7

8 8

9 9

10 User Scenario I came home late one evening to a hungry group of grandkids and had not had the chance to go shopping that week. Looking in the pantry I had just a few ingredients, chicken, egg noodles and some canned vegetables. I logged on to my computer and typed in the ingredients and found this great website called sweetandsavory.com. The home page was very clean and the site itself was extremely easy to use. It offered a variety of options at the click of the mouse button, such as serving size, dietary substitutions, and a search by ingredient box. I entered my ingredients, amount of people I was cooking for and clicked search. I have never seen so many meal choice before. They all had photos of the completed meal, user reviews that were very helpful, and the nutritional facts of each recipe I clicked on. There are a lot of good cooking sites on the internet today, but they seem to lack one or two features that I now know I need. With sweetandsavory.com I have everything I could ask for at my fingertips. I was surprised by all the options and recipe varieties that this website had to offer. I will definitely be using this site again in the very near future! -Florence 10

11 Functional/Content Specifications The homepage to sweetandsavory.com will consist of many user-friendly interactive features starting with the heading. The basic color scheme will be comprised of a mix of warm and cool colors, such as: blues, greens and yellow with a white background. The site’s logo will serve not only as the company’s symbol but also has the homepage link. Where ever the user is on the site, the logo will be clickable to return them to the homepage, and will be placed in the upper left-hand corner of each page in the site. Contact information will be listed opposite the website logo in the upper right hand corner. It will list an address and company information and will also be clickable for those users who may use Outlook for their usage. This will be used for any suggestions, complaints, and/or notifications about unusable links. The navigation bar will be positioned as a side bar, listing different categories. For example, American, Chinese, Italian, etc. If a user is not looking for any certain ingredient, this will be a better organized way to search for a specific type of cuisine. A log-in feature will also be available to users. It will be centered on the page underneath the contact information and logo. Once the user logs in, there will be a “favorites” or a “save” feature for any recipes they my like to keep conveniently available, as well as an option to share their own recipes. Other options available to all users will be printing recipes, writing user reviews for recipes tried, and creating a user profile. A constant scrolling slideshow of random meal suggestions will be placed beneath the log-in feature, and will continuously offer up different recipes. The “search by ingredients” box will be placed in the main body section of the webpage underneath the slideshow. 11

12 Along with the search box, there will be a variety of options available for the user to narrow the recipe search, using scroll boxes. For instance, a scroll box for serving size, dietary needs, and food allergens. The footer will consist of site navigational links, another contact us link, any copyright information, and links to other popular cooking websites. Language options will be available in the footer as well, for any users who might not speak or read English. Category Pages will be located within the navigation bar located on the left side of each page. If the user is looking for a particular type of recipe such as, American, Italian, or Chinese, it can be found within these links. There will be a search box, as well as an assortment of scroll boxes that allow the user to adjust recipe size, substitute ingredients, and enter food allergens to narrow the search. To keep the site uniform and user- friendly, the features will remain the same throughout the site. Each cuisine category will have its own recipe slideshow, showcasing that specific type of food. All scroll boxes, search boxes, and other elements will remain constant to keep the clutter and confusion down to a minimum. Desserts will be listed by cuisine type, and also be located within it’s particular type as well. The main dessert page will allow the user to enter ingredients as well as the food allergens, serving proportions, and substitutions. This page will have a white background with a blue checkered border to resemble a picnic tablecloth. Instead of a slideshow, this page will have “How to” videos linked from YouTube or other video sites for making things such as, frostings, decorating cakes, and working with fondant. 12

13 Features Table-Home Page How will the feature be implemented What concerns do we have about this feature Content Logo Placed in the upper left hand corner of each page within the site. The logo will serve as an anchor to the home page. The user will be able to click the logo, anywhere within the website, to return to homepage. NoneHTML/CSS Contact Us (Link) Placed in the upper right hand corner of all pages throughout the site. Users can use this link to send an to the site administrator for suggestions, complaints, and notifications of bad or unusable links/photos. The one concern would be too much traffic with suggestions about the site. HTML/CSS Navigation Sidebar Placed on the left side of each page within the website for easy navigation throughout the site. This feature will offer categorized recipe by cuisine type. (E.g. American, Italian, Mexican, Greek, Chinese, etc. NoneHTML/CSS/Hyperlinks 13

14 How will the feature be implemented What concerns do we have about this feature Content Sign-in/Join This feature will be put in place for users to become part of the Sweet and Savory family. This will allow users to sign-in to their home page of Sweet and Savoy and share recipes or write reviews. NoneHTML/CSS/Hyperlinks Social Sharing Links to Facebook, Twitter and s will be placed alongside the print feature at the bottom of each recipe to enable easy-share recipes. None HTML/CSS/Java Script/Hyper links Print Feature This feature will be placed at the bottom of each recipe for any user, whether they join the site or not, to print off the recipes they need. There will be further print options such as font size, whether to print the photo or not, as well as whole page or recipe card size. NoneHTML/CSS/Java Script/Hyper links 14

15 How will the feature be implemented What concerns do we have about this feature Content Recipe Slideshow This feature will allow users to click on which ever photo is currently on display to get to the recipe for that photo. The slideshow will be set at a minimum speed to allow for easy viewing/clicking. None Jpeg, jpg, BMP, GIF. HTML/CSS/Flash Search By Ingredient Box This feature is most important for this particular site. The “search by ingredient” feature will allow the user to input the ingredients he/she has and find a recipe that fits those ingredients. The database will have to be quite large, and maintained/updated very often. Database/Tailored search/Error page/ Spell check feature/Results page Food Allergens scroll box This feature along with the Dietary needs feature will both the implemented in all recipe searches. This will allow the users to fit each recipe to their own special needs. The database will have to be quite large, and maintained/updated very often to be kept current, and to add new allergens as users make reviews and substitution suggestions. Database/Tailored search/Spell check HTML/CSS Page Counter This feature will be implemented for easier exploration. There will be a page counter at the bottom of each page so that the user can continue their searching by page. It will be made up of clickable hyperlinks. None HTML/Hyperlinks/CSS 15

16 How will the feature be implemented What concerns do we have about this feature Content Dietary Needs Scroll Box This feature along with the Food Allergens feature will both the implemented in all recipe searches. This will allow each user to fit the recipes to their own special needs. There is a large variety of dietary needs, so the information will need to be very accurate for each way of eating. (E.g. Vegan, Vegetarian, Lactose Intolerant, etc.) Database/Tailored search/ Spell check HTML/CSS Language Options This option will be placed in the footer at the bottom of the page. This will allow users of any nationality to use and understand the website. NoneJavaScript/HTML/CSS Videos This feature is in place on the dessert pages for instructional assistance in making homemade desserts, fillings, frostings, and more. This will need to be kept up to date so that users do not run into the problem of an out-of- date video or broken links. Flash/MPEG-4 16

17 How will the feature be implemented What concerns do we have about this feature Content Favorites/Save Box This feature will be put in place for users that become a part of the Any Ingredients community by creating a username and password and creating a profile. Users will also be able to maintain the saved or favorites box. None HTML/CSS/Java Script/Hyper links Social Sharing Links to Facebook, Twitter and s will be placed alongside the print feature at the bottom of each recipe to enable easy-share recipes. None HTML/CSS/Java Script/Hyper links Print Feature This feature will be placed at the bottom of each recipe for any user, whether they join the site or not, to print off the recipes they need. There will be further print options such as font size, whether to print the photo or not, as well as whole page or recipe card size. None HTML/CSS/Java Script/Hyper links Features Table – Inner Page 1 17

18 How will the feature be implemented What concerns do we have about this feature Content Navigation Sidebar Placed on the left side of each page within the website for easy navigation throughout the site. This feature will offer categorized recipe by cuisine type. (E.g. American, Italian, Mexican, Greek, Chinese, etc.) NoneHTML/CSS/Hyperlinks Search By Ingredient Box This feature is most important for this particular site. The “search by ingredient” feature will allow the user to input the ingredients he/she has and find a recipe that fits those ingredients. The database will have to be quite large, and maintained/updated very often. Database/Tailored search/Error page/ Spell check feature/Results page Search By Keyword box This feature will be placed next to the search by ingredient box. This allows the users to search by key words, such as “Grilled,” “Baked,” “Fish,” “Stews,” etc. Some users might confuse this feature with the search by ingredient feature. Database/Tailored search/Error page/ Spell check feature/Results page Page Counter This feature will be implemented for easier exploration. There will be a page counter at the bottom of each page so that the user can continue their searching by page. It will be made up of clickable hyperlinks. None HTML/Hyperlinks/CSS 18

19 Features Table – Inner Page 2 How will the feature be implemented What concerns do we have about this feature Content Favorites/Save Box This feature will be put in place for users that become a part of the Any Ingredients community by creating a username and password and creating a profile. Users will also be able to maintain the saved or favorites box. None HTML/CSS/Java Script/Hyper links Social Sharing Links to Facebook, Twitter and s will be placed alongside the print feature at the bottom of each recipe to enable easy-share recipes. None HTML/CSS/Java Script/Hyper links Page Counter This feature will be implemented for easier exploration. There will be a page counter at the bottom of each page so that the user can continue their searching by page. It will be made up of clickable hyperlinks. None HTML/Hyperlinks/CSS 19

20 How will the feature be implemented What concerns do we have about this feature Content Navigation Sidebar Placed on the left side of each page within the website for easy navigation throughout the site. This feature will offer categorized recipe by cuisine type. (E.g. American, Italian, Mexican, Greek, Chinese, etc.) NoneHTML/CSS/Hyperlinks Search By Ingredient Box This feature is most important for this particular site. The “search by ingredient” feature will allow the user to input the ingredients he/she has and find a recipe that fits those ingredients. The database will have to be quite large, and maintained/updated very often. Database/Tailored search/Error page/ Spell check feature/Results page Search By Keyword box This feature will be placed next to the search by ingredient box. This allows the users to search by key words, such as “Grilled,” “Baked,” “Fish,” “Stews,” etc. Some users might confuse this feature with the search by ingredient feature. Database/Tailored search/Error page/ Spell check feature/Results page 20

21 Content Table – Home Page Asset FormatDescriptionAssociated Media/Assets Logo PNG Blue and Green clickable logo which serves as an anchor to the homepage of the site. Animated Logo Navigation Bar HTML/CSSUser-friendly Navigational links Hyperlinks Slideshow Flash/CSSA random recipe slideshow placed on the homepage of the site. JavaScript/HTML/CSS Recipes TextRecipes for thousands of different meals, desserts, and appetizers HTML/CSS 21

22 Asset FormatDescriptionAssociated Media/Assets Search By Ingredient Box HTML/CSS/JavaScriptType in any ingredient to find a recipe match. Application/open search description Search By Keyword Box HTML/CSS/JavaScriptType in a key word, such as Bakes, Fish, Spicy, or low fat and find hundreds of matches. Application/open search description Videos Flash/MPEG-4How To videos Flash, MPEG-4, Quicktime Dropdown Boxes HTML/CSS/JavaScriptThese are in place to help narrow the users’ search. They have the options of using substitutions, entering food allergens, adjusting serving size and measurement conversion. Application Social Sharing Buttons HTML/CSS/Java Script/Hyper links Four clickable buttons towards the bottom of the page that allow the user to share the site and or recipe with another person via , Facebook, Pintrest, and Twitter. HTML/CSS/Hyperlinks 22

23 Content Table-Inner Page 1 Asset FormatDescriptionAssociated Media/Assets Logo PNG Green clickable logo which serves as an anchor to the homepage of the site. Animated Logo Images JPEG, JPG, GIF, BMPPhotos of each completed recipe will be provided at the top of each recipe. Images/CSS/HTML Navigation Bar HTML/CSSUser-friendly Navigational links Hyperlinks Page Counter Flash/CSSA random recipe slideshow placed on the homepage of the site. JavaScript/HTML/CSS Recipes TextType in any ingredient to find a recipe match. Application/open search description Search By Ingredient Box HTML/CSS/JavaScriptType in any ingredient to find a recipe match. Application/open search description Search By Keyword Box HTML/CSS/JavaScriptType in a key word, such as Bakes, Fish, Spicy, or low fat and find hundreds of matches. Application/open search description 23

24 Content Table – Inner Page 2 Asset FormatDescriptionAssociated Media/Assets Logo PNG Green clickable logo which serves as an anchor to the homepage of the site. Animated Logo Images JPEG, JPG, GIF, BMPPhotos of each completed recipe will be provided at the top of each recipe. Images/CSS/HTML Navigation Bar HTML/CSSUser-friendly Navigational links Hyperlinks Page Counter Flash/CSSA random recipe slideshow placed on the homepage of the site. JavaScript/HTML/CSS Recipes TextType in any ingredient to find a recipe match. Application/open search description Search By Ingredient Box HTML/CSS/JavaScriptType in any ingredient to find a recipe match. Application/open search description Search By Keyword Box HTML/CSS/JavaScriptType in a key word, such as Bakes, Fish, Spicy, or low fat and find hundreds of matches. Application/open search description 24

25 Architectural Map 25

26 Wire Frames – Home Page 26

27 Wire Frames – Inner Pages 27

28 Style Guide 28

29 29

30 Prototypes 30 Home Page

31 31 Prototypes Inner page- Italian Cuisine

32 32 Prototypes Inner Page- Desserts

33 References "allrecipes.com." n.d. allrecipes.com. WEB. 1 August "clker.com Free Clipart." n.d. clker.com. WEB. 1 August "Ctrl + A studio d'Architettura." n.d. ctrla.it. WEB. 1 August "http://zsazsabellagio.blogspot.com/2012_01_01_archive.html." 1 Jan zsazsabellagio.blogspot.com. WEB. 3 August "https://www.flickr.com/photos/foodishfetish/ /in/photostream/." 31 Dec flickr.com. WEB. 4 August "Miri Leigh." n.d. mirileigh.com. WEB. 1 August "Wikimedia Commons." n.d. commons.wikimedia.org. WEB. 4 August "You Tube." n.d. youtube.com. WEB. 31 July

34 Contact Information Lisa Mitchell 825 Manderson Plaza Omaha, Nebraska, Office:


Download ppt "Sweet & Savory LISA MITCHELL USER-CENTERED INFORMATION DESIGN DR. NATALIE HRUSKA 6 AUGUST 2014."

Similar presentations


Ads by Google