Plant Jammer

Project image

Project goal

Reimagine an AI-powered recipe ingredient substitution UX

Plant Jammer uses Artificial Intelligence (AI) to provide dynamic recipes for small brands, retailers, and large food & beverage brands. Because the recipes are dynamic, users can substitute ingredients and get real-time cooking instruction updates. The Plant Jammer team seeks focused inspiration from the UX Design community. The challenge is to go from zero to one and rethink the experience of substituting recipe ingredients and share ideas through 2-3 unqiue design concepts.

My roles

  • UX/Interaction design
  • Case Study
  • Usability Tests


  • Ingredient Substitution
  • Digital Recipes
  • User Engagement


  • Figma
  • Whimsical
  • Illustrator


  • Plant Jammer


Early data shows lower-than-expected user-engagement with the current ingredient substitution experience. Increasing user engagement is important, because it can be measured and leveraged to help Plant Jammer sell their solution.


Example of Plant Jammer's current ingredient substitution experience

Desk Research

Why does substitution of ingredient matter to consumers

Health Plan
Improve the eating pattern

People want to replace some ingredients in the current recipe with healthier options. For example, replace the fat in baking with a low-calories substitute.

Special Diets
Cook for specific conditions

For some types of diets such as vegan, halal ,and paleo, the way people choose ingredients for cooking varies based on specific restrictions or preferences.

Lack of Ingredients
Do not have it on hand

When the ingredient is not available in the kitchen or it is too expensive to purchase, ideal alternatives will give a smoother meal planning journey.

Why does substitution of ingredient matter to food brands and retailers

Retain Traffic
Increase cart value

If users are not able to get all the ingredients on the retailer's website they will probably navigate to another retailer’s site. Substitution increases the ingredient availability and makes the users stay longer and shop more.

Engage Shoppers
Enchance experience

Helping consumers to adapt to unfamiliar ingredients can enable them to gain valuable cooking insights and have a more enjoyable shopping experience.

Typical Ingredients that Need Substitutes

ingredient examples

Reasons for the Bad Ingredient Substitution Experience

Do not realize the differences in cooking methods


Fail to understand the complex roles of the ingredient


Do not know how to tweak the amount of substitutes


Divergent Thinking

What are the causes of low user engagement?

What can be the solutions?

Current Ingredient Substitution Experience Design


Simple and clean, easy to follow
Responsive cooking methods and amount adjustment are helpful.


Confusion -
It is good it can have all dropdowns expanded but it is also making substitutes indistinguishable from other ingredients.
Sometimes the order of ingredients changes after substituting certain ingredients.

Call to Action -
Unclear accordance because the swap icon stays the same color as texts, hard to stand out.
Users lack the drives to try the substitutes.

Attractiveness -
The graphics of ingredients are not appealing enough.
Cannot inform users of the final appearance of the dish.

Traditional Methods

Flicking through cookbooks or browse recipe websites for substitution insights

Ask professionals or friends for ingredient substitution tips

Risk of failure due to lack of experience and knowledge, as well as the gap in cooking skills

Improper guidance eventually causes food to expire and waste

Intelligent Solutions

AI-powered ingredient database to offer consistently reliable and trustworthy contents

Smart recipe equipped with features of changeable ingredients

Responsive cooking methods and amount adjustment

Informative analysis to evaluate the ingredient selections

Digital Substitutions Experience Study

case studies

Types of Substitution Interactions and When to Use Them

These are 4 variations of substitution interactions that can be classified according to the cases in the last section. They have different performances when applied under different scenarios.

interaction types

So, which is the most suitable interaction when it comes to digital recipes that support ingredient substitution?

Scalability: High
According to Plant Jammers sample recipes, the number of substitute options can be up to 10.

Similarity: Medium-high
There are no obvious clues indicate that certain ingredients will stand out compared to others.

Preference: It depends
Some people already have what to cook in mind while others might want to explore a little bit.

Complexity: Medium
Typical ingredient information could include: ingredient name, ingredient image, and the amount.

Familiarity: Low
It is not quite likely that users look at a recipe of which dish they are experienced to cook.

After comparing with the chart above, it turns out:
1-Thumbnail/ Side menu > 4- Popup window >2-Dropdown lists > 3-Slides

Let’s try the first three interactions (1, 4, 2) in the design!


Substitution Interaction Design

Interaction ONE - Sidebar menu

The ingredient card consists of an optional field on the left and an image of the ingredient on the right. All substitutes are listed in the side menu and more can be seen by scrolling down. Users only need to select their favorite ingredient on the left side to see the updates of the image and the required amount.

Interaction TWO - Popup window

The ingredient card only shows the selected ingredient and there is a swap button in the upper right corner. Users who want to replace the current ingredient can click on the swap button and see all the substitutes in a popup window. After selecting one of the substitutes, the ingredient card will replace the contents with the info of the selected one.

Interaction THREE - Dropdown lists

The image and information of the original ingredient are displayed in a row of the selection input field. Clicking on the dropdown button will expand the dropdown menu where lists all the substitutes. Users can select the substitute they like or click anywhere outside of the dropdown to close it and keep the current choice.

Shoppable items

If food retailers or food brands publish their recipes on their websites, it is useful to indicate whether users can directly purchase the ingredients mentioned in the recipe. Having these shoppable items featured with a cart icon () to add the ingredient to the shopping lists helps convert recipe ingredients directly into revenue-generating experiences.

Other Shared Components

Quick Customization

Quick Customization

Diet trends

Provide trending dietary options to let users quickly substitute the current ingredients with food that conform to their preferable eating habits.

Insights and motivator

When users do not have obvious eating preferences, these keywords also provide them with suggestions and insights on healthy eating.

Educate and learn

Users' lack of relevant knowledge of the benefits of ingredients is one of the reasons for low engagement. This feature can also make users better understand the effects of various food.

Recipe Analyzer

Recipe Analyzer

Calorie and Nutrition Calculator

The calorie and nutrition calculator helps users to get more informed about the benefits of the combination of various ingredients. It is useful to guide users to make more suitable choices of what to eat and increase user engagement.

The Radar Chart of Recipe Ratings

To create good ingredient experiences, The following points are crucial:

  • The substitutes are easily available. (Availability)
  • It will not reverse the flavor and texture of the original recipe. (Similarity)
  • The cooking method is not becoming too hard (Convenience)
  • It remains in healthfulness value (Health)
The radar chart rates and visualizes the above standards to make users more confident of the outcomes of cooking.



As an indispensable component of the recipe, the instructions are designed with progress indicators to make users easy to follow the steps.


Comments from other users also provide valuable insights into interesting substitution experiences. It also provides clues of “tried and true” to make the recipe more reliable.



Preference Testings

To evaluate which concept is better (noted that the only variance between the 3 concepts is the substitution interaction), I posted 4 preference tests and recruit/invite users to choose from three design concepts. The tests establish four criteria of design usability.

tests screenshot

Testings Results

resting results


The main purpose of Plant Jammer is to increase the user engagement of ingredient substitution, so the most important criteria could be clarity and engagement. It means the design should clearly embody the substitution features and effectively motivate users to try the substitutes. From the testing results, it shows Concept 1 and Concept 2 both achieve high clarity and engagement potential.

However, when users are more willing to swap between different ingredients, they tend to spend more time completing the task of deciding what to cook. This is why Concept 1 got the lowest responder’s votes in the efficiency test because it largely facilitates the substitution process by displaying as many options at once.

Combining the evaluation results and interaction characteristics, I summarized the strengths and weaknesses of these concepts

concept1 gif
Concept 1


Engaging users
It indicates that there are alternatives for some ingredients. Strongly implied that the ingredient is swappable by displaying the substitutes in the side menu.

Reducing cognitive load
Users do not have to memorize the ingredients alternatives. The available options are easy to see holistically.

Visual impression
The ingredient section stands out visually and seems like an important part.


Scrolling Issue
If users want to scroll in the sidebar to see hidden options, it is easy for them to put the mouse cursor in the outer area then scroll down the whole page.

Overwhelming information
Cooks who do not need to substitute any ingredient, are easily distracted by the contents that do not make sense to them.

Take too much space
The size of the ingredient card is big. If there are a lot of ingredients in the recipe, users will have to scroll down a lot to see what is needed. It is also hard to adapt to smaller screen size.

concept1 gif
Concept 2


Call to action
The swap icon is standing out. Users have strong motivation to click on to see what will happen and what will be contained.

Easy to understand
It only displays the original ingredients with images. For users who are fine with the original recipe or who are ready to cook, the overall recipe is easy to follow.

Clean layout
It has a decent layout with proper contents just like in a traditional recipe.


Attention switches
The popup window is not very consistent in interaction methods. Users need to switch their attention to another larger window to view the options.

More steps
Users take more steps to substitutes the ingredient: click in the swap button - check options in the pop-out window- select another ingredient

concept1 gif
Concept 3


High Scalability
This design is suitable when there are both numerous ingredient types and ingredient substitutes.

Simple and clean
It has a good balance of info and simplicity and the ingredients are easy to read.


Lack of clarity
Users might not be able to understand the feature of the dropdown menu instantly.

Lack of overview
Limited contents in the collapsed state

Low engagement
It is easy for users to pass the steps of substitution if they are fine with the current one.

Takeaways and Thoughts

Interaction costs of ingredient substitution include efforts of looking for the options, comprehending and comparing recipe information, clicking to select preferable options, waiting for the corresponding contents to update, and memorizing available substitutes.

Recipe ingredient substitution also meets Hick’s law which states that when users are presented with more options, they need more time to make a decision. As users become more involved in swapping between different ingredients, their chances of being paralyzed by the decision-making process increase.

The design prioritizing target users‘ needs can help them to decide what to cook quickly. The feature of quick-customization can save the time navigating through cluttered alternatives and increase the user engagement of ingredient substitutes at the same time.

Concept 1 and concept 2 show a better usability than concept 3, easy to let users understand the purpose of the ingredient substitution design. To float out the final solution, it needs more design iterations based on more users’ feedbacks and the considerations of technical constraints.


View other works