Using my phone in the kitchen to try new recipes is a hassle.

I'm sure I am not the only one who has this issue, but it is significant to note that I tackled this pain point from a personal perspective.

Recipes ingredients and steps are almost always written linearly. The implication is that you should follow along linearly as well. Collect and measure out ingredients first, then use them up by executing the recipe instructions. I don't know anyone other than chefs on camera who actually follow this method. You would be hard pressed to find me use one extra bowl to measure out an ingredient before it is contributed to the preparation.

The act of collecting and measuring as I go means a frustrating experience scrolling between the recipes ingredients and directions. It isn't intuitive and I often lose my spot in the preparation. Plus, the more I touch my expensive phone the more likely I’ll dirty it in the kitchen chaos.

To attempt at solving this issue I used my most commonly used recipe app to come up with the following 4 possible UI solutions. 

Depiction of how the Allrecipes ios app functions on mobile while scrolling through a pancake recipe

Depiction of how the Allrecipes ios app functions on mobile while scrolling through a pancake recipe

 

#1 Embedded

 Embeds the relevant ingredients in the directions for each step.

Improvements

  • Easily access the ingredients information while traversing the directions

  • Never lose one’s spot in the directions because scrolling between the ingredients and directions is obsolete

  • Clearly see how much of each ingredient is used in each step of the directions

Problems

  • The recipe length gets longer and therefore there is more scrolling (touching of the phone) required to get to the end

_Embedded-Ingredients-Experience-small.gif
_Embedded 1.png
 

#2 Split-screen

Splits the display so the ingredients and directions are presented simultaneously. As one is scrolled through, the other would scroll with it so that the ‘in focus’ ingredient or direction is always paired on screen with the accompanying ingredient or direction. If the ingredients were used up before the end of the directions this functionality would simply close. 

Improvements

  • Easily access the ingredients information while traversing the directions

  • Never lose one’s spot in the directions because scrolling between the ingredients and directions is obsolete

  • Clearly see which ingredients are used in each step of the directions

Problems

  • Simultaneous scrolling is not graceful and looks broken

  • No other apps/UI function like this

  • This design could be extremely problematic when a phone uses OS level split-screen functionality

_SplitScreen-Experience-small.gif
_SplitScreen 1.png
 

#3 Tabs

Keeps a UI element present for accessing the ingredients even while the user is traversing the directions.

Improvements:

  • Easily access the ingredients information while traversing the directions

Problems

  • the ingredients and directions are not present at the same time so it does require switching back and forth to connect which ingredients are used at which steps

  • The animation to reveal and close the ingredients is quite aggressive, almost gratuitous

  • Shifting UI is confusing and not ideal

_Tap-Experience-small.gif
Tap 1.png
 

#4 Embedded Swipe

 Tap or swipe on a step to reveal the ingredients used in the directions.

Improvements

  • Easily access the ingredients information while traversing the directions

  • Never lose one’s spot in the directions because scrolling between the ingredients and directions is obsolete

  • Clearly see how much of each ingredient is used in each step of the directions

Problems

  • The ingredients obscure the directions which could mean unnecessary back and forth to connect how each ingredient should be measured and then used

_Swipe-Experience-small.gif

The Best Solution

#1 Embedded is my preferred solution. It most gracefully solves the pain point, and looks good while doing it. The problems, a slightly longer directions length, are minor compared to the other approaches. To develop this feature the ingredients could simply be programatically parsed and inserted into the direction based on the text in each step.

Original  Allrecipes in app experience

Original Allrecipes in app experience

Improved  Allrecipes in app experience

Improved Allrecipes in app experience