Tami Buckman


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. 

Key Ingredient website


Sole contributor for UX Research,

UX Design and Content



8 weeks


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 Method

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?

Competitive Analysis

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. 

Feature Comparison

Who I Interviewed

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. 

Chef Testers

affinity map

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

Google Forms

Low fidelity prototype

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

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. 

User Flow

Usability Test Tasks:

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.


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

screen options


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

more options

Key Ingredient Prototype

video preview