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.
View the product demo:
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.
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:
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 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 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:
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:
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.
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.”
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:
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