The design phase consisted of:
Design Proposal: Develop design goals.
Storyboards: Establish user scenarios and challenges the app would assist with.
Interface Design Sketches: Develop ideas for app screens.
Information Architecture: Map what screens the app would consist of.
Annotated Wireframe: Design the various app screens.
After our research phase, we had a better understanding of our users and their pain points. We came up with design goals which are general qualities our app should have and some design requirements which are more specific features we wanted to include.
Create an environment in which users can enjoy cooking and gain confidence in their skills while still making healthy and accessible meals
Provide guidance and motivation for users to plan their meals and explore other options safely and sustainably
Provide new recipes and meal planning ideas for all living situations and budgets
Filter recipes based on dietary needs (allergies, pickiness, special diets, etc.), ingredients, owned, and time constraints
Encourage users to explore out of their comfort zone through automatically suggested recipes targeted towards the user
Contain step by step instructions with clear language that reduces ambiguity and confusion for users and short videos following the recipe with audio and written captions
Assist in meal planning by allowing the user to filter based on categories(groceries required, recipes, time, budget, etc.)and offer a step-by-step plan with reminders (groceries needed, prep time, cooking time, etc.
Allow users to build grocery lists within the app including where to purchase (with budget and time constraints)
Each member of our team created two storyboards using different techniques (hand-drawn and an online storyboarding tool) to envision typical cooking situations users encounter. This step helped us empathize with users and create scenarios in which our app should be designed to improve their cooking experience. The scenarios were informed by our interviews and personas we created during research.
Our app needs to have a flexible functionality to support a variety of use cases.
Our app needs to give step-by-step instructions to users in order to make sure their meals turn out delicious in the end.
Our app needs to provide a creative variety of recipes.
Our app needs to help users determine what groceries are necessary.
We organized each key screen into an information architecture that mapped the pathways between the main interfaces of our app. In the previous step, our interface design sketches already gave us a sense of the main screens our app would include such as the meal planning screen, the explore page, and the profile page. Now, we expanded in each of these pathways and brainstormed how accompanying screens would fit into the user flow.
Takeaways
There will be three main pages: explore recipes, meal prep, and profile.
Each main page will have different functions and user flows.
There will be some connecting pathways between meal prep and explore recipes when users add a recipe to their plan.
Each person in our team sketched five interfaces for the main functions of the app. We described the operations and included a discussion section in which we critiqued the interface on its advantages and disadvantages. These sketches were useful because they provided an outline for our wireframes which came later in the process. The discussion section also increased our design awareness as we took a step back to reflect on potential areas of improvement.
Titles and action labels on the various pages need to be more clear.
More images and symbols should be included in the app.
Elliana's Sketches
Emma's Sketches
Megan's Sketches
We created wireframes for our entire system with annotations that highlight the main features and interactions on each screen. The purpose of this was to solidify our app's key features. We created wireframes for each screen that we listed in our information architecture. The annotated wireframes became a foundation for our lo-fi prototype in the next phase.
We will need to have pop-ups for many of our functions so we need to ensure the layout is the same for all of them to maintain design consistency.
One of the main interactions is adding a recipe to the meal plan so the flow should be clear and easy to follow.