Assignment
This assignment focuses on transforming the case study to screen designs. You are expected to
create UI process flow diagram using wireframes, and an interactive storyboard using mock-ups
for the problem statement provided below.
Use case
The organisers of Sydney Food Festival is looking for a prototype of some screens to get a sense
of what the workflow would look like. You have been brought on board to design a few screens.
You are required to design wireframes and create a UI Process Flow Diagram and an interactive
storyboard for a mobile application for SFFS, based on the use case provided below. There may
be some actions that you might not be able to display in the app. However, please think of ways
to capture that information.
SFFS welcomes customers with a ‘Home Screen’ that offers customers to place an order.
Use case for Order Food
Use Case Place Order
Goal Customer places an order using SFFS
Assumptions All customer orders are to be delivered to their registered spot.
Preconditions Customer has already registered to SFFS
Customer is logged in to SFFS
Customer’s PayPal has been already registered to their account
and verified
Success End Condition Order has been placed successfully
Payment has been processed through PayPal
A summary of the confirmed order has been displayed
The status of the order is displayed to the customer
Failed End Condition Order has not been placed
Appropriate error notification has been displayed
Primary Actors
Secondary Actors Customer
PayPal
Trigger Customer selects the option to create a new order
Step Action
Description/Main Success Scenario 1. System displays an option to customers to place an
order
2. Customer chooses the ‘Place Order’ option
3. System displays restaurants and their description to
the customers
4. Customer clicks on the restaurant they wish to look
into
5. System displays a list of menu items for the customer
to choose from
6. Customer chooses a menu item to view further details
of the item
7. System displays details of the menu item such as
description, image, price per item, and an option to add
to the cart along with quantity
8. Customer adds the menu item to the cart
9. System displays the cart, an option to confirm the
order, an option to update cart, an option to add more
items to the order and an option to cancel the order
10. Customer confirms the order
11. System displays the option to add any comments to the
order
12. Customer adds a comment to SFFS
13. System displays the option to pay for the Order
14. Customer confirms to pay for the order
15. System processes a payment for the total cost with the
pre-registered PayPal details
16. System receives confirmation that payment has been
processed
17. System displays the order id, total cost and the status
of the order
Step Action
Alternative Flows 3a. Customer sees an “Restaurant Unavailable Error” alert
message
3b. Go back to Step 1
7a. Customer chooses not to add the product and decides
to browse for more products
7b. Go back to Step 5
9a1. Customer decides to add more products to the cart
9b1. Go back to Step 5
9a2. Customer decides to update the cart
9b2. System displays an editable version of the quantities
and products items and an option to save
9c2. Go back to Step 9
9a3. Customer decides to cancel the order
9b3. Go back to Step 1
12a. Customer decides not to add a comment
12b. Go forward to Step 13
14a. Customer chooses not to confirm the payment
14b. Go back to Step 9
15a. Payment doesn’t go through
15b. Customer sees an “Oops! Please try again. Update your
PayPal account, if you keep receiving this error
message” alert box.
15c. Go back to Step 13
Task Descriptions
Your tasks in this assignment are as follows:
Task 1: UI Process Flow Diagram
You are required to design screens using a wireframing technique. Use the use case
provided above for creating the UI Process Flow (Navigation) diagram using wireframes.
You can add any form elements you think are appropriate. You can have any number of
screens you think would work.
Task 2: Interactive Storyboard
You will have to create an interactive storyboard using mock-ups. You will be creating
mock-ups for an application on a mobile phone platform (either Android/iPhone is okay).
Your design has to be in sync with the wireframe that you designed in Task1. This is your
place to showcase your creativity.
