Design
With a user flow locked in (for now), we regrouped to sketch and share some ideas about how a Suggested Recipe feature might be integrated into the Imperfect Foods app.
It was important to consider how this new feature could be integrated into the existing Information Architecture, and take on the established branding styles and personality.
![A hand sketch of three screens: A product page that includes a suggested recipe list at the bottom, a recipe information page that provides details and a list of ingredients to add to cart, and a third screen that refines the layout of ingredients on the recipe page.](https://cdn.prod.website-files.com/6233d50a16243aab7d9947d9/623b744d432a90a0033ed300_IMG_2859.jpeg)
While sketching, our team realized that we had neglected to include a "Save Recipe" icon into the initial user flow. We explored both bookmark and heart icons....ultimately landing on bookmarks as a natural mapping between real-world recipe books and Imperfect's interface.
![Another hand sketch that includes a method for saving recipes with a bookmark icon.
This sketch also demonstrates a "bulk add" or "add all" function for ingredients on the recipe page.](https://cdn.prod.website-files.com/6233d50a16243aab7d9947d9/623b742e36bd251b7fdd8e49_IMG_2858.jpeg)
Our
Low Fidelity Prototype brought our sketches to life, and allowed us to explore and test various ways of displaying recipe ingredients and saved recipes.
Link to Figma file here.![An image that displays four low fidelity screens for the Imperfect Foods App. These screens show the new suggested recipe feature, and two options that we tested for listing ingredients on recipe pages.](https://cdn.prod.website-files.com/6233d50a16243aab7d9947d9/625b65d1c77932c7c55a2c6f_Imperfect%20LowFi.jpg)