Labels

Application Design I / Task 3 : Low Fidelity Prototyping and Testing

26/11/2025 -  9/12/2025 (Week 10 - 12)

Rachel Ng Jie Ting / 0378902

Bachelors of  design (Honours) in creative media

Application Design I / Task 3 : Low Fidelity Prototyping and Testing 

Table of content

Lectures

Lecture 9: Navigation & Lofi prototype

Lecture 10: Usability Testing & UI Kit

Lecture 11: Usability Heuristics


Instructions

Task 3 : Low Fidelity Prototyping and Testing (20%)


Feedback

Reflections


Lectures

Lecture 9: Navigation & Lofi prototype


Levels of navigation

Global: High level, always there (logo, navbar)
Local: Sub-categories (going inside to another page) 
Contextual: Things that change based on the user
Faceted: Filters and sorting
Supplemental: extra stuff (settings and help) 

Decision Making
  • Alternative
  • Uncertainty
  • High risk consequences
  • Interpersonal issue
  • Complexity 
Decision Making Process
  1. Gather relevant information
  2. Identify and examine alternative
  3. Choose among the alternative
  4. Take action
  5. Review your decision and its impact

*Less choices makes the user feel less overwhelmed and regret their choices less
** Some user appreciate customization and more options. 



Decision Fatigue

Mental energy is limited, do consider this when designing for mentally tired people.



Hook (Habits)

1. Trigger
- Reminds users about your product
- Can be internal (emotion, feeling, memory) or external (reminder, email, notification)


2. Action
Trigger + motivation +ability = Action


3. Variable Reward
Action brings impact on the user, their environment, their communities

External: people approval
Internal: personal mastery


4. Investment
- The reward is compounded towards a goal.
- Time and effort invested in feels worthwhile
- Create a positive outlook towards the product, reinforcing the loop


When to use hooks
-First times
-Returns
-positive touch points




                                                                                                                                                

Lecture 10: Usability Testing & UI Kit


Fig 1.1 - Usability Testing & UI Kit


What is Usability Testing?
  • Evaluating a product or service with representative users.
  • Participants are tasked with completing specific action while observers record notes. 
  • The primary aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction.
  • It doesn't yield large feedback samples like questionnaires.

How to Conduct UX Research with Usability Testing
  1. Prepare a low-fidelity prototype
  2. Define three user scenarios and provide written instructions for each
  3. Conduct testing via Zoom and send the Figma link to participants.
  4. Recruit 3 participants and assign one scenario to each.
  5. Gather and analyze feedback from participants using prepared questions.
  6. Use the feedback to improve the low-fidelity wireframes.

What is UI Kit?
  • A pre-packaged collection of all user interface (UI) components (buttons, forms, navigation, etc.) for a mobile app or website.
  • Allows designers to avoid creating every design component from scratch, speeding up the workflow.
  • Can serve as a starting template for niche-specific use cases (e.g., an e-commerce UI kit), which designers can then customize.
  • Good UI design  significantly improves the user experience, leading to higher engagement and a lower user churn/uninstall rate.


                                                                                                                                                

Lecture 11: Usability Heuristics


Fig 1.2 - Usability Heuristics


Jakob Nielsen's 10 Usability Heuristics

Visibility of System Status
A system should inform users about its current state through timely and appropriate feedback. This ensures users understand the system's status and receive immediate feedback on actions.


Match Between System and Real World
Interfaces should align with users' real-world experiences and expectations, using familiar concepts, language, and conventions. This includes using visual metaphors and familiar language.

User Control and Freedom
Users should feel in control and have the flexibility to undo or redo actions. Good practices include allowing users to go back, cancel actions, and supporting 'Undo'.


Consistency and Standards
Uniformity and predictability must be maintained throughout the user interface. This applies to visual, functional, and feedback consistency.


Error Prevention
Interfaces should be designed to reduce the likelihood of user mistakes. Strategies include providing clear instructions, confirmation prompts before irreversible actions, and real-time input validation.


Recognition Rather Than Recall
It is easier for users to recognize information presented than to recall it from memory. Key aspects include clear navigation menus and allowing access to history or favorites.


Flexibility and Efficiency of Use
The design should cater to both novice and experienced users. This can be achieved through customization, providing shortcuts for power users, and adaptability based on user proficiency.


Aesthetic and Minimalist Design
Focuses on simplicity, clarity, and visual appeal while minimizing unnecessary elements. Principles include simplicity, visual hierarchy, ample whitespace, and consistent typography and colors.


Help Users Recognize, Diagnose, and Recover from Errors
Users should be guided through error-handling. Key aspects are clear error messages, visual cues, and guided recovery paths.


Help and Documentation
Necessary resources and assistance should be provided for users to understand and use a system effectively. This includes contextual help, user guides/tutorials, a searchable knowledge base, and online support.


Instructions


Module Information Booklet


Task 3 : Low Fidelity Prototyping and Testing (20%)

Once the UX design process is completed, students can now create a low fidelity prototype of the app. 

Students need to arrange all the screen wireframes, actions, visual feedback and link them up in Figma. 

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 presentation slide containing detail analysis of this task and the solutions to the problems faced by the testers.


---------------------------------------------------------------------------------------


Final presentation slides


Figma Workspace




Figma Prototype




Feedback

Week 9: 

(No feedback)

Week 10: 

(No feedback)


Week 11: 

(No feedback)

Week 12: 

(No feedback)


Reflections

During user testing, I realised that I should have allowed users to freely explore the app first before assigning specific tasks, as this would have helped them feel more familiar and comfortable with the interface.

I also identified a weakness in my documentation skills. I tend to prioritise building the prototype before developing a proper wireframe, and I struggle with clearly articulating design processes in writing. This made preparing slides more challenging, highlighting an area that requires improvement and more disciplined practice.




Labels:

Comments

Post a Comment