APPLICATION DESIGN - PROJECT 3 LO-FI APP DESIGN PROTOTYPE
19/11/25 - 12/12/25 (Week 10 - 12)
SUN YUTONG (0377440)
APPLICATION DESIGN / Bachelor of Design (Honours) in Creative Media
Project 3: Lo-Fi App Design Prototype
JUMP LINK
INSTRUCTIONS
LECTURES
WEEK 10: Usability Testing & UI Kit
Usability testing:
- Evaluating a product or service with representative users.
- Participants are tasked with completing specific actions while observers record notes.
- The primary aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction.
- It doesn't yield large feedback samples like questionnaires.
UI Kit:
- Pre-packaged collection of all UI components for a mobile app or website.
- With a UI kit, designers don’t need to create every design component from scratch.
- Many UI kits can be used as templates for niche-specific use cases. For example, all e-commerce apps should have a similar user interface. So a designer can use an e-commerce UI kit or wireframe kit as a starting point and then customize the interface from there.
- UI design has a massive impact on how much time users spend in an app. If the app is well designed, easy to navigate, and responsive, users are less likely to churn or uninstall the app
WEEK 12: Usability Heuristics
Usability Heuristics:
Usability heuristics are general principles or guidelines (Rules of
thumb)that designers and
usability experts use to assess and enhance the user friendliness and
overall usability of products like websites and applications.
1. Visibility of System Status
The system should always keep users informed about what is happening
through clear and timely feedback, helping users understand the current
system state and feel in control.
2. Match Between System and the Real World
Interfaces should use familiar language, concepts, and visual metaphors
that match real-world experiences, making the system easier to understand
and more intuitive.
3. User Control and Freedom
Users should be able to easily undo, redo, cancel actions, or navigate
back, ensuring they feel in control and not trapped within the
system.
4. Consistency and Standards
The interface should maintain consistent visuals, behaviors, and feedback
across all screens, allowing users to predict how the system will
respond.
5. Error Prevention
The design should minimize user errors by providing clear instructions,
confirmations for critical actions, and real-time input validation.
6. Recognition Rather than Recall
The system should reduce cognitive load by allowing users to recognize
options and information instead of relying on memory.
7. Flexibility and Efficiency of Use
The interface should support both novice and experienced users by
offering customization, shortcuts, and adaptable interaction flows.
8. Aesthetic and Minimalist Design
The design should focus on simplicity and clarity, using visual
hierarchy, whitespace, and consistent styling to enhance usability and
reduce distraction.
9. Help Users Recognize, Diagnose, and Recover from Errors
The system should clearly communicate errors using understandable
messages and visual cues, and guide users toward resolving the problem so
they can continue their tasks smoothly.
10. Help and Documentation
The system should provide accessible help and documentation, such as
contextual tips, tutorials, and support resources, to assist users in
understanding and using the system effectively.
PROJECT 3 LO-FI APP DESIGN PROTOTYPE
Sketches and wireframes:
Based on the site map of Project 2, I determined the functional allocation in
the application and then drew sketches and wireframes.
Fig 1.1 Sketche
Fig 1.2 Sketche
Fig 1.3 Wireframe
Lo-fi prototyping:
When refining the prototype design, I realized that the design of each
function needed to be improved to complete the action from start to finish.
During the production process, I made many revisions.
Figma Link: https://www.figma.com/design/BSjeXZSledgvhxmtO47cI6/Assessment-3---Lo-fi-prototype?node-id=0-1&t=mK1LnJKOS5qRTPst-1
Next, we conducted online user usability testing.
Fig 3.2 User test report (1)
Fig 3.3 User test report (2)
Fig 3.4 User test report (3)
Fig 2.1 Figma workspace
Usability Test Plan:
After completing the prototype design, we need to conduct usability
testing. So I completed the usability test plan and then carried out
usability testing.
Goal:
This usability test aims to evaluate whether users can easily
navigate the travel app and complete key travel planning tasks.
The test focuses on identifying usability issues in destination
browsing, attraction exploration, and itinerary creation. This
will help ensure the app supports efficient and intuitive travel
planning.
Fig 3.1 Usability test plan
Test video link: https://drive.google.com/drive/folders/1Aaw3SF-Ob2R_K6tqQcfKIreFwKT2PukO?usp=drive_link
Based on user feedback and observations during testing, I completed
the usability test report.
Next, based on the issues raised by users and the problems I
observed during user use, I made further adjustments and
improvements to the lo-fi prototype design.
FINAL PROPOSAL SLIDES
FEEDBACKS
WEEK 10: No feedback
WEEK 11: No feedback
WEEK 12: Mr. Sylvain suggested that I enlarge the
font to ensure readability. He also suggested that I adjust the
overall design of the app to make it look like a single, cohesive
app.
REFLECTION
In this task, I learned how to design a Li-Fi prototype. I first
completed sketches and wireframes, then studied and referenced the
UI/UX designs of many excellent travel apps, and finally completed
the Li-Fi prototype design based on the sitemap.
After completing the Li-Fi prototype design, I conducted user
testing to ensure its usability. During the testing phase, I
identified areas that needed modification and optimization.
Usability testing is a crucial part of prototype design, greatly
helping us adjust the prototype's usability.
Comments
Post a Comment