Application Design | Project 3: Low Fidelity Prototyping & Testing
19
Nov
2025
-
10
Dec
2025
(Week
9-12)
Justin
Cleon
(0375523)
Application Design | Project 3: Low Fidelity
Prototyping & Testing
Table
of
Contects
1.
Instructions
2. Lectures
Lecture 9 : Sketching & Wireframes
Sketching
Sketching is putting your thoughts out there for everyone to see. Sketches don't include images (focus on navigation), details, and colors, so anyone can do it.
Sketch on Paper
• Flow
•
Fast
• Quantity centered
Wireframe
Interconnected sketches, colors for interaction, and as little text as possible (buttons & context if needed), you can also add notes.
Lecture 10 :
Navigation and Decision Making Process
Navigation
Where do you place your products on the sitemap, so people don't get lost?
For navigation, we should:
• Know where we are (Global, local, contextual, faceted, supplemental.)
• Where can we go
• What will happen there
• What do I need to know first
The use of anchoring techniques is useful for guiding people in decision-making.
Paradox of choice:
Fewer choices allow people to make decisions more easily, avoiding the difficulty of distinguishing between different options. So make choices based on priorities.
Engaging users:
Think about how we can get people to use our product more often. Engage them from the very first time they use it.
Lecture 11 :
Usability Testing
Usability Testing
Observing people using what we've created can identify usability issues, latent needs, or opportunities.
Why Test?
• User expectations (what they really want)
• Knowledge gaps (things you thought they know)
• Problems (when a user does something unexpected)
• Feedback (things that need to be fixed or changed)
• Ideas (things you didn't think about)
Limits of Testing
• Not everything can be tested (long-term impacts, streaks, or habits)
• Test depend a lot on the tester (depends on the observer)
• Test takes time
Test Plan
Goal
Declarative statements with specific objectives and constraints.
For example:
"Users will order pizza in 2 minutes."
"Users will be able to create a party event for 10 people with less than 3 errors."
Logistics 1
• In-lab testing: The test is under control
• Remote testing: Online testing, often used at scale and without the designer
• Guerilla testing: Spontaneous approach, pick unprepared people on the street
Logistics 2
• Moderated: Guide them step by step
• Unmoderated: Give users prompt and let them navigate on their own
• Live: Capture real life interaction
• Recorded: Can rewatch
Participants
• Target users
• Where and how to find them
• How to recruit them: close to personas, 3-5 participants, compensation (rewards), better than nothing
Metrics
What will we measure during the test.
Tasks
Specify the tasks that we will tell the users.
• Realistic: Tasks that are common, hard tasks so we can find the problem
• Action-based: Users must show you how they would do something, not describe
• Avoid guiding: Do not lead them to text on screen
• Prioritize: Understand which tasks are critical
Lecture 12 : Usability Heuristics
Visibility of System Status
A system should consistently inform users about its current state through timely and appropriate feedback.
Examples: Confirmation and error messages, navigation cues, progress bar
Match Between System & The Real World
Designing interfaces that align with user world experience.
Visual metaphor: Use of icons and images that represent real world objects
Use of familiar language: Use words or phrases that are familiar
User Control & Freedom
Allows users to feel in control of the interface and provides them with the flexibility to undo or redo actions.
Examples: go back a step, cancel an action, close link, undo
Consistency & Standards
Maintaining uniformity and predictability throughout the user interface.
Visual consistency: Using consistent colors, typography, icons, and layout
Functional consistency: Ensuring similar actions
Feedback consistency: Consistent feedback such as success messages, error notifications and loading indicators
Error Prevention
Confirm user to avoid problems.
Recognition Rather Than Recall
Recognize information or options presented to them, reduce cognitive load.
Flexibility & Efficiency of Use
How do you design something for beginners and experienced user, allowing them through customization, shortcuts, and adaptability (adapting to the user's skill level).
Aesthetic & Minimalist Design
Focus on simplicity, clarity, and visual appeal while minimizing unnecessary elements.
Key principles:
• Simplicity (using only essential elements and features)
• Visual hierarchy (organizing content and elements in a way that guides users' attention)
• Whitespace (using whitespace to create breathing space between elements, enhancing readability and visual clarity)
• Consistent typography and colors (using a harmonious palette and consistent typography to create a cohesive visual identity)
Help Users Recognize, Diagnose, & Recover From Errors
Focused on guiding users through the error-handling process
Key aspects:
• Clear error messages
• Visual cues
• Guided recovery paths
Help & Documentation
Providing users with necessary resources and assistance to understand and use the system effectively.
Visual Design Principles
• Balance
• Contrast
• Emphasis
• Unity
• Proximity
• Repetition
• Alignment
• Hierarchy
• Simplicity
• Negative space
3. Project 3
4. Feedback
Week 12
General Feedback : Mr. Sylvain suggested considering checking and viewing the prototype on a mobile phone. Make sure you create a different design and color for the button (call-to-action) compared to the regular design to minimize user confusion.
5.
Reflection
By doing this assignment, it gave me a pleasant experience because I created a user-centered application in the form of a lo-fi prototype. Starting from making sketches, wireframes, looking for references to making lo-fi prototypes in Figma. I realized how many factors need to be considered before developing an application.
After creating the prototype, I conducted usability testing to ensure the application worked well and met user expectations. By doing this testing, we can see how users interact with the application in real life.
Overall, Mr. Sylvain was very helpful in guiding and providing insights and input ranging from making sketches, wireframes, tools available in Figma to how to conduct usability testing. I hope to create even better applications in the future with the knowledge I gained in this project.
Comments
Post a Comment