Plate Planner

UX documentation

Plate Planner - Main Navigation

Meal Planner

Browse Meals

Shopping List

Weekly view of available meal slots.

Find meals and recipes to add to your meal

planer.

Once meals are added to the Meal Planner, the

ingredients are automatically added to the
shopping list.

Tab filter at the top switches between This Week

and Next Week.
Multiple meals can be added to a day, this turns the
day slot into a slidable carousel

Tab filter at the top switches between For

You (personalised content) and More traditional browsing of categories.

Plate Planner - User Journey

Step 2. View Meal

Step 1. Browse

Step 3.1 Add Meal

Step 3.2 Choose a serving size

1b
1a

3a
3b

3d
3e

2c

1c
2b

2a
3c

1a. For You

Displays suggested meals based on personal
preferences configured during Sign Up process

2a. Ingredients / Directions

Toggles between the required ingridients and the step
by step directions to cook the meal.

3a. Whos cooking

Dropdown will display all household members. Only
one can be marked as the meal cook.

3d. Whos cooking

Once a person has been selected from a dropdown,
their name gets populated into this field.

1b. More
Displays different categories and a search entry box.

2b. Bookmark
Saves the meal for later into a bookmarks folder. This
does not add the meal to the planner.

3b. Serving size

Dropdown will be displayed with household members
names. Minimum of 1 can be selected.

3e. Serving size

Dropdown displays the household members

2c. Add to Planner

Starts the process to add the meal into the planner

3c. Confirm CTA

CTA will remain greyed out/unclickable until process is
complete (see Step 5).

1c. Select a Meal

User selects a chosen meal e.g. Chicken Curry.

Plate Planner - User Journey

Step 4. Meal added to Planner

Step 3.3 Select a Day

Step 5.1 Shopping List

Step 5.2 Purchased

5c
5a
5b

5c

4a

3f
4b

5d
4c
3g

3f. Select a day

User clicks on a day of the week and the meal name
fills into this slot

4a. Meal added to Meal Planner

The meal appears in the planner on the users chosen
day.

3g. Confirm CTA active

At this point the CTA becomes clickable (no longer
greyed out)

4b. Browse
The user can continue to browse for more meals.
4c. Shopping List
The user can see the ingredients from the meal have
been added to the Shopping List

5a. Ingredients/Purchased
Tab filter to move between items that need to be
purchased, and those which have been marked as
bought.
5b. X
Clicking the X next to any item will move it from the
Ingredients tab into the Purchased tab, viewable in
the next step.
5c. Share
Share your shopping list via Email or other messaging
services.

5c. Crossed off items

Once a user has selected the X linked to an item (5b)
then the item will appear under the Purchased tab
5d. Clear purchases
Clicking this button will remove all items from the
Purchased tab

Plate Planner - Sign Up Process Journey

Step 1. Landing Screen

Step 2. Sign up with

Facebook

Step 3. Create New or

Join Existing household

Step 4A.1 Create New/

Invite Your Friends

Step 4A.2 Request sent

3a

3b

User can choose 1 of 2 paths:

3a. Create New
User can create a new household and invite
their friends
3b. Join Existing
If someone in their house already has Plate
Planner, the user can join an existing
household

Step 6. Diet & Allergies

Step 5. Cuisines

User preferences will be used to

generate suggested meals after
sign up process is complete.

Step 4B Request sent