Labels

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

18/11/25 - 9/12/25 // Week 9 - Week 12
Chuah Shu En // 0368157
Bachelors of  Design (Honours) in Creative Media

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



Wayfinding: being guided without knowing (don't need to stop to think)

Levels of Navigation
Global: High level, always there (logo, navbar)
Local: Sub-categories (going inside to another page)
Contextual: Things that change based on user (FYP)
Faceted: Filters and sorting
Supplemental: Extra (inside option settings etc)

Decision Making
We want the users to make the right decisions.

Alternatives
Uncertainty
High-risk consequences
Interpersonal issues (considering other people that're with u)
Complexity

Having less options makes the user feel less overwhelmed and regret their choices less.
*Doesn't mean complexity is bad, depends on the user

The Hook Model
> Trigger (internal/external) > Action > Variable reward (external/internal) > Investment > 


16 margin & gutter
Properties - u can easily change the colour of all assests that are under said property
Double click lower frame and it will go back and stick to the text

Next week- 5 screen flow figma


Week 12
CRAP
Consistency, Readability, Alignment, Priority

Tip: 
  • Name your assests "asset_function" e.g. "btn_confirmation" "img_kitten" so you can find it easier
  • Add your contact in the file so people can find you for new projects
Week 13

UI Design
Anything below 12pt is considered unreadable. (for T&C)

Pure black (#000000) is rarely used bcus it's very high contrast which is bad for the eyes. 

60-30-10 rule can help when using colours to show hirearchy.

Adding drop shadow (any colour from your palette) to buttons to show CTA to press.

Most people don't read text, #ENdon'tread, so buttons should be big and nice to press. 

Pretend all your users are beginners (e.g. put icon + label on buttons), the buttons should explain what it's gonna do if it's something critical (e.g. complete purchase) 

First radius + distance = Curve for the bigger box 

Icon line weight should be similar

Breadcrumbs- the user should be able to navigate from anywhere in the app back to their path (e.g. arrows)

Mobile space
- Preserve readability
- Give space in between each element
- Considering frames (do you really need a frame/border for this specific element?)

UI Controls

Drop down menus that are too big for the screen should have it's own page

Radiobutton- the button that shows what you selected 

Figma Tutorial

Save stuff into style & you can re-use it (like paintbrush icon in mspowerpoint)
Instructions

<iframe src="https://drive.google.com/file/d/1qA2ezKaWoydET2OmLw9DLLmCuyqBJ0p9/preview" width="640" height="480"></iframe>

Task

First I started with some sketches of the wireframe in my sketchbook. I decided to change some of the things compared to the sitemap in my previous task because I felt it flowed better. 

Fig 1.1, Sketching (20/11/25)


Then, I proceeded to user testing. Below is the google drive link for the testing videos.




Feedback

No feedbacks because I got lazy. 

Reflections

I had a lot of fun building the Lo-Fi prototype because it felt like building my own Lego set. I learned a lot about Figma through the in-class tutorials by Mr. Sylvain. 
Labels:

Comments

Post a Comment