What is Recipe Builder?

Recipe Builder takes the recipe format and revisualizes it for the mobile device.

Many apps have reinvented traditionally printed materials for mobile devices before. Look at mobile versions of maps, emails and mobile sites. I thought to myself, “Why does using a recipe on my mobile phone feel so uncomfortable?”

Understanding the Amateur Cook

A survey allowed for some insights with questions like:

• What are the most important things to you about cooking?

• What are some important thoughts you have about following a recipe? Any tips?

• Can you tell me about any frustrating moments you’ve had while reading a mobile recipe?

Qualitative data in this category led to prioritizing:

• a highly visual and familiar interface

• ability to disable screen auto-locking

• access to high quality recipes

• accessible ingredients

User interview data provided insights for improvements such as:

• hard-to-read type sizes

• difficulty in UI and layout

• long instructional scrolling

• going back and forth between areas

• saving time as overwhelmingly important

A competitor analysis identified market gaps in positioning this app in its space:

• Recipe Builder would benefit from cooler tones that would differentiate itself from the competition

• Most apps featured basic recipe formatting with scroll-to-read instructions and traditional layouts. This set the stage for Recipe Builder’s visual design and identity. It also validated that re-visualizing the mobile format was still relevant.

The Visual Barometer

When I cross paths with a problem I’d like to solve, I often lead with visual design to identify a framework I’m familiar with.

For example, when it comes to being dissatisfied with a mobile cooking app, what areas of its layout are confusing to the user? How can I use the principles of Gestalt Psychology to make sense of component groupings? How can I bring focus to an important area by using design principles like size and contrasting color?

 The Big Idea

A task flow helped me distill the most important needs for users from the data.

The three biggest tasks for cooks in their process were:

• Choosing a recipe

• Identifying ingredients

• Following instructions

Eureka!

Reviewing vs. Following a Recipe

This process presented an opportunity to improve reading at the interface level. 

There was a key need to review recipes from start to finish to determine a recipe’s appeal alone.

But the format for reviewing the recipe did not need to be the same as when following the recipe for the duration of the experience. The first step involves a review mode: to see the recipe in full first.

Then, move into a new mode specific for assistance with ingredients and instructions.

This instructor mode maximizes screen real estate by adding these UX improvements:

• large visual icons to create a cohesive system of visual measurements to replace long bulleted lists

• progress bars creating an exciting way to run through a recipe without overwhelming the user

• tapping through steps to move around the recipe

• sharing recipes to an app user community

What Users Thought

Observations in usability testing led to an overhaul of menu options in early prototypes. Reducing the user’s cognitive load and providing proper constraints improved flows that made menu options clearer for the user. 

Affordances were examined to improve button appearances. Preferences on the location of particular components such as ingredient measurements, icon systems and recipe reviewing were also validated. Observations were made and addressed for any other friction points at this stage – and final wireframing updates were implemented.

What I Learned

By formatting and dedicating screen space to smaller bite sized pieces of information, users were not overwhelmed by the recipe. Apps in the market focused on features that added to other areas of their brands’ experiences. But most didn’t drastically change the way recipes were presented on a mobile device given the screen size.

By creating separate modes of reviewing versus instructing, and presenting ingredients visually through a system of icons, a new visual format for mobile recipes made it easier for users to follow.

From Conclusions to Iterations

The goal for Recipe Builder was to make a recipe interface seamless and distraction-free. The process led me to take on some additional thinking: if improvements in interface design could make a user less aware of the device, how do we push that experience to the next level? What makes advancing instructions even easier than visual cues, reading and tapping? 

The solution involves adding a feature to implement text-to-speech recitals and voice activated advancing. This makes the physical touch of the mobile device optional for guiding the user. The additional feature would also help solidify the app’s positioning in the space as an easy-to-use recipe tool, focusing on the interaction of the user – while staying competitive in the marketplace with expected and traditional features.