Shop n' Cook
User-Flow, Style Guide, Wireframes, High Fidelity Mockups, Interactive Prototype, Interactions, Redlines
The whole process of shopping, cooking, and preparing meals can be a time intensive task that leaves many frustrated; so instead they turn to microwave meals or fast food. Cooking shouldn’t be such a hassle. This project sets out to address this problem by combining your shopping & meal planning into one, allowing users to find recipes, buy its ingredients and have it shipped to your door in one simple app.
With visual & motion cues the apps open design makes it easy for users to navigate the app however they choose.
While shopping users are recommended recipes based on the items they have purchased & viewed. Whole recipes can easily be added to your cart with a couple of clicks.
After initial brainstorming & sketching I assembled low-fidelity wireframes, mapped them on a user-flow to aid me in visualizing the elements needed for the project and how users would navigate the app.
After initial brainstorming & sketching I assembled low-fidelity wireframes, mapped them on a user-flow to aid me in visualizing the elements needed for the project and how users would navigate the app.
To ensure the app would work on any device I designed the projects elements to follow 2 rules: 01 Design on a responsive grid to ensure availability (Left), Design most elements to fit within a given area to maintain consistency (Right)
To ensure the app would work on any device I designed the projects elements to follow 2 rules: (left) Design on a responsive grid to ensure consistency throughout the app, (right) Design most elements to fit within a given area to maintain consistency.
After seeking feedback I came to the conclusion that for the app to succeed I needed to make some of the UI elements clearer in the design through iteration. The original design was too busy, making it difficult to distinguish elements from the background. Before (top), After (bottom)
Interested in seeing more?
How about checking out one of these: