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


Challenge (WIP): 

Add an ingredient swap feature to the SAVR Recipe app 

User research

Users of the SAVR Recipe App love the app, but would like to see a feature that allows them to substitute ingredients in several situations. The most common reasons for wanting this feature are shown below:

Based on this feedback, I set out to design a new feature that would allow users to switch out specific ingredients for reasons of preference, availability and/or dietary needs as easily as possible. 

Competitive Analysis

Knowing that the main function of this new feature is to switch ingredients, I used examples from apps I already use and researched sites such as Uplabs and Ptrns that have interfaces focused on making choices with as few steps as possible.

One such app feature is found in Mac Mail:

Ex. a: Mac Mail inbox swipe feature

Mac mail swipe feature

Another example was found on Uplabs, for a credit card switching feature:

Uplabs checkout flow

Also found on Uplabs: This nice interface that has one button that when selected, opens up multiple options. This could be useful to quickly choose vegetarian/vegan recipe versions: 

Ex c:  tap-bar button that expands to offer more choices


Crazy 8s

After studying the Competitive Analysis examples, I used the Crazy 8s method to quickly sketch out some ideas. I got a little carried away with some of the options, but those ideas might be helpful in further iterations.

  • 1- use a swipe feature similar to Mac Mail, pulling left to reveal different options
  • 2 - large radio button similar to button in tap-bar example from Uplabs
  • 3 - pull up feature rather than swipe feature to reveal different ingredients
  • 4 - radio button option selected with option to make choice a permanent feature
  • 5 - radio buttons at the top of the recipe for various dietary needs would automatically switch out all affected ingredients. For example, if you choose "Kosher", any milk-based ingredients would automatically be switched out because meat can't go with dairy.
  • 6 - option to save whatever radio button was chosen as a permanent feature in the account.
  • 7 - Allergy radio button. If selected, a drop-down or pop up shows items to select for allergies.
  • 8 - Random: individual options remain for issues such as not liking an ingredient or being out of an ingredient. drop down asks what ingredients you do have on hand to substitute.

3. Sketched Solution

The Crazy 8s exercise was fruitful, and there were a lot of ideas that came up in just 8 minutes. Working on the finished
sketches, I refined some of the ideas from Crazy 8s to streamline the process for the user and make things as simple and elegant as possible. I mostly drew from the Mac mail interface and the tap bar examples from the Competitive Analysis.

Templates for iPhone from Oleg Sukhorukov:

4. Paper Prototype

The next step was to create a paper prototype using Marvel App to give me an idea of how the app would flow. Please
click on the link to test the initial solution:

5. Visual Design Elements

Before creating a final prototype of the app, I created some visual design elements in Adobe Illustrator for the new options so that they could be included in the prototype animation. Since SAVR is already designed, the aim was to match the current icons to the existing icon style.

Michelle Bocklage

I'm an illustrator and visual designer living in the NYC metro area

View Portfolio


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