Skip to content

Latest commit

 

History

History
113 lines (56 loc) · 4.3 KB

UX-DESIGN.md

File metadata and controls

113 lines (56 loc) · 4.3 KB

User Experience Design

Prototype

Figma link

Site Map

This is the site map of the app. The structures of all the pages in the site map are shown in the Wireframes section below. filename

Wireframes

Account Profile

The user can upload their personal information to the profile, including a profile picture, username, address and self introduction. All their posts can also be accessed from the profile.

filename

Fridge

Image view of fridge, each item is represented with an icon of the user's choice.

filename

Fridge Details

Scrollable tabular view of fridge, listing information about each item inside.

filename

Add ingredient

Prompts the user to enter information about ingredient in their fridge ———— name, expiration date, quantity, and optional notes. After being entered, the ingredient is saved in the 'Fridge' page.

filename

Update ingredient

In this page, user can edit the information for the existing ingredients, including expiring dates, name, quantities and other notes.

filename

Home Page

Home page showing the ingredients in user's fridge with top expiring dates, as well as their most recent plan of meals. Both notes are clickable, and lead you into the detail pages.

filename

Plan Meals Details

Page for planning future meal contents, allows users to type in cuisines of their choice, or ask for recommendation based on their fridge ingredients. The layout is a notebook, each page for a day, and the user can flip back and forward to get to another day.

filename

Recommend Recipes

Provides a list of recipes which the user can make based on what they have in the fridge.

filename

Browse Ingredients (full page ver.)

A place where all ingredient sales post nearby can be browsed. Each page can be opened for more details.

filename

Ingredient Details

Details of an ingredient sales post. Includes key info in the seller's profile, name, amount, and price of the ingredient, and buttons to buy or inquiry through comment.

filename

New Ingredient Post

Page for creating a new ingredient post, prompting the user to enter all information needed.

filename

Browse Meal Invites

A place where all meal invite posts nearby can be browsed. Each page can be opened for more details.

filename

Invite Details

Details of an meal invite post. Includes key info in the seller's profile, name, time, and description of the invite, and button to reserve.

filename

New Invite Post

Page for creating a new meal invite post, prompting the user to enter all information needed.

filename

Log In

Log in page. Click the sign up button to switch to the register page.

filename

Register Account

Register page. Click the log in button to switch to the login page.

filename