Application Design I | Task 4: Final Project Hi-fi App Design Prototype
16/12/24 - 12/1/24 | Week 13 - 16
Iman Mikudim | 0338004 | Section 1
Application Design I | Bachelor of Design (Hons) in Creative Media
Task 4: Final Project Hi-fi App Design Prototype
SECTIONS
| Feedback
INSTRUCTIONS
1. Brief
2. Process
(i) Wireframes
Fig 1.1
Landing Page | Week 15 (30/12/24)
Fig 1.2
Login Page | Week 15 (30/12/24)
Fig 1.3 Forgot Password Prompt | Week 15 (30/12/24)
Fig 1.4
Sign Up Page | Week 15 (30/12/24)
Fig 1.5 Select Delivery Address, Add New
Address and Pickup Outlet
Selection | Week 15 (30/12/24)
Fig 1.6 Menu Selection Page | Week 15 (30/12/24)
Fig 1.7 Selected Menu Item Page | Week 15 (30/12/24)
Fig 1.8
Offers Page | Week 15 (30/12/24)
Fig 1.9 Tracker & Delivery Status
Page | Week 15 (30/12/24)
Fig 1.10
Profile Page | Week 15
(30/12/24)
Fig 1.11 Cart Page | Week 15 (30/12/24)
(ii) User Flows
a. Initial User Flow
User Flow 1 (Login process)
-
In the login page, user enters email/phone
number and password.
-
After pressing login, user is directed to
the menu page (main page).
User Flow 2 (Ordering process)
-
User selects one of the saved address and is
brought back to menu page.
-
User selects a beef pepperoni pizza.
-
User proceeds to customize it by selecting
pizza size (regular), crust (new york crust),
and additional toppings (1x beef pepperoni, 1x
mozzarella cheese, 1x cherry tomato).
-
User then adds pizza to cart.
-
In the cart page, user selects delivery
option (deliver now).
-
User then proceeds to place order and is
directed to the tracker page to view order
status.
User Flow 3 (Tracking process)
-
In the tracker page, user clicks on the “view
status” button and is directed to a live
tracker page with details of the delivery
order.
Comments After User Testing
-
Add the keyboard UI to make it more
realistic.
-
Add a circle background for the “back”
button as there’s not enough contrast.
-
Give the option to toggle between delivery
and pickup.
-
Instead of just selecting a saved address,
show the process of searching and saving a
new address as it’s one of the most
complaint feature in the domino’s app.
-
Allow to filter pizza by “beef” using the
filter options.
-
Dont just display it, but give the option
to actually apply voucher.
-
Provide a confirmation feedback popup that
the order is placed successfully.
Fig 2.1
Initial User Flow Walkthrough | Week 15
(30/12/24)
Click HERE
for the link to the initial user flow. (Note:
Change the "All Screens" page to "User Flows"
page to view the 3 different user
flows).
Fig 2.2 Initial User Flow (Figma) | Week 15
(30/12/24)
b. Revised User Flow
Fig 2.2 Initial User Flow (Figma) | Week 15 (30/12/24)
Click HERE
for the link to the revised and final user
flow.
(Note:
Change the "All Screens" page to "User Flows"
page to view the 3 different user flows).
Fig 2.3 Final User Flow (Figma) | Week 15
(30/12/24)
Click HERE for the link to the final UI kit.
Fig 2.4 Final UI Kit (Figma) | Week 15
(30/12/24)
Fig 2.3 Final User Flow (Figma) | Week 15 (30/12/24)
3. Final
Click HERE
for the link to the final hi-fi app design prototype.
Fig 3.1 Final Hi-fi App Design Prototype (Figma) | Week 15 (30/12/24)
Fig 3.2 Final Prototype Walkthrough | Week 16
(11/12/24)
Fig 3.1 Final Hi-fi App Design Prototype (Figma) | Week 15 (30/12/24)
FEEDBACK
Week 15 (30/12/24)
Specific Feedback:
-
Everything seems good, not many changes needed.
-
Make sure the back button for the cart page is linked.
REFLECTIONS
Most of the heavy lifting was already done in Task 3, and Task 4 primarily involved adding colors and images where necessary. The next step was to develop the usability flows and test for any additional improvements. Fortunately, there wasn’t much I needed to change in this task, and I managed to complete everything just in time. I would like to extend my gratitude to Mr. Zeon for his informative lectures and for providing us with sufficient materials to support us throughout this journey.
