APPLICATION DESIGN 1 - PROJECT 3: LO-FI APP DESIGN PROTOTYPE

18/11/2025 - 11/12/2025 (Week 9 - Week 12)

Muhammad Baihaqi Desya (0377271)

Bachelor of Design in Creative Media 

Project 3: Lo-Fi App Design Prototype

---

Table Of Contents

1. Lectures

2. Instruction

3. Project 3

4. Reflection

---

1. Lectures

Week 9 (18/11/2025)

Sketching

Sketching is the process of making ideas visible so that everyone can understand the thinking behind a design. At this stage, sketches do not focus on visuals such as colors, images, or detailed UI elements. Instead, the emphasis is on navigation, structure, and user flow, making sketching accessible to everyone.

Paper sketches should focus on:

• Flow – how users move through the interface

• Speed – sketches should be created quickly

• Quantity – generating many ideas rather than perfecting one

Wireframes

Wireframes are refined versions of sketches that are connected into a coherent structure. They include:

• Basic interaction indicators (using color only when necessary)

• Minimal text (mainly for buttons or essential context)

• Annotations or notes to explain functionality or interactions

Flow

Flow refers to a sequence of sketches that represent the user journey from the beginning to the end of the app experience.
Notes:

• A login screen is not required

• Limit the flow to 5–6 key screens

---

Week 10 (25/11/2025)

Navigation

Types of navigation in UX design include:

• Global Navigation – high-level navigation that is always visible

• Local Navigation – navigation one or more levels below the global level

• Contextual Navigation – changes based on user actions or context

• Faceted Navigation – filtering and sorting options

• Supplemental Navigation – additional support or help when needed

Decision Making

Decision-making in UX often involves:

• Multiple alternatives

• Uncertainty

• High-risk consequences

• Interpersonal considerations

• Complexity

Decision-making process:

1. Gather relevant information

2. Identify and evaluate alternatives

3. Choose the best option

4. Take action

5. Review the decision and its impact

UX Hooks

UX hooks are used to encourage repeated user engagement:

1. Trigger – internal or external prompts

2. Action – the behavior the user performs

3. Variable Reward – outcomes that vary and create anticipation

4. Investment – user effort that increases future commitment

---

Week 11 (02/12/2025)

Usability Testing

Usability testing involves observing users as they interact with a product in order to identify usability issues, hidden needs, and opportunities for improvement.

Why test?
To understand:

• User expectations

• Knowledge gaps

• Problems and pain points

• Feedback and ideas

• System limitations

Limitations of Testing

• Not everything can be tested, such as long-term habits or behaviors

• Results depend heavily on the tester and observer

• Testing requires time and resources

Test Plan

1. Goals
   Goals should be written as clear, declarative statements with specific objectives and constraints.
   Examples:

• “Users will be able to place an order for a new bicycle within two minutes.”

• “Users will be able to create a pickleball event for six people with fewer than two errors.”

2. Logistics

• In-lab testing – conducted in a controlled environment

• Remote testing – conducted online, often without the designer present

• Guerrilla testing – quick, spontaneous testing with unprepared participants

Testing formats:

• Moderated – the facilitator guides users through tasks

• Unmoderated – users navigate independently

• Live – real-time observation

• Recorded – sessions can be reviewed later

3. Participants

• Selected based on target users or personas

• Typically 3–5 participants

• Incentives or compensation are recommended, even if minimal

4. Metrics
   Define what will be measured during the test.

5. Tasks

• Tasks should be realistic and commonly performed by users

• Action-based: users demonstrate actions rather than describe them

• Avoid leading or guiding users to specific interface elements

• Prioritize critical tasks to identify major issues

---

Week 12 (09/12/2025)

Usability Heuristics

1. Visibility of System Status
   The system should always keep users informed about what is happening through timely and appropriate feedback, such as loading indicators, confirmations, and error messages.

2. Match Between System and the Real World
   Interfaces should reflect users’ real-world experiences by using familiar language and recognizable visual metaphors.

3. User Control and Freedom
   Users should feel in control and be able to undo or redo actions easily.
   Examples include canceling actions, navigating back, or closing unwanted screens.

4. Consistency and Standards
   The interface should remain consistent and predictable.

• Visual consistency in colors, typography, and icons

• Functional consistency in similar actions

• Consistent feedback such as success and error messages

5. Error Prevention
   Design should prevent problems before they occur, often through confirmations or constraints.

6. Recognition Rather Than Recall
   Minimize users’ memory load by making options visible and easy to recognize.
   Examples include menus, history, and favorites.

7. Flexibility and Efficiency of Use
   Design should support both novice and experienced users.
   Key aspects include:

• Customization options

• Shortcuts for power users

• Adaptability to different skill levels

8. Aesthetic and Minimalist Design
   Interfaces should focus on simplicity and clarity, showing only what is necessary.
   Key principles include:

• Simplicity

• Clear visual hierarchy

• Effective use of whitespace

• Consistent typography and color usage

9. Help Users Recognize, Diagnose, and Recover from Errors
   The system should clearly explain errors and guide users toward recovery.
   This includes clear error messages, visual cues, and suggested solutions.

10. Help and Documentation
    Users should have access to help and documentation whenever needed, without disrupting the experience.

---

Visual Design – Design Principles

• Alignment

• Contrast

• Spacing

• Guidance

• Hierarchy

• Intuitiveness

• Visual Weight

• Consistency

• Clarity

2. Instruction

3. Project 3

To start with this project i sketch my layout what it will looks like 

figure 3.1 sketches

after done with the sketches i continue with my reference and here it is

fig 3.2 references

fig 3.3 references

after done searching the references i start doing my prototype at Figma and here is the link for my figma:
https://www.figma.com/design/Ni38uqJJGtAz91N42UIM8m/Lofi-Appdesign?node-id=0-1&t=fueuAyeIChA9k9Tv-1

fig 3.4 lo-fi Prototype

After done making the lo-fi now i need to do the interview with my friend and im gonna ask their feedback about it.

fig 3.5 Testing 1

fig 3.6 Testing 2

fig 3.7 Testing 3

And here is the link for the canva
https://www.canva.com/design/DAG7Ze-iDm0/WUkvrsQy0ik-fIJacKBk4w/edit?utm_content=DAG7Ze-iDm0&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton

4. Reflection

Completing the final interface design helped me better understand how user research translates into practical design decisions. Throughout this process, I focused on addressing key user pain points identified earlier, particularly around payment clarity, currency selection, and transaction flow. Designing the QR payment journey allowed me to simplify complex steps into a more intuitive sequence, ensuring users clearly understand which currency is being used before confirming payment.

This stage also improved my ability to think critically about usability and system feedback, such as confirmation screens, success states, and error prevention. By refining the flow and visual hierarchy, I learned how small interface details can significantly reduce user confusion and increase confidence during financial transactions. Overall, this process strengthened my understanding of user-centered design and prepared me to further refine the prototype through testing and iteration.