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.
The apps visual design aimed to be clear & legible with obvious indications of what elements could be interacted with.
_iPhone%20X%20%E2%80%93%2022.png)
_iPhone%20X%20%E2%80%93%2020.png)
_iPhone%20X%20%E2%80%93%2025.png)
_iPhone%20X%20%E2%80%93%2026.png)
_iPhone%20X%20%E2%80%93%2027.png)
_iPhone%20X%20%E2%80%93%2028.png)
_Prototype_screen.png)
_Click_Icon.png){kind=icon}
_Prototype_Layout.png)
The prototype – created for user testing - plots out the sign up process, navigating the menus and going through a checkout flow.
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.
_Wireframe.png)
_Wireframe_Mobile.png)
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.
_Style_guide.png)
To ensure the app would work on any device I designed the projects elements to follow 2 rules:
fig. 01 Design on a responsive grid to ensure availability.
_Grid_and_Redline.png)
fig. 02 Design most elements to fit within a given area to maintain consistency.
_Anamtion_Assets.png)
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.
_V1_High_Fidelity_Mockups.jpg)
fig. 01 Original design
_High_Fidelity_Assets.png)
fig. 02 Final design
If you need something designed with a creative solution in mind, please reach out. Let’s see if we can’t help you out!
Say hello
