SAVR app

Cook awesome recipes in under 30 minutes.

SAVR is an 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. The brief was to develop this new feature only, not redesign the entire app experience.

Deliverables: Sketches, visual design, prototypes.

Role: Competitive analysis, user testing, visual design.

Tools: Sketch, Marvel, InVision Studio, Adobe Premiere.


02_savr_hero_wide.jpg

View the product demo:

savr_hero_1.jpg
savr_hero_2.jpg

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:

savr_user_research_1.jpg
savr_user_research_2.jpg
savr_user_research_3.jpg

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.

ebay_analysis.jpg

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.

apple_music_analysis.jpg
savr_apple_mail_analysis.jpg

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.

savr_trello_analysis.jpg

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_weight_watchers_analysis.jpg

SAVR: existing design

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

savr_existing_design.jpg

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 decided to try a toggle switch to display vegetarian alternatives. I also liked the “swipe left” feature to delete or substitute ingredients:

savr_sketches_1.jpg
savr_sketches_2.jpg

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. 

savr_marvel_prototype.jpg

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):

savr_pluses_and_deltas.jpg

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. 

savr_toggle.gif
savr_slider.gif

Featured below are details of my design development:

savr_swap_ingredient_modal.jpg

Next steps

I have defined the following next steps for further development:

  • 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