SAVR app — cook awesome recipes in under 30 minutes

Challenge:

Create a new feature for the SAVR recipe app that lets users substitute ingredients within their favorite recipes (the brief was to develop this new feature only, not redesign the entire app experience).

Solution:

Using user research and competitive analysis, I developed an easy and intuitive approach to make ingredient swapping a breeze.

Role: Creative Director / Visual Designer

The situation

SAVR is a mobile app that provides awesome recipes that can be cooked in under 30 minutes. As lead UX designer, my challenge was to create a feature that lets users substitute ingredients.

User research

The brief included feedback from SAVR users, which provided insight into their needs and how to make this feature as useful as possible. I studied the user research to understand users’ needs, and what motivates them to swap recipe ingredients.

Each user was asked “Why do you substitute ingredients?” 

Read their responses below:

Competitive analysis

For my competitive analysis, I looked at food-related apps and out-of-category apps with relevant “switching” features to inspire ways to swap recipe ingredients.

Ebay

Ebay had a switch to toggle between all search results and those with guaranteed 3-day shipping. This might be a good way to switch between the default recipe and a vegetarian version.

Apple iOS Music and Mail apps

The Apple iOS Music and Mail apps make it simple to reorder playlists and mail accounts. Users tap and drag the grabber bar to rearrange items into the desired order.

Trello: 

Trello is clever. Users update the status of their “To Do” list by dragging tasks between columns. The task playfully tilts at an angle and has a shadow that provides visual feedback to the user.

Weight Watchers app

Members can use the app to track the foods they eat, and to look up healthy recipe options. Users can remove and add ingredients. To remove ingredients, users swipe left and tap the red “Remove” button. This seems like a compact and efficient way to delete an item.

One thing I didn’t like is that there is no “swapping” feature—removing ingredients and adding ingredients are separate tasks instead of being integrated into one feature.

SAVR: existing design

I examined the existing SAVR layout and features, and observed the following:

Sketches

I began by doing a Crazy 8’s exercise. Crazy 8’s are a sketching tecnique where designers create 8 sketches in 8 minutes to rapidly ideate on potential design solutions. The exercise generates a range of ideas that require very little time or investment. If any of the concepts are viable, they can be developed further. 

I tried a toggle switch to display vegetarian alternatives. I also liked the “swipe left” feature to delete or substitute ingredients:

Prototype

I re-drew my screens more accurately and worked out some additional layout details. Using Marvel, I created a simple prototype to test the new SAVR features with users. 

User testing

I tested the prototype with users by asking them to perform a simple task: 

Let’s say you wanted to substitute mayonnaise for a different ingredient, balsamic vinegar. How would you do that?

I observed the user and took note of pluses (what went well) and deltas (what needs improvement):

Pluses (what went well): 

The user felt that the interface was intuitive and easy to use. No guidance or explanation was needed to complete the task.

Deltas (what needs improvement): 

The user tapped directly on the ingredient name instead of the double arrow icon. It might be a good idea to test different icons to see if there is a more intuitive solution.

When selecting an alternate ingredient, the user felt that the modal window should say “swap,” “substitute,” or “replace,” instead of “add.” 

Visual design

After validating my initial sketches and low-fidelity prototype with user testing, I proceeded with high fidelity visual design and prototyping. Visual design for each of my screens was developed using Sketch. For high-fidelity prototyping I tried a new tool, InVision Studio. InVision Studio enabled me to animate the new product features, such as a toggle switch (for vegetarian options) and the slider used to swap items in the ingredients list. 

Featured below are details of my design development:

Next steps

• Conduct additional user testing

• Iterate the visual design and usability based on user testing feedback

• Add ability for users to “like” or “upvote” ingredient substitution options