SousChef UX Case Study By Calvin Lam

Size: px

Start display at page:

Download "SousChef UX Case Study By Calvin Lam"

Elizabeth Norton
6 years ago
Views:

1 UX Case Study By Calvin Lam

DESCRIPTION A collection site where anyone search for a recipe, or create an account to add their own. It turns any recipe into audio so you can focus more on cooking and less on reading instructions.

2 DESCRIPTION A collection site where anyone search for a recipe, or create an account to add their own. It turns any recipe into audio so you can focus more on cooking and less on reading instructions. Motion detection via webcam allows you to control the audio player and avoid touching screens with messy hands. THE IDEA THE NAME THE USERS THE SOLUTION Application that helps you when you are cooking. Named after souschefs in restaurants. Anyone that loves to cook. A cooking application that tries to free up your hands. SousChef UX case study by Calvin Lam page 2

3 DISCOVERY

4 THE NEEDS MEDIA RECIPES DISCOVERY People prefer online resources than anything else to find recipes. People like to search quick and healthy recipes the most. Majority of people in all age groups enjoy cooking. Online 40% Cookbooks 19% Parents 9% Quick & Easy 69% Cheap/Holiday 50% Healthy 45% % % % SousChef UX case study by Calvin Lam page 4

THE NEEDS FOOD PORN INDEX Photos of healthy recipes vs

Network DESERT ISLAND Only 1 source for recipes the rest

EXPECTED FOOD SITE FEATURES COMPARED FROM 1999 TO 2012

. +1210% +558% 300% JOY OF COOKING Age of people that

VS WEBSITES where users get recipes 43% 42% 69% Quick &

RECIPES Age of people that prefer digital recipes 40% 25%

Age of people that enjoy cooking 87% 75% 78% search

5 THE NEEDS FOOD PORN INDEX Photos of healthy recipes vs unhealthy 34% 66% 74% Percent of women that watch cooking videos. RECIPE SOURCE 43% 31% 20% Online Called a Friend Social Network DESERT ISLAND Only 1 source for recipes the rest of their lives 44% 19% 9% ONLINE COOKBOOK PARENTS EXPECTED FOOD SITE FEATURES COMPARED FROM 1999 TO 2012 DISH RECOMMENDATIONS COMMUNITY RATINGS PLANNING/SCALING % +558% 300% JOY OF COOKING Age of people that cook more now 69% 52% 41% SEARCH ENGINE VS WEBSITES where users get recipes 43% 42% 69% Quick & Easy 50% Cheap/Holiday 45% Healthy DIGITAL RECIPES PRINT RECIPES Age of people that prefer digital recipes 40% 25% 25% Age of people that prefer print recipes 35% 34% 22% Age of people that enjoy cooking 87% 75% 78% search engine websites MOST SEARCHED RECIPES SousChef UX case study by Calvin Lam page 5

COMPETITIVE ANALYSIS COMPARE YUMMLY EPICURIOUS ALLRECIPES Social media sharing Facebook, Twitter, Google+, Pinterest Pinterest Pinterest Nutrition

feature Yes Yes Yes Recommended dishes Only from refreshing home screen By categories Shake to spin for random recipe Sort results No Rating,

holiday Prep time, diet, ingredients (manually type) Change number servings 1-25 No 1-100 Positives Design looks really pleasing and clean Amount of

6 COMPETITIVE ANALYSIS COMPARE YUMMLY EPICURIOUS ALLRECIPES Social media sharing Facebook, Twitter, Google+, Pinterest Pinterest Pinterest Nutrition information Calories, vitamins, fats, cholesterol, salt No Calories, vitamins, fats, cholesterol, salt Estimated cooking time Yes Yes Yes Shopping list feature Yes Yes Yes Recommended dishes Only from refreshing home screen By categories Shake to spin for random recipe Sort results No Rating, relevance, photo, a-z, newest No Filter by preference Prep time, cusine, courses, nutrition, taste, diet/allergy Ingredients, course, cuisine, diet, holiday Prep time, diet, ingredients (manually type) Change number servings 1-25 No Positives Design looks really pleasing and clean Amount of content Very active community Negatives Recipe instructions are external Organization of information Shake to spin for a recipe SousChef UX case study by Calvin Lam page 6

PERSONAS JOHN CASEY 27~SEATTLE~ART DIRECTOR THE HEALTH NUT EAT BETTER. FEEL BETTER wo GOALS Wants to feel more in control while cooking in the kitchen.

7 PERSONAS JOHN CASEY 27~SEATTLE~ART DIRECTOR THE HEALTH NUT EAT BETTER. FEEL BETTER wo GOALS Wants to feel more in control while cooking in the kitchen. FRUSTRATIONS NEEDS KEY ATTRIBUTES John Casey is a 27 year old art director for a Seattle design agency. He is really passionate about the visual aesthetic of food and believes people eat first with their eyes. He has started to cook more and is adopting a healthier eating habit, but doesn t have as much time as he would like with the long hours at work. John prefers to cook quick and healthy meals when given the opportunity. He frequently surfs the web for recipes and tips to make cooking faster and efficient. Recipes that are really complicated. Lack of nutrition information or organic ingredients. Not enough emphasis on photo of recipe. No estimated prep and cooking time. Recipe that doesn t just sound amazing, but looks amazing. Filter dishes by calories or other nutrition, or organic ingredients. Sort recipes by time to complete in total. TECHNOLOGY PRODUCT CONSUMER PROFILE KNOWLEDGE BEHAVIOR Mobile: iphone Desktop: Macbook Air Hrs/day Online: 8 Hrs/week Online: 50 Browser: Chrome MOTIVATIONS Cookbooks: < 5 Follows Food Blogs: Yes Watches Cooking Shows: No Uses Food Apps: Yes Hrs/Wk Cooking: < 5 Buys Groceries Online Pays for apps Likes gourmet coffee Buys organic always Hates take out Cook recipes that are quick and healthy. SousChef UX case study by Calvin Lam page 7

PERSONAS CHUCK BARTOWSKI 42~ OAKLAND~BIKE MECHANIC THE CARNIVORE MORE TOOLS IN THE KITCHEN MEANS MORE FUN wwwwww Wants to keep screens clean when prepping ingredients.

He also prefers recipes that don t break the bank. He enjoys reading cookbooks when business is a little slow, but has started to surf the web for recipes much more frequently.

8 PERSONAS CHUCK BARTOWSKI 42~ OAKLAND~BIKE MECHANIC THE CARNIVORE MORE TOOLS IN THE KITCHEN MEANS MORE FUN wwwwww Wants to keep screens clean when prepping ingredients. GOALS FRUSTRATIONS NEEDS KEY ATTRIBUTES Chuck Bartowski is a 42 year old bike mechanic in Oakland. He is a fan of food is served with bacon on top and on the side. He also prefers recipes that don t break the bank. He enjoys reading cookbooks when business is a little slow, but has started to surf the web for recipes much more frequently. Chuck loves testing out new gadgets in the shop, and the same applies when in the kitchen. He isn t afraid to try new apps and tools to perfect that meatloaf or BBQ recipe. Getting his devices dirty when cooking. Lack of feedback when using cooking app. Scrolling through long recipes and instructions Way to use devices when cooking, but keep them clean. More interaction with app when cooking. Better navigation of long recipes TECHNOLOGY PRODUCT CONSUMER PROFILE KNOWLEDGE BEHAVIOR Mobile: Android Desktop: Macbook Pro Hrs/day Online: 3 Hrs/week Online: 20 Browser: Chrome MOTIVATIONS Cookbooks: > 10 Follows Food Blogs: Yes Watches Cooking Shows: Yes Uses Food Apps: Yes Hrs/Wk Cooking: > 10 Buys Groceries In Store Pays for apps Likes bourbon Doesn t mind organic Eats out on occasion Devices and apps in the kitchen make the cooking process more enjoyable. SousChef UX case study by Calvin Lam page 8

9 PERSONAS ANNA WU 23~SAN FRANCISCO~SALES ENGINEER THE STUDENT COOKING IS AN EXPERIENCE THAT SHOULD BE SHARED w wwh To improve cooking and feel connected while in kitchen. GOALS FRUSTRATIONS NEEDS KEY ATTRIBUTES Anna Wu is a sales engineer at a social media tech startup. She has recently started teaching herself how to cook. She loves getting tips from people on social networks. When she s taking a lunch break from consulting on the company s digital strategy, she snaps a pic of the dish before digging in. While Anna is in the kitchen, she prefers to have her phone or laptop nearby playing a cooking video to help her along. Not able to share recipes with friends. Static recipe information and instruction. Not able to add review or comment on a recipe. Feature to link to social media accounts. Video recipes. Review or rating system to leave feedback on recipe. TECHNOLOGY PRODUCT CONSUMER PROFILE KNOWLEDGE BEHAVIOR Mobile: iphone Desktop: Macbook Air Hrs/day Online: 12 Hrs/week Online: 60 Browser: Firefox MOTIVATIONS Cookbooks: 0 Follows Food Blogs: No Watches Cooking Shows: No Uses Food Apps: No Hrs/Wk Cooking: < 5 Farmers Markets Doesn t buy apps Likes pastries Only buys organic Orders lots of takeout Improve cooking to impress people. SousChef UX case study by Calvin Lam page 9

10 DEFINE

11 USER INTERACTION SPECIFICATION OVERVIEW Home Page Introduction, Search Recipe, About, Contact, Footer, Header, Video Demonstration Profile Edit Profile, Create Recipe, Favorites, Reviews, Edit Recipe, Edit Reviews, User Recipes Landing Simple splash image with call to action. Search box for recipe. Header should have logo and links to internal parts of site (login, profile, search bar). Application Introduction Three column sections that talk about the unique features. One column to talk about text to speech, second to describe motion detection control, and third column explains how application is useful. One section dedicated for a video demonstration. Footer Links for about section that talks about team, terms/policy, and contact page. Social media icons that link to social media pages. Contact Us section should have address, and contact form. Edit Profile Form to change password and address. Field to change profile photo. Create Recipe Form should have fields for title, photo, ingredients, directions, number of servings, nutrition value, and total time. User Recipe Profile should have links for user recipes, reviews, and favorited recipe. The contents should be displayed thumbnail style for recipes, and list style for reviews. Reviews Review should have field for comments about the recipe, and field for star rating system. Reviews should show profile avatar of user making the review. SousChef UX case study by Calvin Lam page 11

12 USER INTERACTION SPECIFICATION OVERVIEW Recipe Page Text to Speech, Motion Detection, Recipe Content, Social Media Recipe Content Recipe should display title, photo, ingredients, directions, number of servings, nutrition value, source, and total time. On desktop version there should be three columns; One for main recipe content, second column for nutritional info, servings, and time. Third column for webcam motion detection. Text to Speech Recipe ingredients and instruction converted to audio. Audio player should have basic controls for stopping and playing. Audio should be in British accent. Social Media Sharing Icons should link the recipe to the respective social media site for user. At least have Twitter, Facebook, and Pinterest. Motion Detection Only on devices and browsers that support getusermedia. Alert for non compatible browser. Motion detection controls for audio player and scrolling. Illustrated step by step instruction on how to activate and use webcam motion detection feature. SousChef UX case study by Calvin Lam page 12

13 INFORMATION ARCHITECTURE HOME LOGIN SETTINGS SEARCH PROFILE RECIPES REVIEWS Recommended Dishes About Sign In Edit Profile Edit Results ABOUT ABOUT User ABOUT Photo ABOUT Add Seasonal ABOUT Profile Recipes Comments Contact Sign Up Edit Password Reviews Title Add Rating Quick & Easy Support Forgot Password Edit Favorite Recipes Ingredient Top Rated Terms of Use Reset Password Profile Photo Directions Healthy Create Recipe Number of Servings Edit Recipe Nutrition Value Edit Review Favorite SousChef UX case study by Calvin Lam page 13

14 FEATURE PRIORITISATION HIGH PRIORITY Recommended Dishes Menu Planner Text to Speech User Signup User Login NICE TO HAVE Video Edit Reviews Shopping List Edit Recipe Category Filter Scale Recipe Follow a User Unit Conversion Community Forum Voice Recognition Timer Search Recipe Motion Detection Nutrition Information Recipe Reviews Add Favorite Recipe Recipe Photo Social Media Sharing Edit Profile Profile Photo Recipe Rating ESSENTIAL LOW PRIORITY SousChef UX case study by Calvin Lam page 14

15 Cores & Paths This process starts with the core content and work outwards from there. This helps to identify gaps after initial conception, and prioritize how elements appear in design. Inward Paths Google Internal search Main navigation Social media Other site referrals invitation User Goals Search for a recipe View recipe content. Add their own recipes. Core Functions Supporting Info Business Goals Gather data on user behavior Increase number of unique hits Increase application awareness -Text to speech for recipes both mobile and desktop -Motion control for desktop -Search recipes for registered and non-registered users -Recipe information:ingredients, instruction, and nutrition -Ratings and Reviews -Instruction on how to use site features Outward Paths Bookmark Print Social media sharing to friend Rate or review Subscribe Trigger Words Core Elements Call to Action Recipe audio Motion control SousChef Audio of recipes Motion control Recipe information Search for recipe Sign up Share recipe SousChef UX case study by Calvin Lam page 15

16 User Flow Intra-site page view Enters from external site Ajax content From external site Javascript event Redirect User logged in Signup form Login form User clicks Sign Up User clicks Sign In Home page User searches recipe User clicks Sign Out Search result Edit recipe form Edit account form New recipe form User clicks Edit Recipe User clicks Edit Account User clicks New Recipe Dashboard Recipe comment Recipe rating Social networks If not logged in. If logged in. Recipe page User clicks Add Comment User clicks Rating User clicks Share/icons User clicks audio or webcam controls Recipe page plays audio and displays recipe information SousChef UX case study by Calvin Lam page 16

USER CASE ANNA WU 23~SAN FRANCISCO~SALES ENGINEER Anna Wu is a busy making dinner for her date later. She was being really ambitious and chose a hard recipe.

17 USER CASE ANNA WU 23~SAN FRANCISCO~SALES ENGINEER Anna Wu is a busy making dinner for her date later. She was being really ambitious and chose a hard recipe. She s already got her outfit on and her makeup finished.anna really doesn t want to get any food on her since her date is coming by soon. Using SousChef,Anna listens to the audio of what she needs to do for each step of the recipe. When she loses her place, she can wave her hand to pause it and scroll back. Her date arrives and she has dinner ready while looking cool. SousChef UX case study by Calvin Lam page 17

18 LOW FIDELITY SKETCHES & PROTOTYPES

19 Paper & Pencil Sketches I didn t have a lot of experience sketching and wanted to gain practice doing quick mockups that could be changed easily. These are sketches for initial home landing page, signup/signin, search result, and recipe page. SousChef UX case study by Calvin Lam page 19

20 Paper & Pencil Sketches These are sketches for recipe page, review pages, social media screen, user ratings, user profile pages, and new recipe form. SousChef UX case study by Calvin Lam page 20

21 Sign Up Sign Up Theory The application is a free service, and sign up is not required to use the app. However, having users register is important in gathering data on who users are, and their activity for future analysis. I tried to make the introductory home page based on the Fogg Behaviour Model to persuade users based on motivation, ability and triggers. It s easier to make a task easier than to boost a user s motivation. The signup form is only one screen after some introductory information explaining the application. SousChef UX case study by Calvin Lam page 21

22 Low Fidelity Wireframes Balsamiq These are wireframes done with Balsamiq before turning into higher fidelity wireframes using Photoshop. I wanted to try to try a prototyping application and see how it compared to pen and paper. I actually preferred using pen & paper for a low fidelity method. These are both a desktop version, and a mobile version of the application. The screens here are the initial splash screen or home page. SousChef UX case study by Calvin Lam page 22

23 User Data Collecting Analytics There are a lot of tools to gather user data for analysis like MixPanel and Flurry. I decided to go with Google Analytics because of it s ease of use and the amount of features it has for free. Google Analytics provides a lot of information about the user from where they are being referred to SousChef to how they are using the site or the total number of pageviews. The data would help show what areas of the application are attracting users, or where the drop off points are in the application. This would make it easier to design accordingly like showing more healthy recipes if that s what attracted users. SousChef UX case study by Calvin Lam page 23

24 LOGO

25 BRANDING Design Exploration Minimal typographic logo that was inspired by restaurant fonts. Mobile device mascot with a chef hat. Using cutlery to separate Sous and Chef A simple smiley face wearing a chef hat. Looked cliche and cheesy. Mobile device with chef hat, but more emphasis on the mascot Chef hat separating Sous and Chef to evoke a button or a badge SousChef UX case study by Calvin Lam page 25

26 Final Logo SousChef UX case study by Calvin Lam page 26

27 DESIGN

High Fidelity Wireframes Mockups These are wireframes done with with Adobe Photoshop before converting to HTML/CSS for the working prototype.

28 High Fidelity Wireframes Mockups These are wireframes done with with Adobe Photoshop before converting to HTML/CSS for the working prototype. These are both a desktop version, and a mobile version of the application. The screens here are the initial splash screen or home page. The landing page with a search box so any user can immediately look for a recipe. Next section on scroll that provides more information on what the application can do. SousChef UX case study by Calvin Lam page 28

29 High Fidelity Wireframes Next section on home page that has a video demo of what SousChef is like in actual use. Example recipes that are pulled from the application s database based on previous search. Last part of home page that has call to action for user to sign up. Menu expanded after sign up. Search results based on user input. Search is powered by web-scraping Epicurious and adding selected data into database. SousChef UX case study by Calvin Lam page 29

High Fidelity Wireframes The recipe page for mobile only supports audio playback, but desktop version can use webcam for motion control if user grants access.

30 High Fidelity Wireframes The recipe page for mobile only supports audio playback, but desktop version can use webcam for motion control if user grants access. Video screen has button overlay for hands free control of recipe page. Instructions provided above the video screen. Both versions also display the recipe information and comments and ratings. Recipe information is displayed as a popup that can be closed by touching outside the modal or the close button. User can share recipe by the share button that will have media icons fade in and fade out. SousChef UX case study by Calvin Lam page 30

31 High Fidelity Wireframes Profile avatar of registered user with their username displayed. User profile page also displays the recipes they have added. New recipe form for registered user. Ingredients and instructions converted to audio for playback. Content hosted on S3. The user can also edit their recipe. There are fields for nutrition information that the user can provide, but the default value is set to N/A. SousChef UX case study by Calvin Lam page 31

Rating section has the average rating calculated from all users, and the users rating is updated

32 High Fidelity Wireframes User can add comment by expanding text area. Comment section shows all comments for that recipe. Rating section has the average rating calculated from all users, and the users rating is updated asynchronously. Custom error pages for the different status codes. This error page is for an internal error 500 status code. SousChef UX case study by Calvin Lam page 32

33 Thank You Calvin Lam

P R OJ E C T K I C K O F F

P R OJ E C T K I C K O F F P R OJ E CT KICK OFF WHAT WILL MAKE TODAY SUCCESSFUL? CODEPEN REDESIGN USER RESEARCH CODEPEN REDESIGN User Survey Data 461 people responded Which most describes your CodePen usage? Tinkering/Scratchpad