17/11/2025 - 28/12/2025 / (Week 9 - Week 14)
Aricia Man Yi Xuan / 0375026
Application Design I / Project 3 / Lo-Fi App Design Prototype / DST60504
Bachelor of Design (Hons) in Creative Media
TABLE OF CONTENT
1. Lectures
2. Instructions
3. Project 3
4. Reflection
LECTURES
WEEK 5 - WEEK 9: click [here]
WEEK 10 / 26/11/2025
This week, we worked in group to analyze a website navigation (Fig.1.1.1).
After that, Mr. Sylvain taught us how to use Figma and we make a simple
Lo-fi prototype (Fig.1.1.2).
|
| Fig.1.1.1 Teams Web Nav / (Week 10, 26/11/2025) |
|
|
Fig.1.1.2 Figma Practice / (Week 10, 26/11/2025) |
Notes:
- Use "Inter" Font
- Margin within 16-18
- Key Notes -
-
Web Nav
- Global (main navigation)
- Local (Navigation within a specific section of the site.)
- Contextual (Links that appear based on what the user is currently viewing)
- Faceted (Filters)
- Supplemental (Extra navigation, often found in the footer, sidebar, or utility bar.)
- UX Hooks
|
| Fig.1.1.3 UX Hooks / (Week 10, 26/11/2025) |
-
When to use hooks?
- First time
- Returns
- Positive touch points
WEEK 11 / 3/12/2025
This week we were introduced to the topic "Usability Testing". Later
on, we have usability testing with others in class and for next week, we
need to get at least 3 users who are not designer for usability test
(& record 3 videos).
- Key Notes -
Usability Test Steps:
1. Plan
2. Pilot
3. Test
4. Debrief
5. Report
WEEK 12 / 10/12/2025
This week we were introduced to the topic "Usability Heuristics" & "Design System". Later on, we have a small activity to find a references and analyze the design principles (Fig.1.1.4).
 |
| Fig.1.1.4 References / (Week 12, 10/12/2025) |
For assessment 3, we'll need to have:
1. Intro slides (Assessment 2)
2. Sketches
1. Intro slides (Assessment 2)
2. Sketches
3. References
4. Lo-Fi prototype
5. x3 Test Videos (Non-Designers - screenshot + link to videos)
6. Report/Insights/Changes
7. What's next
- Key Notes -
|
| Fig.1.1.5 Jakob Nielsen's 10 Usability Heuristics / (Week 12, 10/12/2025) |
Design Principles:
- Most attention: Consistency, Readability, Alignment, Priority
- Balance
- Contrast
- Emphasis
- Unity
- Proximity
- Repetition
- Hierarchy
- Simplicity
- Negative Space
Design System:
1. Design Language
2. Design Kit
3. Component Library
4. Developer Sandbox
5. Documentation Site
 |
| Fig.1.1.6 Design System / (Week 12, 10/12/2025) |
INTRUCTIONS
Fig.2.1.1 Module Information Booklet
PROJECT 3: LO-FI APP DESIGN PROTOTYPE
Description:
Create a low fidelity prototype of the app. Arrange all the screen
wireframes, actions, visual feedback and link them up.
Requirement:
-
Ideation
- Last episode
- Sketches
- Wireframes
- Lo-Fi
- Usability Testing
- Refinements
-
Hi-Fi Prototype
- Visual Design
- UI Kit
- Navigation
Submission:
- Project Files (Figma)
- Video Walkthrough
ROUGH SKETCHES
- WEEK 9 -
|
| Fig.3.1.1 References - Pinterest / (Week 9, 20/11/2025) |
Pinterest Board Link: click [here]
Before starting my wireframe sketches, I first searched for layout
references on Pinterest to get inspiration for the layout navigation flow,
and visual hierarchy to learn how other designers arrange their app
screens.
|
| Fig.3.1.2 Rough Sketches / (Week 9, 20/11/2025) |
After that, I began to sketch all the wireframes on paper,
including:
-
Loading page (Subway
Logo)
- Log In, Sign In, Sign Up, Verify, Get Started page
- Homepage
- Deals page
- Product customization page
- AR feature page
- Saved page
- Cart page > Checkout > Address > Success > Status > Tracking
- Account page
SITEMAP
|
| Fig.3.1.3 Sitemap |
LO-FI DEVELOPMENT
- WEEK 10 -
- WEEK 10 -
|
| Fig.3.1.4 Screenshot of the process in Figma / (Week 10, 26-27/11/2025) |
After gather the references and sketching out the wireframes, I moved
into Figma and started building the lo-fi wireframes.
Progression:
- Used a column and row grid system
to keep the layout clean and consistent
- Drew the wireframes in black and white
- Drew the wireframes in black and white
- Used basic shapes (rectangles, circles) to block
out images, buttons, and sections
- Added
text to define hierarchy and content
placement
- Created reusable components like
buttons, icons, and navigation bars (Fig.3.1.5)
- Used Auto Layout to make screens
scalable and easy to adjust
- Connected screens using
prototype links
|
| Fig.3.1.5 Components |
- Landing Page -
 |
| Fig.3.1.6 Landing Page / (Week 10, 26/11/2025) |
Landing Page
I designed a very simple landing page with only the
Subway logo and a short greeting. There’s a clear CTA button for users to start
either sign in or sign up. After
that, a confirmation screen appears to tell users they are all set
and continue to the homepage.
- Homepage & Product Page -
|
| Fig.3.1.7 Homepage & Product Page / (Week 10, 27/11/2025) |
Home Page
I designed the home page to show all the main
categories when users scroll such
as product, promotions, and saved. At the bottom, there's a fixed
navigation bar with "Home, Menu, Cart, Saved, and Account icons" to help users move around
quickly.
Product Page
For this page, I designed
category cards so users can
browse based on what they want. When they click a category, the page
will show the related products immediately.
- Customization & AR Page -
|
| Fig.3.1.8 Customization & AR Page / (Week 10, 27/11/2025) |
Customize Sandwich Page
I designed a
step-by-step customization page where
users can choose their bread, vegetables, sauces, and toppings. There’s an
AR icon beside the product so users
can click to view AR.
AR Preview Pages
For the AR section, I created multiple screens to show different steps of
customizing the sandwich in AR. Users can
rotate or enlarge
to see the portion and the size of a sandwich. There’s a
price information and an “Add to Cart” button at the end.
- Cart Page, Checkout, Tracking -
|
| Fig.3.1.9 Cart, Checkout, tracking Page / (Week 10, 27/11/2025) |
Cart Page
The cart page lists all the selected items, including
quantity, price, and an edit
option.
Checkout Page
I designed it with a
delivery time section and a
small map so users can preview the
route. There’s also an option for users to
change the outlet if they want to
pick a different location, and I included multiple
payment methods.
Address Page
For the address page, it has
input fields for users to type
their details.
Cart Empty Page
I designed an empty state with an illustration. There’s a short message
telling users their
cart is empty and a button to go
back to the menu.
Order Status Page
This shows the delivery progress.
There’s a timeline so users know where their order is, and also a "confirm delivery" button when their delivery arrived.
Tracking Page
I designed a screen that shows the rider icon moving on the
map. There’s an
estimated time so users know when the food will arrive.
- Saved Page, Promotions, Account Page -
|
|
Fig.3.1.10 Saved, Promotions, Account Page / (Week 10,
27/11/2025) |
Saved Items Page
I created a section for
saved items so users can reorder
their favourite sandwiches easily.
Promotions Page
The promotions page uses a card layout to show
ongoing deals.
Account Page
The account page has
basic profile info.
|
|
Fig.3.1.11 Overall Design / (Week 10, 27/11/2025) |
- Usability Test Plan -
|
| Fig.3.1.12 Test Plan / (Week 11, 3/11/2025) |
- Usability Testing with peer -
Peer's Feedback on Lo-fi Prototype (3/12/2025):
- You may add a
back button
in the all sets page after sign in/sign
up so users can go back if they want.
- I don’t know what's the
"fire icon" (calories) means, users
might not understand it.
- The
AR preview icon
is not obvious. Maybe make it more noticeable, and maybe just put it in the
customize page instead of the product page.
- Maybe add a pop-up confirmation after clicking the save button so
users know their action was successful.
- Maybe change
‘Edit’ to
‘Edit Address’ to make it clear what will be edited.
- I might need an
Order History page
after ordering so users can see what they ordered before.
- The delivery methods can come
after users clicked "checkout".
- Usability Testing with non-designers -
Later on, I conducted an in-person usability test with three of my friends.
The test was done by face-to-face at outdoor. I gave them several
tasks:
1. Explore the homepage and use the search bar
1. Explore the homepage and use the search bar
2. Navigate to the Menu page and browse categories
3. Select a sandwich and customize the sandwich
4. Check the calories information
5. Test the AR preview
6. Complete checkout & payment
7. Choose a payment method and confirm order
8. View the order confirmation
9. Track their order
Participant Responses & Observations
Google Drive Link: [click here]
|
|
|
Age: 20
Performance:
He completed the login, customization, and checkout process smoothly. He mentioned the flow felt intuitive.
He completed the login, customization, and checkout process smoothly. He mentioned the flow felt intuitive.
Confusion Point:
Tracking delivery caused some hesitation, as the button placement and
layout were less obvious. He took extra time at this step but eventually
completed it.
Feedback:
1. How easy was it to complete the tasks in the app (from browsing to
payment)?
Good, like normal food ordering app.
2. Which part of the app felt confusing or difficult to use?
Maybe choosing toppings.
3. What feature did you like the most and why?
The tracking order features because I can know the delivery
status.
4. Were there any buttons, icons, or actions that were unclear or hard
to find?
No, but the buttons are a bit not sensitive.
5. On a scale of 1 to 10, how would you rate the overall experience
using this redesign app?
7
|
|
|
Name: Bo Wei
Age: 20
Performance:
He completed the login and search tasks. He interacted well with the customization steps but needed more time to locate the AR preview feature, spending approximately one minute searching.
He completed the login and search tasks. He interacted well with the customization steps but needed more time to locate the AR preview feature, spending approximately one minute searching.
Issues Encountered:
-
Some buttons were not functional during navigation.
-
Limited payment methods.
-
The selection UI for toppings felt unclear, making it harder to confirm whether items were added successfully.
Feedback:
1. How easy was it to complete the tasks in the app (from browsing to
payment)?
If I rate it from 1-10, I think it's a 8 for me to complete this task, it's quite easy, I think it shown appropriately without confusing or difficulties to use.
If I rate it from 1-10, I think it's a 8 for me to complete this task, it's quite easy, I think it shown appropriately without confusing or difficulties to use.
2. Which part of the app felt confusing or difficult to use?
Like what I say, I think the payment can be more options and the
button after choosing ingredients can me more
specifically.
3. What feature did you like the most and why?
I like the AR feature as we can see how our sandwich is done and
overall how its presenting.
4. Were there any buttons, icons, or actions that were unclear or
hard to find?
Like after choosing ingredients, the buttons is not that clear to
understand the instructions of buttons.
5. On a scale of 1 to 10, how would you rate the overall experience
using this redesign app?
I would rate it a 8.
|
|
|
Name: Eric Man
Age: 21
Performance:
The participant was able to complete the main tasks, such as browsing the menu, customizing a sandwich, and going through the checkout flow, although some steps took longer due to unclear icons or non-functional buttons. Despite some confusion and missing interactions, the participant could still follow the general user flow, showing that the core structure works but needs clearer labels, better visibility, and improved usability for specific features.
The participant was able to complete the main tasks, such as browsing the menu, customizing a sandwich, and going through the checkout flow, although some steps took longer due to unclear icons or non-functional buttons. Despite some confusion and missing interactions, the participant could still follow the general user flow, showing that the core structure works but needs clearer labels, better visibility, and improved usability for specific features.
Issues Encountered:
-
Some interactive elements were not functional yet, which caused confusion (e.g., input fields, others product detail pages).
-
Text size and visual hierarchy could be improved to make content easier to read and notice.
-
The calorie indicator and tracking delivery system were not sufficiently explained
-
Delays in recognizing features (like AR preview) suggest that the placement or labeling needs refinement.
Feedback:
1. How easy was it to complete the tasks in the app (from
browsing to payment)?
It was quite easy. The step were smooth and clear.
2. Which part of the app felt confusing or difficult to
use?
The payment method was a bit confusing.
3. What feature did you like the most and why?
I liked the AR feature. It allowed me to see what I was
customizing.
4. Were there any buttons, icons, or actions that were unclear
or hard to find?
The product name was not very clear. It would be better to
add more details.
5. On a scale of 1 to 10, how would you rate the overall
experience using this redesign app?
8.
- Key Findings & Reflection -
Based on the usability test results, the prototype performs well in terms of onboarding, browsing, and customization. However, improvements are needed in the following areas:
-
Clearer visual hierarchy for AR preview
-
More intuitive order tracking system
-
Functional consistency in buttons
-
Enhanced clarity when selecting toppings
- Refined Prototype -
After conducting the usability test, I made several improvements based on the feedback received. The key updates include:
 |
| Fig.3.1.16 AR preview buttons / (Week 12, 10/12/2025) |
1. Changed the AR Preview Icon: The original icon was unclear, so I redesigned it and added a small "view in AR" title so the users will understand.
 |
| Fig.3.1.17 Confirmation Pop-Up / (Week 12, 10/12/2025) |
2. Added a Confirmation Pop-Up for Saved Items: Users now receive a confirmation message "Saved to favourite" after clicking the “Save” button to avoid uncertainty.
 |
| Fig.3.1.18 Delivery Methods page / (Week 12, 10/12/2025) |
3. Improved Checkout Flow: I rearranged the sequence of the checkout process:
Checkout → Address → Delivery Method (Delivery/Pickup) → Branch Selection (Options if click edit) → Payment Method.
 |
| Fig.3.1.19 History page / (Week 12, 10/12/2025) |
4. Added Order History Page: A new section was created to help users track their previous and current orders, categorized into New, Processing, and Delivered.
- Project 3 -
Click here to access in Canva: Link
REFLECTION
Experiences:
When doing this lo-fi prototype, the process felt quite smooth because I’m
already used to working in Figma. I could set up frames, reuse components,
and arrange the layout without much difficulty. Designing the screens also
helped me understand the whole flow of the Subway app more clearly, from
choosing food all the way to checkout. After conducting the usability test, the refinement process helped me understand how real users interpret the interface. Even though building the lo-fi prototype felt smooth earlier, testing it revealed areas I didn’t notice before, such as small icons being unclear or the navigation sequence feeling slightly confusing. By conducting the usability test, I can improved the prototype to be more useful and solve actual user problems.
Observation:
During the process, I discovered that for sections that scroll
horizontally, I can use “Frame Selection” in Figma and turn on horizontal
scrolling. But I also noticed that I need to make sure the frame has “Clip
Content” enabled, otherwise the items will spill out and the scroll effect
won’t look correct. I also observed that a food app needs very clean
navigation because there are many categories, customization steps, and
payment options. Keeping everything simple makes the user journey
easier.
During the usability test, I observed that users relied heavily on icons and layout to understand the interface. For example, the AR preview icon wasn’t immediately understandable, and some buttons needed clearer responses. I also noticed that users expected certain steps in a specific order during checkout, which made me rearrange the flow.
Findings:
From building this lo-fi prototype, I realized that wireframes don’t need
colours or images to communicate the idea. As long as the structure and flow
are clear, it already shows how the app works. I also found that designing
in steps helps me organize my thoughts, and it’s much easier to adjust the
layout at this stage before going into high-fidelity design. Overall, I
learned that clarity, consistency, and simple interactions are the most
important parts of a good food ordering app.
Comments
Post a Comment