Application Design I | Task 3: Lo-fi App Design Prototype

2/12/24 - 16/12/24 | Week 11 - 13

Iman Mikudim | 0338004 | Section 1

Application Design I | Bachelor of Design (Hons) in Creative Media 

Task 3: Lo-fi App Design Prototype

---

SECTIONS

|  Lectures

• Lecture 11: Usability Heuristics for User Interface Design
• Lecture 12: User Interface Visual Elements
• Lecture 13: Usability Testing & UI Kit
• Lecture 14: Introduction to Figma

|  Instructions

|  Feedback

|  Reflections

---

LECTURES

Lecture 11 | Usability Heuristics for User Interface Design

Lecture 12 | User Interface Visual Elements

Lecture 13 | Usability Testing and UI Kits

Lecture 14 | Introduction to Figma

---

INSTRUCTIONS

1. Brief

Once the UX design process is completed, students can now create a low fidelity prototype of the app. Students needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software’s. Students are then required to perform usability testing whereby they will invite guests to test out their low fidelity prototype and gather all the information, response, feedback, pain points observed from the test. Students need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testers.

2. Process

Fig 1.1 Landing Page | Week 13 (16/12/24)

Fig 1.2 Login Page | Week 13 (16/12/24)

Fig 1.3 Forgot Password Prompt | Week 13 (16/12/24)

Fig 1.4 Sign Up Page | Week 13 (16/12/24)

Fig 1.5 Top Navigation Bar (Delivery & Pickup Option) | Week 13 (16/12/24)

Fig 1.6 Select Delivery Address, Add New Address and Pickup Outlet Selection | Week 13 (16/12/24)

Fig 1.7 Menu Page Before & After Changes | Week 13 (16/12/24)

Upon receiving feedback from Mr. Zeon, he commented that the prices for each item should be bolder, as they are important pieces of information that users would want to see distinctly.

Fig 1.8 Menu Selection Page | Week 13 (16/12/24)

Fig 1.9 Selected Menu Item Page | Week 13 (16/12/24)

Fig 1.10 Offers Page | Week 12 (16/12/24)

Fig 1.11 Tracker & Delivery Status Page | Week 13 (16/12/24)

Fig 1.12 Profile Page | Week 13 (16/12/24)

Fig 1.13 Cart Page Before & After Changes | Week 13 (16/12/24)

After receiving feedback from Mr. Zeon, he insisted on using a back arrow icon instead of an "X" icon to indicate that users will be brought back to the previous page they were on.

Fig 1.14 Cart Page | Week 13 (16/12/24)

Click HERE for the link to lo-fi app design prototype UI kit.

Fig 1.15 Lo-fi App Design Prototype UI Kit | Week 13 (16/12/24)

3. Final

Click HERE for the link to lo-fi app design prototype.

Fig 2.1 Lo-fi App Design Prototype in Figma | Week 13 (16/12/24)

---

FEEDBACK

Week 12 (9/12/24)

*Absent (Sick)*

Week 13 (16/12/24)

General Feedback:

• Complete low fidelity and high fidelity prototypes.
• Create usability tests.

Specific Feedback:

• Good progress, overall everything seems good.
• However for the cart page, instead of a "x" button, use a back arrow button to indicate that users will be brought back to the previous page of where they were last at.
• Make the prices for each item bolder so that they're easier to see.
  
  

---

REFLECTIONS

I believe my experience with this task went well overall. There were very few changes I needed to make, and Mr. Zeon's advice on using grids (rows and columns) was incredibly helpful for text placement and organizing other elements on the screens. I made an effort to create most of the icons from scratch; however, I had to import some from other sources as they would have taken too much time to design. The one thing I wish I had spent more time on was designing and developing more components and understanding how they actually function in Figma. This is something I look forward to learning and applying in my future designs.

---

QUICK LINKS

|  Task 1: Mobile Application Proposal

|  Task 2: UI/UX Design Document

|  Task 4: Final Project Hi-fi App Design Prototype