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

Sweet & SavoryLISA MITCHELL

USER-CENTERED INFORMATION DESIGN

DR. NATALIE HRUSKA

6 AUGUST 2014

2

Table of Contents

Stakeholder 3

User Demographics 5

Needs Assessment 6

Personas 7

User Scenario 10

Functional/Content Specs 11

Features Tables 13

Content Tables 21

Architectural Map 25

Wire Frames 26

Style Guide 28

Prototypes 30

References 33

Contact Information 34

3

StakeholderAnne 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.

4

Meeting the Objectives: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 email 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.

6

Needs AssessmentThe 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 email 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.

7

Personas

10

User ScenarioI 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

11

Functional/Content SpecificationsThe 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 email address and company information and will also be clickable for those users who may use Outlook for their email 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.

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.

13

Features Table-Home PageHow 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.

None HTML/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 email to the site administrator for suggestions, complaints, and notifications of bad or unusable links/photos.

The one concern would be too much email 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.

None HTML/CSS/Hyperlinks

14

How will the feature be implemented


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.


Social Sharing Links to Facebook, Twitter and emails 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.


15



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 checkHTML/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

16



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 checkHTML/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.

None JavaScript/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

17



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.




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.


Features Table – Inner Page 1

18



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.)






Search By Keywordbox

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.




19

Features Table – Inner Page 2How will the feature be implemented


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.






20



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.)






Search By Keywordbox

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.


21

Content Table – Home PageAsset Format Description Associated

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/CSS User-friendly Navigational links Hyperlinks

Slideshow Flash/CSS A random recipe slideshow placed on the homepage of the site.

JavaScript/HTML/CSS

Recipes Text Recipes for thousands of different meals, desserts, and appetizers

HTML/CSS

22

Asset Format Description Associated Media/Assets

Search By IngredientBox

HTML/CSS/JavaScript Type in any ingredient to find a recipe match.

Application/open search description

Search By KeywordBox

HTML/CSS/JavaScript Type in a key word, such as Bakes, Fish, Spicy, or low fat and find hundreds of matches.


Videos Flash/MPEG-4 How To videos Flash, MPEG-4, Quicktime

Dropdown Boxes HTML/CSS/JavaScript These 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 email, Facebook, Pintrest, and Twitter.

HTML/CSS/Hyperlinks

23

Content Table-Inner Page 1Asset Format Description Associated

Media/Assets

Logo PNG Green clickable logo which serves as an anchor to the homepage of the site.

Animated Logo

Images JPEG, JPG, GIF, BMP Photos of each completed recipe will be provided at the top of each recipe.

Images/CSS/HTML


Page Counter Flash/CSS A random recipe slideshow placed on the homepage of the site.

JavaScript/HTML/CSS

Recipes Text Type in any ingredient to find a recipe match.








24

Content Table – Inner Page 2Asset Format Description Associated

Media/Assets

Logo PNG Green clickable logo which serves as an anchor to the homepage of the site.

Animated Logo

Images JPEG, JPG, GIF, BMP Photos of each completed recipe will be provided at the top of each recipe.

Images/CSS/HTML


Page Counter Flash/CSS A random recipe slideshow placed on the homepage of the site.

JavaScript/HTML/CSS

Recipes Text Type in any ingredient to find a recipe match.








25

Architectural Map

26

Wire Frames – Home Page

27

Wire Frames – Inner Pages

28

Style Guide

30

Prototypes Home Page

31

Prototypes

Inner page-Italian Cuisine

32

Prototypes

Inner Page-Desserts

33

References

"allrecipes.com." n.d. allrecipes.com. WEB. 1 August 2014.

"clker.com Free Clipart." n.d. clker.com. WEB. 1 August 2014.

"Ctrl + A studio d'Architettura." n.d. ctrla.it. WEB. 1 August 2014.

"http://zsazsabellagio.blogspot.com/2012_01_01_archive.html." 1 Jan. 2012. zsazsabellagio.blogspot.com. WEB. 3 August 2014.

"https://www.flickr.com/photos/foodishfetish/8452922888/in/photostream/." 31 Dec. 2012. flickr.com. WEB. 4 August 2014.

"Miri Leigh." n.d. mirileigh.com. WEB. 1 August 2014.

"Wikimedia Commons." n.d. commons.wikimedia.org. WEB. 4 August 2014.

"You Tube." n.d. youtube.com. WEB. 31 July 2014.

34

Contact Information

Lisa Mitchell

825 Manderson Plaza

Omaha, Nebraska, 68164

402-587-9655

Email: [email protected]

Office: 402-787-8832

mailto:[email protected]

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

Documents

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