You are the lead UX designer for SAVR - an app that provides awesome recipes that can be cooked in under 30 minutes.
Many users have reported that while they enjoy most recipes, there are times when the recipe includes a certain ingredient that they want to leave out. Your challenge is to create a feature that allows users to substitute an ingredient in a recipe.
Device & Platform
You will design this feature for the SAVR iPhone app. The recipe screen is included in the attachments - you can use these templates as a reference to start designing the feature. Remember: For this challenge, you don't need to re-design the entire experience - you are only focusing on adding this feature to allow users to substitute ingredients.
Research & User Insights
The research below shows some insight into why users want to substitute ingredients, and what options they would like to see as possible substitutes. You can also do your own research to learn more about how you can recommend great ingredient substitutions for users. The most important part of this challenge is creating a usable feature that helps everyone modify a recipe to meet their needs.
Check out this submission, and use it as an inspiration to get started on your own!
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.
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.
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:
A step-by-step guide to creating an awesome submission