Labels

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

 22/10/2025 - 23/11/2025 (Week 5 - Week 9)

Chang Wing / 0367807 

Application Design I / Bachelors of Design (Honours) in Creative Media / Taylor's University

Task 3 - Low Fidelity Prototyping and Testing


TABLE OF CONTENTS




Week 9

Wireframes & Sketches

- Don't think too much when sketching
- Do lots of sketches quickly, force yourself to!
- Large amount of sketches forces designer to think more and have more options to choose from


Figure 1.13 Class Activity (Sketches)


Figure 1.14 Class Activity (Crazy 8 Ideas sketches for app's homepage)


Flow

Figure 1.15 Flow

Actions


Figure 1.16 Actions

Scrolling



Figure 1.17 Scrolling


Branching



Figure 1.18 Branching




- Sketches shown to clients has to be comprehensible and easy to skim through




Mr. Sylvain's Useful Tips As UI/UX Designer

1. Start building your own reference archive (e.g. Pinterest) It helps you notice what you’re drawn to and what styles or features you keep coming back to.

2. When exploring ideas, mix and match from 10 or more references. Pulling from just one becomes copying, but combining many lets you figure out what actually fits your client.

3. Take time to organise and label your wireframes. It makes the handoff easier for developers and easier for clients to read (Clients VALUE designers who make their lives simpler!)

4. In pitches, it’s important to highlight current trends, since app updates evolve fast and products that fall behind usually don’t last long.


Useful websites for UI/UX: pinterest.com 
                                             mobbin.com
                                             Producthunt
                                             Dribbble
                                             Behance



Week 10

UI/UX Wayfinding

1. Web Nav

- Global, Local, Contextual, Faceted, Supplemental

Figure 1.19 Class Activity (Web Nav)


2. Navigation Best Practices

When using an app, users have to know where they are, how they can go and what will happen after tapping. UI design has to be intuitive.



UI/UX Choice and Decisions

1. Anchoring

Designers / marketers guide user decision through anchoring.

Anchoring happens when:

- The first number, first offer, or first option shapes the user’s perception of value or difficulty
- Users compare all later options against that initial reference point.




Figure 1.20 Anchoring

For example:

1. Pricing Pages

If the first price shown is RM299, the next option at RM99 feels “cheap”.
The RM299 price acts as the anchor.


2. Job App Filtering

If a salary filter shows:
RM8,000 first
Then RM2,000–RM3,000
Users may perceive RM2,000 as “low”, even if it’s industry standard.



2. The Paradox of Choice

by psychologist Barry Schwartz

- The idea that having too many options actually makes people less satisfied and more stressed, even though we assume more choices = better.






Figure 1.21 The Paradox of Choice

When users are given too many choices, they:

- Take longer to decide
- Feel anxious about choosing “wrong"
- Sometimes avoid choosing at all to avoid regrets

In UI/UX, the paradox of choice appears when an app:

- Gives too many navigation option
- Offers too many settings or too many steps

Users freeze because there's no clear path forward

Conclusion, designers help users to choose whats important for users, left with just the important choice, reduce overwhelming users with lots of choices



3. Decision Fatigue

Decision fatigue in UI/UX happens when users must make too many choices in an app, which drains their mental energy. When this happens, users feel tired and may abandon tasks.

For example:

- Every instructions have long paragraphs to read
- Filling forms repeatedly (name, phone, file upload etc.)
- Too many CTAs

Designers has to reduce decision fatigue in UI/UX so users don’t have to think too hard to move forward.





UI/UX Hooks

1. Habits Stick

- How to make users repeat a behaviour naturally over time.

It explains what conditions must be met for a behaviour to become a habit:
Cue → Routine → Reward → Repeat

A behaviour only becomes a habit when:

- The user sees a cue (something reminds them)
- They perform the routine easily
- They receive a reward that feels worth
- The loop is repeated consistently

For example, a fitness app shows a reminder on the home screen saying “Log today’s workout.” The user taps it and logs their exercise. They immediately see a progress graph update with a motivational message like “Great job!” Doing this daily forms a habit because the interface makes the action easy and rewarding.




Figure 1.22 Habits Stick

2. The Hook Model

- How a product creates habits by design.

It explains how to pull users back repeatedly through:

1. Trigger
- Internal (boredom, stress) or external (notifications).

2. Action
- User does something simple.

3. Variable Reward
- Unpredictable reward that keeps them coming back.

4. Investment
- User puts something into the system → makes them return later.



Figure 1.23 The Hook Model


For example, a social media app sends a push notification: “Someone liked your photo!” The user opens the app to check and each time the notifications vary. They then post more photos or follow friends, which personalises content and keeps them coming back. The habit is created by triggers, variable rewards and investment.



Mr. Sylvain guided us to use Figma’s key features and how to design lo-fi wireframes and do prototyping.


Figure 1.24 Class Practice (Figma Design & Prototype screenshot)




Week 11

Usability Test

When to test?

- Test as as early as possible, when you have something (e.g. lo-fi prototype) testable
- Clear doubts (from client etc.) and decide by testing with real users
- However, testing at this phase (development phase) cannot show long term impact, and it takes time (find users, writing a report...)


Testing Steps (Done b4 developing Hi-fi)

1. Planning 
- Decide on a clear testing direction with the team
- Planning ahead allows designer to explain clearly to user what they want to test 


2. Decide a Goal
- Goals are specific statements that define what the design team aims to evaluate / improve in the UX by observing how users perform key task

For example: "Users will create an order for a new bicycle within 2 minutes."
                      "Users will be able to create a pickle ball event for 6 people with less than 2 errors."

- Goals has to be clear and specific (amount of time, amount of errors etc.)
- Goals are for the design/research team, not for the users


3. Logistics
- 

4. Participants
- Identify target users
- 


5. User Tasks
- Users must show how they would do something when using the prototype, not describing them
- Designers cannot lead users or guide them in this phase
- 

6. Before Staring
- Designers explain why they need user's help, what's the project about and how their feedback matters
- Get user's consent for video recording
- Ensure users are comfortable throughout the testing, this is not an exam
- Ask users to tell what they thinking when tapping or navigating in app

7. In-test
- Let user use the app by themselves, minimise guidance
- If users ask for help, do not answer directly, dig deeper: "What do you think?", "How would you go about it?"
- Follow-up with user, ask about what's frustrating for them


8. Step back
- As designers, DO NOT defend your design
- Side with user to look at the issue
-Don’t design on the spot. The entire UIUX research and design process is time-consuming, but correcting on the spot can give a false impression that the process is easy, which undermines thoughtful design.


9. Test with Informed User as well (e.g. another UIUX Designer)
- Involve users who understand design principles, they can spot issues that regular users might miss or give insight into subtle usability problems


10. Introduce Your Request When Asking for Feedback
- I am showing [stage of work] about [project content] because [current challenge]. I would need from you [type of feedback] to [objective after receiving the feedback] within [feedback constraints].


11. A Good Critique
- Explain both positive and negative (if no negative, dig deeper for it!)
- What can be improved 





Week 12

Usability Heuristics (by Jacob Nielsen) 

- The rules (almost is industry standard and widely known in UX/UX field) that help designers evaluate whether a user interface is easy to use
- The guiding principles that highlight common patterns of good UIUX design

1. Visibility of System Status

- The system should always keep users informed about what is happening.
For example: Confirmation Messages, Error Messages, Navigation Cues, Progress bar



2. Match Between System and the Real World

- Use language and visuals that feel familiar to users and fits or reflect the current real world

- Use of familiar visual metaphor: e.g., "Delete" icon that resembles a trash can 

- Use of familiar language: Replacing technical jargon like “execute process” with clearer terms such as “start,” “run,” or “open” so easy for users to understand



3. User Control and Freedom

- Users should be able to undo or redo actions easily

For example: an Undo button, a Back button, Allow user to still edit cart at the payment page



4. Consistency and Standards

- Ensure the user interface is uniform and predictable 

- Visual consistency: Consistent colours, typography, icons and layouts across interface

- Functional consistency: Buttons, gestures, and interactions behave the same way across similar contexts. E.g., all “Back” buttons take users to the previous screen, all “Save” buttons perform the same action

- Feedback consistency: All errors use the same style of message, all loading states follow the same animation pattern, and all success actions use the same confirmation style



5. Error Prevention

- Design the interface so errors don’t happen in the first place.

- Clear instructions: "Password must include at least 8 characters and 1 number."
- Confirmation Prompts: A pop-up that says "Are you sure you want to delete this file?"
- Validation: Showing a red outline and message like “Invalid email format” while the user is typing


6. Recognition Rather than Recall

- Reduce memory load. Users shouldn’t need to remember information from one screen to another.
For example: Icons with label, Search Recommendations



7. Flexibility and Efficiency of Use

- Support both beginners and experts. Since experts might want to skip all the unnecessary informations they have already known from their experience.

- Customisation: Users can rearrange toolbar items or personalise dashboard widgets
- Shortcuts: Keyboard commands like Ctrl + C to copy or a long-press gesture to reveal quick actions
- Adaptability: An app that switches to a simplified layout for new users but shows advanced options for experienced users


8. Aesthetic and Minimalist Design

Keep screens clean and only show what is necessary.

- Simplicity: A login page with just email/password fields and a single “Sign In” button.
- Visual Hierarchy: Headings are larger and bolder than body text to guide the user’s focus. Make CTA buttons stand out by using a different colour
- Whitespace: Spacing between buttons and text blocks to prevent a cluttered appearance.
- Consistency: All buttons use the same colour, shape, and hover effect across the app.



9. Help Users Recognise, Diagnose, and Recover from Errors

- Error messages should be clear, polite and give actionable steps to help user solve the error.
For example: "Your file is too large. Upload files under 10MB."


10. Help and Documentation

If needed, provide accessible instructions.
For example: Tooltips, Help Center, Onboarding Tips




UI Visual Design

1. 60/30/10 Rule

- 60% - Dominant Color: The main color used for large areas like backgrounds or primary sections. Sets the overall mood.

- 30% - Secondary Color: Used for accents, panels, or key elements that support the dominant color

- 10% - Accent Color: Used sparingly for highlights, buttons, links, or call-to-action elements to draw attention.

Figure 1.25 60/30/10 Rule


2. Guidance

Figure 1.26 Guidance


3. Weight

Figure 1.27 Weight




4. Ergonomics



Figure 1.28 Ergonomics


5. Hierarchy

Figure 1.29 Hierarchy






6. Intuitivity

Figure 1.30 Intuitivity





Design System

Why it is important?

- Teamwork: Help other designers or developers to easily find designed elements to design
- Consistency: To make sure a same design system is applied across the UI
- Automation: Allow reuse of the same 
- Legacy:



What should be in the design system?

- Building Blocks: Palette, Templates, Elements, Modules, Components
- Guidelines: SOPs, Strategy, Design Rules, Documentation, Copy Samples




1. Design Language

- 60fssfs


2. Design Kit

- 60fssfs

3. Component Library 

- 60fssfs

4. Developer Sand Box

- 60fssfs


5. Documentation Site

- 60fssfs




IMPORTANT STEP : Rename all figma layers and file name like "btn_save_01", "img_kitten_02" as go by designing the UI, it is important for developers to know it and seaerch engine. If didn't do it since the start, you gonna CRY because it will be harder to rename afterward, have to do one by one!!



INSTRUCTIONS



Task 3 - Low Fidelity Prototyping and Testing

After completing the UX design process, a low-fidelity prototype has to be developed in Figma or Adobe XD. All wireframes, actions, and visual feedback should be linked together. Then conduct usability testing by inviting users to try the prototype and record their responses, feedback and pain points.

The testing process has to be documented with video and produce an analysis report that outlines the findings and proposed solutions. The final deliverables are:

  1. A compilation video of the user testing

  2. The Adobe XD low-fidelity prototype file

  3. A detailed analysis document




Task 3 - Low Fidelity Prototyping and Testing



Canva Public View Link:
https://www.canva.com/design/DAG7Ek-Y4aQ/tMfOiB8gP-2mFF3o8zgKKA/view?utm_content=DAG7Ek-Y4aQ&utm_campaign=designshare&utm_medium=link2&utm_source=uniquelinks&utlId=h3fa844dcc9
Figure 2.1 App Redesign Proposal (Task 3)


Figma Lo-Fi Workspace Link:
https://www.figma.com/design/5fNarIXLJ6tvVcJ7hwzw5H/App-Design-I-Prototype?node-id=0-1&p=f&t=Ct7HiHOkrvJJIPaH-0

Figure 2.2 Figma Lo-fi Workspace



Figma Lo-Fi Prototype:
https://www.figma.com/proto/5fNarIXLJ6tvVcJ7hwzw5H/App-Design-I-Lo-fi-Prototype?node-id=190-950&t=26FXlaohx399EJ0u-0&scaling=scale-down&content-scaling=fixed&starting-point-node-id=190%3A950&show-proto-sidebar=1


Figure 2.2 Figma Lo-fi Prototype



Google Drive Link (User Session Recordings, Screen Records and Transcriptions):
https://drive.google.com/drive/folders/1WD20zDIoTlZjNtHKYHMsY3JEavSZflN1?usp=drive_link




FEEDBACK

Task 3 - Low Fidelity Prototyping and Testing

Week 9 (19/11/2025)
Feedback: -

Week 10 (26/11/2025)
Feedback: -

Week 11 (03/12/2025)
Feedback: -

Week 12 (10/12/2025)
Feedback: -


REFLECTION

Overall, this task helped me to understand the importance of avoiding jumping straight into Hi-fi designs. By quickly sketching wireframes and creating a Lo-fi prototype, we were able to visualise and quickly improve the core flows of the app without getting caught up in aesthetic details. Conducting usability tests with real users allowed me to observe how people of different backgrounds interact with the interface and highlight issues I might not have anticipated.

Documenting test reports and analysing the results helped me systematically identify which elements worked well and which required improvement. This process not only reinforces the importance of iterative design but also ensures that the final Hi-fi prototype will be informed by real user behaviour rather than assumptions.

This approach will be incredibly useful moving forward, as it establishes a clear foundation and streamlines design decisions for Hi-fi prototypes, in order for us to create an UI that truly inform user challenges. It once agains reminds me the importance of conducting research and testings before moving to the designs as a UI / UX desginer.
















Labels:

Comments

Post a Comment