UX-DESIGN.md

User Experience Design

Mealspot Prototype

Our prototype can be accessed by clicking on this link.

App Map

Wireframes

Register

This wireframe represents the register screen, allowing a new user to create an account.

Login

This wireframe represents the login screen, allowing an existing user to log into their account and directing a new user to the register screen.

My Meal Plan (Home)

This wireframe represents the home screen where a user can see their meal plan for the day and how much money out of their weekly budget they have already spent.

Edit Meal Options

This wireframe represents the screen displaying two options for a user to edit a meal in their meal plan for the day. The two options are "choose from saved meals" and "add my own meal", allowing users to pick an existing meal or create a new one from scratch to put into their meal plan.

Choose From Saved Meals

This wireframe represents the screen where a user can choose to swap a meal in their meal plan for the day with one of their saved meals.

Add My Own Meal

This wireframe represents the screen where a user can choose to swap a meal in their meal plan for the day with a newly created meal that is saved as a recipe after clicking the save meal button.

Recipe Search

This wireframe represents the screen where a user can search for recipes. A user can click on a specific recipe to display more information about it.

View and Save Recipe

This wireframe represents the screen where a user can view more information about a recipe discovered through recipe search and save it.

Saved Recipes

This wireframe represents the screen where a user can view their saved recipes.

View and Unsave Recipe

This wireframe represents the screen where a user can view more information about a recipe from their saved recipes and unsave it.

My Fridge

This wireframe represents the screen where a user can view the items in their fridge. A user can add and delete items from their fridge.

Add Fridge Item

This wireframe represents the screen where a user can add an item to their fridge.

My Grocery List

This wireframe represents the screen where a user can view the items on their grocery list. A user can add and delete items on their grocery list.

Add Grocery List Item

This wireframe represents the screen where a user can add an item to their grocery list.

My Account

This wireframe represents the screen where a user can view their account details and log out.