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!
How I created a feature to help users substitute ingredients!
1. Competitive Analysis
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.
Generating Ideas with Crazy 8's
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 overlayed on the screen.
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 a Paper 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 mayonaisse for another ingredient.
The main feedback I got from testing was:
"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