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