Key Ingredient
The Background
Key Ingredient is a website for home cooks to discover and share recipes. It is currently accessible only as a website; there is no app version. The Key Ingredient website launched in 2005 and it has not evolved over time. There appears to be numerous opportunities to modernize its interface and update its features.
Team
Sole contributor for UX Research,
UX Design and Content
Timeline
8 weeks
Tools
Adobe Creative Suite, Figma,
Google Docs and Forms, Otter, Zoom
To understand which opportunities for improvement would please users, I conducted research that included:
Research Questions
Would recreation of the Key Ingredient website’s popular features as an app please existing customers and attract new ones?
What advantages would an app offer vs. a mobile optimized version of the website?
What type of devices do cooks prefer to view recipes when in the kitchen?
What are the the most important features of a cooking app or website?
How many different websites or apps do home cooks use on a regular basis for cooking, sharing recipes or finding new recipes?
Is there one cooking app or website that is the most popular?
What features are essential? Features such as searching for recipes and printing recipes are considered essential to any cooking app or website.
What features are delighters? Advanced features include a language processor for importing family recipes from paper or favorite recipes from other sites. Competitive products also offered several While You are Cooking tools such as Setting a Timer and Crossing Off Recipe Steps When Completed.
7 research participants completed an online pre-screener survey to collect information regarding their cooking experience and level of technology use. Their ages ranged in age from 31-71. The participants had an average of 37 years of cooking experience.
Next I conducted 30 minute individual Zoom interviews with the participants. The questions were about the role of cooking in their lives and how often a mobile device is present with them while cooking. There was also a survey to rank cooking website features (such as sharing recipes, ingredient substitution, serving scaler) in order of importance.
I discovered during that interviews that there are 2 distinct types of home chefs: Paper Chefs and Digital Chefs:
Paper Chefs: Use websites or apps to discover new recipes but rarely bring a digital device into the kitchen while cooking. Just as likely or even more likely to use a traditional cookbook for recipes.
Digital Chefs: Frequently have a digital device in the kitchen to reference recipes for cooking. Rarely print a recipe.
Post Interview – Affinity Mapping
I captured key interview quotes on sticky notes and created an affinity map grouping key behaviors and preference during tasks such as recipe discovery, cooking by following a recipe and saving recipes for reuse.
Key Findings
Paper or Digital? Home cooks have strong preferences: either they rely on a digital device in the kitchen or they don’t want a digital device in the kitchen.
Website or App? Universal to all users was the preference for websites over apps for discovering and referencing recipes.
My Recipes or Chef Recipes? Users click on search results from sites they recognize as having curated, tested or chef contributed recipe collections. Only a few cooks took the time to collect their family or favorite recipes in one digital collection.
Tell a Story or Keep It Clean? The ability to view recipes online without extraneous page content (chef commentary, ads) was preferred.
Key Outcomes and Recommendations from Preliminary Research and Interviews
No need to create an app version. Optimize website content for Search, Mobile, Printing and Credibility:
Search Most home cooks use search engines to discover recipes and are loyal to trusted sites.
Mobile Refresh website appearance with updated, responsive layouts for mobile and tablet viewing.
Print Ensure printing of recipes is flawless for Paper Chefs: Some print letter size, some index card size.
Credibility Feature chef-curated recipes or encourage ratings and reviews of recipes to give credibility to collection.
Moving to the design phase, I focused on key needs from digital chefs:
Digital Chef Use Case
User Motivations Home cooks want to spend their time enjoying the meal. They want to save time while searching for recipes and cooking.
User Need As a Digital Chef, I want to easily follow the steps of a recipe on my tablet while cooking in the kitchen and not lose my place in the directions.
I looked for solutions (analogous inspiration) in different contexts that may be applied to this challenge of presenting the steps of a recipe in an intuitive and helpful manner. Some examples are:
A Good Ol Fashioned Checklist: Check off items as they are completed.
Microsoft To Do app: Click a task to mark it as complete: completed tasks move lower on the screen.
Google Form progress bar: user sees only part of the steps but knows their progress.
Usability Testing with Low Fidelity Prototype
Test Plan Share a low fidelity website prototype that features a new recipe presentation style to address the following user needs:
Setting Home cooks are standing in the kitchen and frequently moving back and forth between their cooking station and their digital device. Based on this environment the solution should:
- Have a large font for viewing from a distance
- Assist the cook with recognizing what step they are on and what steps they have completed.
Digital Chef Testers
Testing Scenario: You are a digital chef: To cook, you typically follow the steps of a recipes in your kitchen on your tablet (such as an iPad). Starting from the Key Ingredient home page, click on the recipe for Blond Brownies. Successful completion of this test ends when you have viewed all of the recipe steps for that recipe.
Usability Test Tasks:
Key Findings
Testers unanimously enjoyed the digitally optimized recipe presentation. The forward and back arrows to navigate recipe steps were intuitive.
100% of testers reported this viewing style was better than the layout of other cooking websites they have previously used.
A challenge with introducing a new feature is how to ensure users find it. 1/3 of testers needed some assistance to locate the alternative view.
Next Steps
Optimize wording, placement and method for communicating the new feature.
FINDABILITY OF NEW FEATURE
A dismissible message bar was included in the prototype below the recipe picture to help testers locate the digital device optimized view. Some testers had trouble finding it.
A few iterations to improve success in finding the new feature could include placing an extra link to the digitally optimized view to the right of the Directions header (iteration A).
ADDITIONAL OPTIONS TO TEST
Where is the best location for the message bar?
Higher on the page (iteration B).
A modal pop up on any recipe page viewed (iteration C).
Website could detect user has a tablet or phone and is viewing a recipe page and automatically redirect the user to the optimized Cook It view (iteration D).
Key Ingredient Prototype
