my sweet chef book

Page 1

1

my baking recipes - presented my way! iPad application prototype

Final Thesis Project Written Summary by: Sherry Benharush #02011828 415-470-0067 sherrybenharush@gmail.com Academy of Art University, Graduate School of Web Design & New Media Presented on: December 4, 2012 at 11:00am


2

3

Table of Content Introduction

Visual research: moodboards

50

Abstract

6

Final design

55

Statement of interest

7

Application identity development

56

Executive summary

8

Final logo + icons

65

Screen layout exploration: recipe page

66

Research Competitive analysis

12

Usability Testing

The majors players

13

Testing overview

76

Competitive matrix

16

1st user test

78

Target audience

18

2nd user test

80

User interviews

20

3rd user test

82

Goals following research

22

4th user test

84

5th user test

86

6th user test

88

Design Objectives Application main features

26

Recipe section compression

28

My Sweet Chef observations

30

Information architecture

32

Project Development Wireframes: paper prototypes

38

Wireframes: keynote prototype

42

Wireframes: HTML & CSS prototype

44

Wireframes: Axure prototype

46

Wireframes: photoshop prototype

48

Resume 92 Autobiography 93 Bibliography 96 Credits 98


4

5

Abstract Statement of Interest Executive Summary

INTRODUCTION


6

7

Abstract

Statement of Interest

• Baking is one of my hobbies, and I bake every week. I keep a baking recipes book that includes

We all know there are many recipes applications out there, and here I am presenting to you My Sweet Chef

recipes I have written over the years and some I have gathered from magazines, web sites, and

,which is also a recipes application. Wonder why? Let me explain. My Sweet Chef is not just another recipes

applications. The idea of baking with having a customizable documented recipes book lead me to

application, it’s different. It offers a unique experience to the user: a personal baking recipes book application.

do some research and come up with my sweet chef.

Firstly, it focuses only on baking: it features a huge variety of pastry recipes. Secondly, the recipes are uploaded by the user, are edited by the user, and used by the user. The user has the ability to control the data

• My Sweet chef Is a baking iPad application that enables enthusiastic sweet lovers to get access

and adjust it to his/her needs - to make it more personal. Most of the applications out there feed the user with

to a variety of pastry recipes, upload their own recipes, see what they can bake with specified

the data without offering the user the ability to adjust it. My Sweet Chef allows the user to feed the application

ingredients, and have the option of editing the recipes to suit their needs. The application will present

with the data he/she chooses and customize it’s layout to suit it view.

a better way to collect, edit, and keep recipes. It is a tool that encourages the user to maintain his/ her personal recipes book in a clear, documented, and fun format. The application will enhance

Through user research, market competitive analysis, collecting data, testing multiple project prototypes, and

the experience of keeping a traditional recipes notebook by making all features mobile, editable,

analyzing results, I was able to compose a baking application that would answer any baker’s needs. From the

typed, and presented on a big screen. I see the application becoming an essential part of the pastry

professional baker who bakes on a daily basis to the amateur baker who bakes only on special occasions, My

industry and the world of anyone who is interested in baking. It serves the user by documenting his/

Sweet Chef is there to encourage and raise the interest of the user to explore the world of baking and bake. It

her recipes and by providing innovative features to make the baking experience fun and delicious.

serve as a platform to write, create, collect, and breathe baking.


8

9

Executive Summary My Sweet Chef Allow the User to:

Add Comments feature: allow the user to add comments to the recipe as a reference for future use.

• Collect and keep recipes in order.

This feature also provides the user with tips and recommendations for the specific recipe.

• Create new recipes and add them to the book.

Edit Recipe feature: allow the professional baker to make changes to the recipe while preparing it.

• Edit existing recipes: ingredients list, comments, baking time, etc.

The baker has the option of adjusting any component that is displayed on the recipe page.

• Customize the layout and change view options. • Personalize the home page navigation.

Platform

• Add comments to their recipes.

The application is intended to be mobile and designed for the iPad. The iPad is extremely popular, it

• Choose specific ingredients and view what they can bake with them.

has a big screen, it’s suitable for your comfort, and the user can protect it to last longer. It provides

• Get access to extra features such as: calories per slice, servings size, and difficulty level.

the most comfortable way to view the recipes and follow instructions while baking them. The iPad also helps the user document the recipes and save them in an organized clean way.

How is My Sweet Chef unique? The application is personal and customizable. It is a recipes book which serves the user preferences

Technology

rather than only displaying the default recipes the application comes with. The book also offers three

Layout is designed in Photoshop and illustrator.

main features that differentiate the application from its competitors and attracts new users that have

The application demo is in Axure 6.5 Pro.

baking experience, that bake for a living and that are new to baking.

Future goal is to code the application in HTML and jQuery for a fully interactive experience. note: the application was not coded in HTML and jQuery due to lack of coding experience and time

The features include: Bake by Ingredients feature: allow the user to enter the ingredients he/she wants to bake with and get a list of recipes available with these specific ingredients. This filters the results by ingredients.

constrains.


10

11

Competitive Analysis Target Audience Goals Post Research

RESEARCH


12

13

Competitive Analysis What’s already out there:

The Major Players:

There are many cooking iPad applications. Some include a baking section and some focus only on

The Photo Cookbook Baking

cooking. There aren’t many iPad applications that focus only on baking. My Sweet Chef is targeted

Description:

only toward baking which means that it is much more thorough and elaborate on the topic. The

This application has placed its focus on imagery. Every step is illustrated with a high-resolution

application also includes features that other baking applications don’t, for example the ability the

photography image. All the ingredients are presented by images and the same goes for the baking

user has to upload his/her own recipe and the option to see what he/she can bake by choosing three

utensils.

main ingredients.

Main Features: • Easy recipes to bake

All the baking applications display the chef’s recipes to the user. My Sweet Chef display the user’s

• All recipes displayed in professional step-by-step photographs

recipes maintained by the user and if desired edited by the user.

• Search function for ingredients and recipes • Ingredient lists can be emailed

Unique Positioning Statement:

What is lacking:

My Sweet Chef is my baking recipes - presented my way!

• Search field

It is my baking recipes in a book and It is personal and fully customizable to suit my needs and

• Edit ingredients list

preferences. It fits my need to edit features according to my creative view since it is all my recipes

• Add comments

presented my way.

• Option to add your own recipe


14

15

Baking with Dorie

Martha Stewart Makes Cookies

Description:

Description:

This application lets you bake with Dorie Greenspan and it fits all levels. Each recipe is build like a

This application includes instructional videos that focused mainly on cookies.

lesson. The user can view the lesson in a video format as well as in a cookbook style.

Main Features:

Main Features:

- Browse cookies by category

• The recipes displayed as a complete cooking lessons.

- Sorting options

• Progress tracking with timers and step-tracking in each view.

- See everything you need on one page.

• Sharing with friends on Facebook or Twitter.

- Collect all of your favorite cookie recipes.

• All content is included in the application.

- Share cookie recipes.

What is lacking:

- Package your cookies to share as gifts.

• Search field

What is lacking:

• Customized search

- Edit ingredients list

• Edit ingredients list

- Add comments

• Add comments

- Option to add your own recipe

• Option to add your own recipe


16

17

The Photo Cook- Baking with book Baking Dorie

Martha Stewart Makes Cookies

My Sweet chef

Edit recipes Add comments Add recipes Bake by Ingredients Change layout Customize navigation Add your point of view Many filtering options Help&Tips Shopping list Favorites list

Competitive Matrix 1

Competitive Matrix 2


18

19

Target Audience My Sweet Chef users are people who love and enjoy baking. Baking can be a fun hobby or a profession one has. The user can be someone who uses the application on a regular basis; a private chef, or someone who bakes only on special occasions; an amateur chef.

There are two groups of users:

Primary Professional chef Pastry students Amateur baker

Both the primary and the secondary groups use the application often and view it as a tool to keep a baking recipes book. However, the primary group consists of the people who will use the application the most and

Secondary Nutrition consultant

therefore I based most of my research and interviews on that group.

Personal trainer Bakery owner

Visual representation of the users


20

21

Users Interviews

Main topics addressed in the interview:

The approach

• Tell me a bit about your experience with recipes baking applications? How many recipes

My target users are people who consider baking as an important part of their life. Some bake for a

applications do you currently have? Do you think there’s room for one more?

living, some in the process of learning how to bake, and some bake for the fun of it. All use a recipe

• What features do you use the most? Are there any features you think are missing? Which features

book. My goal was to interview people who would fit into one of these categories. I also wanted to

are the most important and which you would skip?

make sure the users own an iPad. Making sure they are familiar with the device made a huge impact

• When you search for recipes, how would you like to filter the results? Do you think the recipe

on just how useful my application will become.

should include one image or more?

The Script

• How do you feel about having the ability to personalize the application layout and navigation?

Hi there, I am a student at the Academy of Art University working on my thesis project: baking

• Can you explain how important it is for you to be able to add your own recipes? Also please talk

recipes book application for the iPad. Today we will be discussing:

about the importance of having the option to edit existing recipes.

• Your needs for a baking recipes iPad application.

Summary of responses:

• The features of the baking recipes iPad application.

• All have more than one recipes application on their iPad. Each application has features they use

• Your experience with other baking recipes applications and your feelings around it.

but none contain all the features they need. They would like to have one application combined with

Remember, you don’t have to answer any questions you don’t want. Thank you for your time.

all these features.

Format: phone and in person

• All use the favorites list and in every search filter the results. Most users talked about the

Duration: 30 minutes

importance of having the ability to choose a category.

Users: potential end users

• Main sorting results should include: mostly baked, recently added, and easy to bake.

Participants: 3

• All users would like to have the option of editing recipes according to their preferences and also

Rounds: 3

upload new ones to the system. • Users would like to be able to personalize the application and change view options.


22

23

My Goals Following the Research User goals:

Design goals:

• To be able to personalize specific features in the application to suit the user’s point of view. This will

• To work toward achieving a design that uses texture, bright colors, and hand made feel. The book

allow the application to feel more like a personal recipes book.

is a personal baking recipes book and should reflect that by looking like a real book. The user should

• To have the ability to customize the application main navigation links. For example, including one

feel like this is his/her own personal recipes collection.

of the many filtering options on the home page. This will allow the user to access a more customized

• Place a strong emphasize on the images. We eat with our eyes and are drawn to look at images

recipes results from the very first page.

first. This type of application allows me to showcase the recipes by displaying crisp, large, delicious

• Have the ability to filter the results when searching for a specific recipe.

images.

• Be able to add a new recipe to the application as well as edit existing ones.

• Since the application is intended for the iPad, the design needs to be usable on a mobile device.

• Have a variety of recipes categories.

Think about tapping rather than clicking and the iPad gestures. • Neutral design: create a design layout that will attract both sexes. Step back from my feminine style

Usability goals:

and try to think how a male user would connect with the application look and feel.

• Clear navigation: the application needs to be easy to navigate through. The user should be able to

• Make sure there’s a clear hierarchy of elements on the page. Create a differentiation among the

reach his/her goal easily and find what he/she is looking for within 2-3 steps at most. The completion

navigation levels. Have the main navigation constant and bold and make sure the filtering system

of each task is very important and greatly affects my ability to proceed to the next step of the

represents these sorting options rather than appearing like a sub navigation links.

screens design. Also, the user should always know where he/she is in the application and be able to go back one step from any screen. • User testing: test the application as many times as possible in the usability lab and conduct gorilla testing on a regular basis along the way. Make sure the revise the application based on the feedback and test again.


24

25

Application main Features Recipes Section Comparison Analysis Information Architecture

DESIGN OBJECTIVES


26

27

Identifying the Application Main Features When I came up with the idea of creating a baking recipes book, it was important for me to make

Main features:

it a personal book. The application functions as a personal book which includes features that allow

• Browse Recipes: The user has two ways to search for recipes.

the user to personalize and customize it. Conceptually, the application looks and feels just like a

By Category: Cakes, mousses, pies, cupcakes, cookies, muffins, and more.

notebook you would keep in your kitchen cabinet. However, it is much more advanced because it is

By Ingredients: Enter three main ingredients to search for recipes that include them.

documented on the iPad. No more loosing recipes you wrote on a piece of paper, no more figuring

• Bake by Ingredients: the user can view what he/she can bake with three main ingredients.

out what you wrote beneath the butter cream cheese that spilled on the recipe, and no more having

• Edit Recipe: The user has the ability to edit any component of the recipe to suit his/her needs.

to write the recipe over and over again when you need to edit it. I am encouraging the user to bake

• The Story Behind the Book: The user can add his/her personal story with baking and also upload a

more at home by allowing him/her to have an easy access to a variety of recipes. It is easy for the

picture of themselves or a delicious pastry they love to bake.

user to collect and keep the recipes in an organized system

• Create a New Recipe: The user can upload a new recipe to the application. • Customize Home Page Navigation: The user can customize the links that appear on the home page

The application unique features make it easy for the user to keep a baking recipes book and are all

and by that he/she have an easy access to the most used features of the application.

contained in this one application which makes it a complete recipes book. Some of these features exist in all recipes applications like: shopping cart, browse recipes, refine results and some exclusive

More features:

only to my sweet chef, for example: the ability to upload your own story behind the book and the

• Many filtering options like: fast & easy, bake later, and favorites.

ability to customize the home page navigation.

• Refine Results: The user can narrow the results by specifying specific features of a recipe like: calories per slice, difficulty level, pastry category, and more. • Shopping List: The user can create a shopping list by ingredients. • Help & Tips: This section provides the user with may help topics and tips on baking.


28

29

Recipes Section Comparison The main section of the application is the recipes collection. This is where all the data is stored and where the user performs most of his/her tasks. When I researched my competitors it was important for me to look at how they treat the recipes section in their applications. Here I want to demonstrate the look, feel, and navigation of my sweet chef competitors recipes section in comparison to my sweet chef recipes section.

Observations: • No filtering results options.

America’s Family Recipes: Best of Home Cooking

Breville’s Creative Kitchen

Observations:

Observations:

• No recipe title.

• The pop up window force me to take

• No indication to where I am on the page.

another step if I want to view main navigation.

• No hierarchy on the page.

• No indication of extra features like prep time

• No help & tips feature.

and bake time.

• Confusing layout with having the images tilted.

• No ability to filter the results.

• No ability to customize the page layout

• No search field.

• No ability to personalize the book.

• No indication of how the layout would look in

• The design appears very old fashioned and

case there are more recipes.

doesn’t follow any specific grid.

• No ability to customize the layout view.

• No search field. • Design & Layout feels amateur. • Can’t change the view layout. • No indication to where I am on the page. • No ability to customize the background. • No indication of the main navigation. Entenmann’s Home Baking

• No Indication if the recipes are presented in a slide show (in case there are more recipes) or if this is the total of all the recipes.


30

31

My Sweet Chef Observations: • Many filtering results options. • Option to change the view layout. • Option to add recipe to favorites. • Option to add recipe to bake later. • Each recipe displays its extra features: (prep time, bake time, calories, etc). • Option to view recipes by categories. • Display of a large recipe image. • There is indication to where I am on the page. • More option that allow the user to customize the layout and change the background theme. • More option that allow the user to access help & tips. • User always has access to the main navigation. • Recipes page include two main features that are exclusive to my sweet chef application: bake by ingredients and create new recipe. • The recipes collection displayed in a slide show format which is very suitable for the iPad and the arrows are a representation of that.

My Sweet Chef, recipes page, third version before final.


32

Information Architecture

Site Map of main navigation

33


34

Information Architecture

Site Map of the recipes section

35


36

37

Wireframes Visual Research Inspiration Moodboards Logo Icons Typography Color Palette Screen Layout Exploration

PROJECT DEVELOPMENT


38

39

Wireframes Paper Prototype (3rd version) The approach This prototype includes eleven different screens portraying the task of: Baking > Upload a Recipe > New Creation. The enters the new recipe details and upload it to the system. I tested the prototype on potential users: some practice baking on a regular basis and some were introduced to the idea and thought to give it a try. I was able to test it on three of my target users: amateur baker, private chef, and a pastry student.

Format: paper

Negative Feedback:

Duration: 10 minutes

• The user has to take too many steps to

Users: potential end users

achieve his/her goal .

Location: School lab and in class

• The drop down menu is confusing.

Participants: 24

• The main navigation links don’t make sense.

Rounds: 5

• The page transition are confusing. • The profiles link shouldn’t be prominent. • The ingredients form is too cluttered. • The user is not sure how many steps he/ she need to take to complete the task, no navigation trail is included on each page.


40

41

Paper Prototype (5th version) The approach This prototype includes fifteen different screens portraying the task of: My Recipes Collection > Find Recipe by Category > Category: Cake > Recipe Image page. My Recipes Collection > Find Recipe by Category > Category: Cookie > Recipe Image page. Exploration of the substitution table. My Recipes Collection > Add New Recipe > Form. I tested the prototype on three groups of my target users: personal trainer, nutrition consultant, and amateur chef. All were familiar with the iPad, a few even had one, and all had downloaded baking applications before.

Format: paper

Negative Feedback:

Duration: 10 minutes

• The user felt it took him/her too long to figure

Users: potential end users

out how to start the task.

Location: users place of work

• The Buy List link is confusing, change it to

Participants: 7

Shopping List.

Rounds: 1

• The main navigation links are too detailed which makes them too long. • The user has to take too many steps to complete the task.


42

43

Keynote Prototype (6th version) The approach This is a high-fidelity digital prototype composed in keynote. All the pages are linked and it includes 53 screens. Most of the application’s tasks are covered in this prototype and the users were able to explore all the main features. Tasks included: Add recipe > add new recipe or add collectable recipe. Change Recipe > edit a recipe: ingredients list, baking time, etc. My Recipes > enter the recipes collection. I tested the prototype on potential users and my target audience. All the users love to bake and feel very confident in using the iPad. Most of the users have the iPad and use it on a regular basis.

Format: digital on a computer (pdf files)

Negative Feedback:

Duration: 15 minutes

• The design layout is too busy and could

Users: potential end users

come across as confusing.

Location: In class and at home

• It’s hard to predict what will happen once the

Participants: 12

user clicks on the ingredients tab.

Rounds: 1

• There are too many links on the bottom which draws the user eyes out of the frame. • There is a need for better navigation scheme.


44

45

HTML and CSS Prototype (7th version) The approach This is a high-fidelity digital prototype coded with HTML and CSS. It lives on the server and accessible through a URL.. Here the users were able to explore all the features of the application: Recipes > a recipes categories page that direct the user straight to the recipe pages. Add New Recipe > the user fill out a form to add new recipe. By Ingredients > the user can view what he/she can bake with specific ingredients. Shopping list > the user creates a shopping list according to the recipe items. Extras > the user has the option of view extra recipe features like baking time. Favorites > the user has the option to add a recipe to his/her favorite recipes list.

Format: hosted live on the internet

Negative Feedback:

Duration: 20 minutes

• The 3x4 matrix of the recipes page isn’t

Users: potential end users

unified with the rest of the layout.

Location: in class and online

• The main navigation tabs are too big and the

Participants: 6

text is confusing to the user.

Rounds: 1

• It’s hard to predict what will happen once the user clicks on the ingredients tab.


46

47

Axure Prototype (8th version) The approach This is a high-fidelity digital prototype fully interactive and coded with Axure RP. The application lacks the option of allowing the user to edit every text line on the recipe, only the ingredients, instructions, and comments are edit able. Here are the features the users were able to explore: Recipes > a recipes categories page presenting three main categories. Add New Recipe > the user fill out a form to add new recipe. Edit Recipe > the user can edit some aspects of the recipe’s content. Pastry categories > the user customizes the different pastry categories.

Format: hosted live on the internet

Negative Feedback:

Duration: 20 minutes

• Confusing navigation in the recipes page.

Users: potential end users

• The home page is more of an intro page,

Location: online

and has no functionality what so ever.

Participants: 5

• The pages aren’t unified.

Rounds: 2

• No option to edit the whole recipe. • It’s hard to see that there’s a slide show in the specific recipe page.


48

49

Photoshop Wireframes Prototype (10th version) The approach This is a high-fidelity digital prototype fully interactive and coded with Axure RP. It lives on the server and accessible through a URL.. Here the users were able to explore all the features of the application: Recipes > a recipes categories page that direct the user straight to the recipe pages. Add New Recipe > the user fill out a form to add new recipe. By Ingredients > the user can view what he/she can bake with specific ingredients. Shopping list > the user creates a shopping list according to the recipe items. Extras > the user view the extras in every recipe page. Favorites > the user has the option to add a recipe to his/her favorite recipes list.

Format: hosted live on the internet

Negative Feedback:

Duration: 20 minutes

• The user completes the task in two steps.

Users: potential end users

• The navigation is linear and by topic.

Location: online

• The main navigation links are clear and easy

Participants: 5

to understand.

Rounds: 2

• Good indication to where you are. • The users felt confident and knew exactly what to click on to complete the tasks.


50

51

Visual Research

Inspiration: Exploring a layout that emphasizes texture, bright colors, and movement.

Inspiration: Exploring a layout that emphasizes sketchy, artistic, and hand drawn feel.


52

53

Moodboard: Soft & Sketchy

Moodboard: Bright & Elegant


54

55

The final design The home page reflects a combination of all moodboards. You can see how I placed an emphasize on colors, sketchy style, and hand made style. The line and use of grid feels more elegant and the color separation evoke a feeling of something bold to come. The user is engaged to explore each section.

Moodboard: Bold & Traditional


56

57

Logo Development

my sweet chef

my sweet chef

my sweet chef

my sweet chef

Cooper Black

Five Minutes

Type & Name Exploration

HVD Bodedo

Wild Growth

my sweet chef Braggadocio

bake a cake

Moonlight Shadow

bake a cake

bake a cake

pastry in a book

pastry in a book

pastry in a book

pastry in a book

HVD Poster

Romeral

Type & Name Exploration

HVD Rowdy

Sketchica

Ripe

JustOldFashion


58

59

Logo Sketches

Logo Sketches


60

61

Logo Drawn Digitally

Logo Drawn Digitally


62

Icons Development

Final Logo

Icons Sketches

63


64

65

Logo Sketches

Final Logo + Icons


66

67

Screen Layout Exploration Recipes Page: three panels

Recipes Page: 3x4 matrix


68

69

Recipes Page: filtering options

Recipes Page: top and bottom slide show of recipes


70

71

Recipes Page: gallery view with a main slide show on about 60% of the page.

Recipes Page: gallery view with a main slide show on about 80% of the page.


72

73

Recipes Page: including filtering options at the bottom as text.

Recipes Page: including filtering options at the bottom as icons + text.


74

75

Description Main recommendations Goals the project has reached

USABILITY TESTING


76

77

Description Testing Overview

Test Results:

The user test is conducted to view how people use the application. The testing goal is to examine if

The user testing will result in a summary report, which details the data gathered during the testing,

the users understand what the application is all about and if the product is clear enough in engaging

success metric that benchmark the usability of the application, my observations, user comments,

them to use it. The test also functions as a tool to fix any areas that are causing confusion to the

and a list of suggestions based on the results of the testing.

users through the process. Documents Included: While conducting the test it was important for me to state that I am not helping the user to

• Tasks.

complete the task in any way but I am:

• Consent Form.

• Encouraging him to think out loud .

• Tasks Responses Feedback.

• Taking notes during the session .

• Post Session Survey.

• Measuring the time it takes him to complete the task.

• Observer Notes.

• Making observations.

The tests were conducted in three methods: • Screens Walkthrough: paper prototype. • Application Navigation: interactive prototype. • Seven Main Tasks: navigation to complete the tasks.


78

79

1st user Test Test dates:

May 28, 2012

Main Recommendations

Number of users:

1

1. The use of the frame design for the main navigation is too big and takes too much valuable space

Target audience:

AAU Usability Lab Intern

from the page layout. Boxes size should be reduced.

Prototype tested:

http://www.sherrysite.com/mysweetchef/index.html

2. The sub navigation is confusing and contrasting with the main navigation on the screen. The user doesn’t recognize that this is a drop down menu of the main navigation. A good idea would be to create a better differentiation between the two. 3. The filtering system has the same shape and color as the main navigation which confuses the user. Also, the boxes are too big and take too much space on the page.

1

4. Too many filtering options and some repeat themselves like ‘most viewed’ and ‘favorites’. 2

5. Too many symbols appear which create a confusion to the user. Think about eliminating some and

3

4 5

6

include only the favorites one. 6. The recipes slide show needs to be bigger since this is the recipes page and that is what the user is looking to see. 7. The rating system doesn’t make sense since these are all the users recipes which means he/she thinks they are all taste good. Why would the user include recipes he/she thinks are yuck.

7


80

81

2nd User test Test dates:

June 26, 2012

Main Recommendations

Number of users:

1

1. The drop down menu has the same look and style as the filtering options which confuses the user.

Target audience:

AAU Usability Lab Intern

2. The filtering options is on the same level as the drop down menu which creates no differentiation

Prototype tested:

http://www.sherrysite.com/mysweetchef/index.html

between the two navigation functions.. 3. Work on the type formatting of the recipe title so it would look more like one line and create a unified look among all the titles.. 4. Include an indication that this is a slide show of recipes. 5. The star rating system is confusing .

1

6. The extra features are all squeezed at the bottom, need to be formatted.

2 3

4

5

6


82

83

3rd user test Test dates:

July 3, 2012

Main Recommendations

Number of users:

1

1. The drop down menu is confusing. The user wasn’t sure if this is a drop down menu or just an

Target audience:

AAU Usability Lab Intern

indication of what he/she is looking at.

Prototype tested:

Digital Wireframes

What does ‘all’ mean? The user wasn’t sure if he/she should tap the ‘all’ or the ‘recipes’ tab. 2. The page layout icons don’t reflect the actual page layout. Work on creating icons that would imply to the user how the page can be visually viewed: gallery view and lit view. 3. The user wasn’t sure the arrows were indicating a slide show. How about adding a box along the arrow and the image to highlight the arrow.

2

4. The slide show should continue all the way to the end of the screen for a better visual design.

1

5. The visual design of the filtering options at the bottom doesn’t relate to the rest of the application design. They seem to plain and can appear confusing to someone who wouldn’t view them as links. Some users felt this is a trail navigation rather then actual links to filter the results. 3 4

5


84

85

4th user test Test dates:

Oct 5, 2012

Main Recommendations

Number of users:

3

1. The ‘more’ tap moved to the top left corner which isn’t consistent with the rest of the pages. Have

Target audience:

Amateur Bakers

it always on the top right corner for a unified look.

Prototype tested:

Digital Wireframes

2. Adding the ‘shopping basket’ icon is confusing. The users didn’t know if they will create a shipping list when tapping that or if they will enter the shopping lists they have already created. Also, what happens if no shopping lists were ever created? Include this feature under ‘more’. 3. The filtering options don’t look like navigation. A better solution would be to have them as text and icons. Also, there the color navigation isn’t clear. ‘all categories’ is the same color as the top main

1

2

3

navigation but it’s not on the same level. Don’t use the same color. 4. Why all the recipes titles color coded differently? If each color represents a category then when the

4

user taps this category the color should be the same. 5. The rating system doesn’t make any sense. The star icon competes with the heart icon which means favorites. The best solution is to eliminate the rating system completely.

5


86

87

5th user test Test dates:

Oct 17, 2012

Main Recommendations

Number of users:

1

1. ‘all’ tab isn’t clear. The user wasn’t sure what it means and didn’t know he/she were looking at

Target audience:

Usability Lab Intern

a mix of recipes categories. A good solution would be to have the categories appear as one of the

Prototype tested:

Coded Prototype InVision

filtering options. Include it next to the filtering options at the bottom. 2. The main navigation icons at the top compete with the filtering options icons at the bottom. They are too similar and create a confusion on the page. The user felt he/she didn’t know where to go on the age and what is more important. Go back to the previous design which involved boxes and 2

1

shading and leave the filtering options at the bottom as is. 3. The slide show portion of the page should take more space on the design. Stretch the slide show by minimizing the main navigation links at the top. 4. There is no need to include the ‘filter results by’ next to the filtering option. It is obvious by viewing these icons with the descriptive text beneath them.

3

4


88

89

6th user test Test dates:

Between Nov 5 - Nov 12, 2012

Goals Project Has Reached After the User Testing

Number of users:

4

This is the final design I tested for three more times. Here you can see how all the testing

Target audience:

Amateur Bakers

recommendations were implemented to the prototype layout navigation and design:

Prototype tested:

Coded Prototype InVision

1. Layout Icons: The user clearly understands what layout he/she will view once tapping one of the two options. 2. Main Navigation: Located at the top and doesn’t take too much space of the page. Represented only by text and designed in boxes to differentiate it from the filtering options navigation.

1

2

3. More: Appears on the top right corner on all pages.

3

4. Slide show: Is stretched horizontally all the way on the screen to represent an iPad slide show and takes most of the space on the page to create visual hierarchy. 4

5. Slide show Arrows: Visually emphasized by a long narrow box. 6. Category: Is one of the filtering option at the bottom navigation. The user now knows that ‘all’ 5

reflects that he/she is viewing all recipes in that category.

My project has reached every goal I had set when started working on it. The users felt it was easy to navigate through the pages and were able to complete each task with success. The application introduced a creative and innovative system to maintain a personal recipes book. And most 6

importantly to me, the application encouraged bakers to be more enthusiastic about baking.


90

91

Resume Autobiography Bibliography Credits


New Media Designer sherry@sherrybenharush.com sherrybenharush.com 415-672-4933 sherry@sherrybenharush.com sherrybenharush.com June 2011 – present machineryplanet.com

92

Resume

June 2011 – present

June 2007 – present

Web designer Responsible for developing visual concepts machineryplanet.com and final designs for client. Working closely Web designer with the web development team to ensure Responsible for developing visual concepts technical feasibility and correct design and final designs for client. Working closely implementation. with the web development team to ensure technical feasibility and correct design sherrybenharush.com implementation. Freelance designer

Working on providing identity and stationary June 2007 – present sherrybenharush.com design, web design, HTML/Flash, and Freelance designer print design. Working on providing identity and stationary web design, HTML/Flash, and World Store June 2000 – Sep 2003 design, Creative print design. Executive store manager Responsible for sales, marketing, and June 2000 – Sep 2003 Creative employers.World DealingStore with importers and Executive manager customer store service. Responsible for sales, marketing, and employers. Dealing with importers and service.Intelligence Force Sep 1998 – May 2000 customer Israel Military Graphic designer Worked on a major site redesign for the Intelligence Force web Sep 1998 – May 2000 Israel graphicMilitary design department producing Graphic designer design pages in HTML. Worked on a for major site print redesign for the Responsible events production graphic design department producing web producing invitations and posters. design pages in HTML. Non commissioned officer in charge of Responsible events print production women duty for roster. producing invitations and posters. Non commissioned officer in charge of women duty roster. Sep 2009 – present

Academy of Art University, San Francisco Master of Fine Arts in New Media Web Design

Sep Sep 2009 2007 –– present Dec 2007

of Art University, Francisco Academy University, SanSan Francisco Golden Gate Master of Fine Arts in New Media Web Design Business Communication and Economics

Sep Sep 2007 2003 –– Dec May 2007 2007

Gate University, SanSan Francisco Golden of Art University, Francisco Academy Business Communication and Economics Bachelor of Fine Arts in Computer Arts New Media

Sep 2003 – May 2007

Spring Show 2006, first place imaging piece. Academy of Art University, San Francisco Bachelor of Fine Arts in Computer Arts New Media Spring Show 2006, first place imaging piece.

93 Skills Adobe Creative Suite

Skills Expert level

Adobe Flash Creative Suite Expert Expert level level in design and animation, basic knowledge of ActionScript 3 Flash Expert level in design and animation, HTML/CSS Goodknowledge working knowledge basic of ActionScript 3 HTML/CSS PHP/MySQL

Good Basic working knowledge PHP/MySQL Dreamweaver/Textmate/BBEdit

Basic Good working working knowledge knowledge

Dreamweaver/Textmate/BBEdit After Effects Good Expertworking level knowledge After Final Effects cut pro Expert level Good working knowledge cut pro Final Reason/Peak Good Good working working knowledge knowledge Reason/Peak MS Office Good Expertworking level knowledge

Autobiography Growing up in a small town in a country where you have the big city life just around the corner of your neighbor’s chicken farm , I enjoyed both worlds but still always dreamed of traveling the world. Born and raised in Israel, at the age of 18 I joined the army and after three weeks of training begun my service in the intelligence office as the base graphic designer. San Francisco became my destination to further continue my design education, and soon after my military service was over I started my bachelor degree at the Academy of Art University following by completing my masters in Web Design New Media. I aspire to be an artistic person in every aspect of my life and my life constantly flips between the need to express myself which has no limits and the need to be practical which outlines a daily routine I must follow. Three passions rule my life; design, fitness, and baking. Design is my work, fitness, and baking are my hobbies. I dedicate most of my time to being active in these three worlds. Design feeds my artistic soul, fitness feeds my body, and baking feeds my spirit.

Office MS Languages Expert English,level Hebrew Languages English, Hebrew

My Creative Journey I believe that once you achieve a satisfying career you fulfill your goal of living a happy life. I am on the path to fulfilling my goal. Taking this route makes me feel like an accomplished person. I am achieving professional, social, and psychological confidence to be the individual I yearn to be. It

takes, and will take, some hard work to become the person who will serve as a combination between my artistic point of view and my professional purpose.


94

95

My Professional Goal

to design magazines, Web sites, and design books to get inspired. I always sketch my design on

Growing up in a small town in a country where you have the big city life just around the corner

paper before working on it on the computer. The last step usually includes scanning my work and

of your neighbor’s chicken farm , I enjoyed both worlds but still always dreamed of traveling the

uploading it to the computer to start creating it digitally.

world. Born and raised in Israel, at the age of 18 I joined the army and after three weeks of training begun my service in the intelligence office as the base graphic designer. San Francisco became my

I want to be a new media Designer

destination to further continue my design education, and soon after my military service was over I

My education and experience range from print and packaging design for web, video, and motion

started my bachelor degree at the Academy of Art University following by completing my masters

graphics. I am most interested in graphic/web design. I want to be involved in the initial design

in Web Design New Media. I aspire to be an artistic person in every aspect of my life and my life

process and help build the identity of the company. Developing the look and feel of a brand is what

constantly flips between the need to express myself which has no limits and the need to be practical

fascinates me in the creative world. When working on designing an identity for a company, I get

which outlines a daily routine I must follow. Three passions rule my life; design, fitness, and baking.

attached to the project and feel like it’s my baby too. I see the graphic designer as the person who is

Design is my work, fitness, and baking are my hobbies. I dedicate most of my time to being active in

in charge of the branding of the company to produce a design, which will convey what the company

these three worlds. Design feeds my artistic soul, fitness feeds my body, and baking feeds my spirit.

is all about and how it will be perceived in the market.

My Artistic View Is always evolving. The further I reach the more experience I build and the fuller my body of work becomes. My creative process is concentrated mainly toward problem solving. Whatever I design, it answers a question that exists and needs attention. My design is aimed towards raising awareness of a product or an issue. The first step of my creative process is facing the drawing board. I draw a few words, maps, and narrow it down to the five best words that describe my project. I then go


96

97

Bibliography

User research tools:

Source images:

Survey: docs.google.com

• iPad PSD template: teehanlax.com/blog

Interview: docs.google.com

• Design stencils:

Card sorting: www.optimalworkshop.com/optimalsort.htm

- OmniGraffle: www.omnigroup.com/applications/omnigraffle

Applications visual design reference:

- Mind maps: MindNode: www.mindnode.com

http://itunes.apple.com/us/app/the-betty-crocker-mobile-cookbook/id304132604?mt=8

- MindJet Manager: www.mindjet.com

http://itunes.apple.com/us/app/martha-stewart-makes-cookies/id398472789?mt=8

Competition applications:

http://itunes.apple.com/us/app/big-fork-little-fork/id379783460?mt=8

The Photo Cookbook Baking: http://itunes.apple.com/us/app/id405959208?mt=8

http://itunes.apple.com/us/app/170-000-recipes-bigoven/id294363034?mt=8

Baking with Dorie: http://itunes.apple.com/us/app/baking-with-dorie/id447562155?mt=8

http://itunes.apple.com/us/app/appetites/id405170698?mt=8

Martha Stewart Makes Cookies http://itunes.apple.com/us/app/martha-stewart-makes-cookies/

http://itunes.apple.com/us/app/cooks-illustrated/id385674638?mt=8

id398472789?mt=8

http://itunes.apple.com/us/app/id405959208?mt=8

User research tools:

Pastry Images:

Survey: docs.google.com

http://www.simplyrecipes.com/recipes/suzannes_chocolate_cake/

Interview: docs.google.com

http://www.tasteofhome.com/

Card sorting: www.optimalworkshop.com/optimalsort.htm

http://www.myrecipes.com/

Fonts: Ripe, Cooper Black, Sketchica, Steiner, Syphon Spritz, Vtks Velhos Tempos, HVD Bodedo Wild Growth, HVD Edding 780, HVD Rowdy, HVD Poster, Helvetica Neue


98

99

Credits

• I want to thank my directed study classes instructors:

• I want to thank my test users for taking the time to test my application and participating in the

interview and survey process .

Kathleen Watson (user experience)

Monica Heidelberg (user experience online)

Claudia Dallendorfer (visual design, user experience online)

John Parker (scripting)

• Thanks to: Dave Rubinsly, Mona Diddly, Debbie Salomi, Robert lee, Seana Grey, Sam Stocktom,

Machinery Planet (summer internship)

and the AAU Usability Lab interns for being my users when I tested my project.

Machinery Planet (Fall internship)

• I want to thank the Academy of Art library for providing me with the necessary resources for

• I want to thank Machinery Planet for giving me the opportunity to work for them as an intern in their

composing my application.

company. Working there as a web/graphic designer gave me the privilege of building my experience

• I want to thank my target users who took the time to talk to me and provided me with very useful information about themselves, the application, and the ipad device.

• I want to thank my fellow students at the user experience lab for participating in the process of conducting the prototypes and gathering important data. • I want to thank my graduate department director: Lourdes Livingston, for making sure I am on the right track all through the process of developing the application.

Thanks to:

and gaining more valuable knowledge. The company’s web site is all HTML and CSS and therefore I gained more experience in that area versus coding in Flash.


100


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.