Create a feature for this cooking app that lets users substitute ingredients



Challenge Introduction

Create a feature for this cooking app that lets users substitute ingredients

For this challenge, I worked on designing a single feature for the recipe and cooking app, SAVR.

The challenge brief contains research and comments from SAVR users, which gave me some insight into how to make this feature as useful as possible. 

In addition to explaining the need that users have to substitute ingredients, the brief also gave insight into the different reasons why a user would want to substitute an ingredient

Below is a summary of the research, outlining the main motivations to swap an ingredient

Based on these different users, I knew I would have to design a feature that allows users to find a new ingredient based on preference, availability, and vegetarian options. 

Competitive Analysis

Finding inspiration in other products to create this feature.

I started by checking out some other apps, and seeing how they handle switching options, and recommending new choices for users.

Below are a few screenshots of what I looked at, and some notes on how they might be useful to create this feature for SAVR.



My main takeaways from doing a competitive analysis were:

1. My solution needs to clearly show that it can be switched - this shouldn't be hidden!

2. There needs to be some simple way for a user to choose what ingredient they want to use as a substitute. We want to make it an easy choice - not something that they have to think about!


Using Crazy 8's to generate ideas.

After looking at how some other apps handle a similar feature, I worked on the Crazy 8's exercise to start coming up with some solutions that could be incorporated into the SAVR app.


After looking at my 8 sketches, I decided on combining two of the solutions to create a pretty simple interaction of choosing the ingredient you want to switch, and picking from a list of substitutes that is overlaid on the screen.


Refining my sketches, and going into more detail.

After outlining the basic idea of the feature, I began sketching the screens in more detail, adding some ways to show the categories of different options (eg., popular substitutes, vegetarian). The screens below show how the interaction would work in a little more detail.



Creating and testing my prototype.

After creating my sketches, I used Marvel to create a quick prototype to test.

The animation below shows how the prototype works, with a user being able to switch mayonnaise for another ingredient.

Paper Prototype Using Marvel

I tested my prototype with several users - asking each of them to substitute an ingredient.

What went well?

What needed improvement?

Users clearly knew to press the icon to pull up substitute ingredients

Users understood that the heart icons signified how popular an ingredient was, and said that it would help them make  a choice.

"If you were vegetarian, wouldn't you want to substitute all non-vegetarian ingredients at once, instead of having to go one by one?"

Here's how I solved that in the next iteration of the prototype:



Joe Formica

I started Bitesize UX to help designers-in-training get real UX experience. I also work on these challenges to keep my skills sharp 👍

View Portfolio


Log in to leave feedback, show some love, or ask a question.

Tammie Letroise-Brown

This is a great and easy way to switch to vegetarian! Great submission!!