Application Design 1 - Task 3: UI, UX, IXD Design Document

25.11.2025 - 09.12.2025 / Week 10 - Week 12

Brenda Wynn / 0372128

Application Design 1 / Bachelors of Design (Hons) in Creative Media / Taylor's University

Task 3

JUMP LINKS

LECTURES

Week 10

Web Nav

Global= always there
Local= one level below Global
Contextual= changes depending on context
Faceted= filters to help find things
Supplemental= extra help

Nav Practice

= Labelling all the places a user can go, which page they are located at, which features are interactable, etc.

Decision Making

Consider the alternative
Uncertainty
Consequences
Interpersonal issue
Complexity

Anchoring

= putting limit in decisions

Hook Model

Trigger
Action
Variable Reward
Investment

Week 11

Usability Testing

= The process of evaluating a product or service by giving participants prompts to complete a specific action to detect usability issues and designers observe the participants when accessing the product or service to gather data.

How to Conduct UX Research with Usability Testing

1. Create a low-fidelity prototype

2. Prepare tasks to test

3. Conduct tests online with 3 participants or more

4. Analyze the feedback and data from participants

5. Utilize the feedback to develop the low-fidelity prototype.

UI Kit

= Prepare a collection of UI components needed to create the prototype to minimize time but also to create a well designed and responsive prototype.

Week 12

Usability Heuristics

= A guideline that designers and usability experts use to enhance the usability of websites or applications.

Jakob Nielsen's 10 Usability Heuristics

1. Visibility of System Status

= The system should be able to inform users about the current state of the system and the system should be responsive.

2. Match Between System & Real World

= Design with real-world implementations/familiar concepts

3. User Control & Freedom

= Provide users control over their choices

4. Consistency & Standards

= Maintain consistency in design elements, patterns, etc used across the system

5. Error Prevention

= Provide clear instructions to reduce the likeliness of users creating mistakes

6. Recognition Rather than Recall

= Provide information/utilize symbols that are easy to recognize

7. Flexibility and Efficiency of Use

= Allow users to customize their interface settings, provide shortcuts for experienced users, and design interfaces that is easy to adapt to

8. Aesthetic and Minimalist Design

= Create systems that are simple, clear and visually appealing

9. Help Users with Errors

= Provide clear error messages and recovery paths for users to handle errors

10. Help & Documentation

= Provide instructions/features that can provide users with assistance

User Interface Visual Elements

1. Line

2. Shape

3. Color

4. Form

5. Texture

6. Space

User Interface Design Principles

1. Consistent line spacing

2. Clean alignment for texts

3. Lower contrast for black color usage

4. Choose text colors that makes it easy to read

5. Select colors with the 60-30-10 rule

6. Use drop shadows wisely

7. Differentiate primary and secondary buttons

8. Utilize bounding boxes for icons

9. Prioritize simplicity

10. Customize a layout of a photo wisely

11. Use proper illustrations

12. Use cards to place important content of a page

13. Make use of white space to enhance readability

User Interface Navigational Component

1. Search bar

2. Breadcrumb (a line path that shows the start location to the current location of a user in an interface)

3. Pagination (navigation through pages)

4. Slider (to set value or to show the range of values)

5. Tags (lowest level of hierarchy to find content)

6. Icons (alternative way to represent a cathegory,etc)

7. Carousel (to skim among content)

8. Mobile Specs (responsive on mobile)

User Interface Controls

1. Dropdown

2. Radio button (to show selection)

3. Checkbox (vertical alignment)

4. Toogle (to select between 2 states)

5. Date & Time picker

6. Grids

BACK TO TITLE

INSTRUCTIONS

BACK TO TITLE

TASK

After we have done our research, we were tasked to create a low-fidelity prototype of our application in Figma based on the results of our research.

Before I start designing in Figma, I started by sketching with the CRAZY 8's method so that I know how I want the application to flow.

After I get an idea of how the flow will go, I started sketching how the pages would look like.

Once I know how the flow will go on, I started to create the wireframe using the Branching method.

These are the references I used to create and develop the sketch of the wireframes.

After sketching and creating the wireframe, I started on creating the low-fidelity prototype on Figma. This is the progress I have done in Figma.

REFLECTION

Through the process of completing this task, I have came across many difficulties since I used new features to complete the low-fidelity according to how I visualized it. It was difficult and I tried many tutorials to complete it, but it feels rewarding once it worked. Even though it was difficult, I did learn a lot through this task since I experimented a lot. It made me appreciate the difficult process even with the trials and errors. So even though it was a difficult task to accomplish, I have learned new features on Figma and how it affects the interaction.

BACK TO TITLE