Labels

Application Design I: Task 3 - Low Fidelity Prototyping and Testing

19/11/2025 - 14/12/2025 / Week 9 - Week 12

Ye YingYing / 0364398
Application Design / Bachelor of Design (Hons) in Creative Media / Taylor's University

Task 3 - Low Fidelity Prototyping and Testing (20%)

TABLE OF CONTENTS

Lecture Slides: View Here

Useful links for references
  1. Mobbin (apps screen references, need signup)
    https://mobbin.com
  2. Product Hunt (latest apps & trends)
    https://www.producthunt.com/
  3. Dribbble (portfolio & case studies, motion & graphic orientated)
    https://dribbble.com/
INSTRUCTION
< back to top >
CLASS ACTIVITY
Week 9
This week’s activity was more fun and hands-on. Mr. Sylvain showed us a phone and desktop interface for reference, and we had to speed-draw the wireframes. After that, we also created eight different versions of the homepage for the Task 1 app we are working on.
Week 10
This week, we first had a group activity, which was to identify navigation
  • global ( nav bar) 
  • local (different pages) 
  • contextual (keep changing) 
  • faceted (all the possibilities, eg, price of product) 
  • supplemental ( not directly related to the product, extra information)
Later on, Mr. Sylvain conducted a hands-on Figma tutorial where we learned the basic tools, shortcuts, and essential workflows of the platform. During the session, we followed along step-by-step to create wireframes for the inDrive app and the Best Shop.
Week 11
This week, we continued from last week’s session and carried on developing the Best Shop in Figma. The focus shifted towards adding more interactive elements (components), such as buttons and basic UI interactions.
Figma Tutorial
Week 12
This week, Mr. Sylvain introduced us the design principles, so we had a small class activity exploring it.
< back to top >
TASK 3
Quick Link
Sketches
I started by sketching on paper to map out the main pages and key functions of the Donki app redesign. This helped me quickly explore different layout ideas without worrying about details. From these sketches, I decided on the structure of the main navigation bar and clarified what the core focus of the app should be, especially how users move between shopping and the new Kitchen feature.
Wireframes
Based on my sketches, I created wireframes to define how each page connects and how users move through the app. I focused on the interaction flow, including buttons, navigation paths, and what happens after each action. This step helped me test the structure and user journey before adding any visual design.
References
I looked at a range of apps for inspiration, including apps I personally like, competitor apps, and some left-field examples. I also explored online UI and layout examples to study how different designs handle navigation, content layout, and user flow. This helped me identify patterns and ideas that I could adapt for the Donki app redesign.
Lo-Fi Prototype
After gathering references, I started building the low-fidelity prototype in Figma. I translated my wireframes into clickable screens, focusing on layout, navigation, and basic user flows without adding detailed visuals. This allowed me to test whether the structure and interactions worked before moving to higher-fidelity design.
Figma Prototye Workspace: https://www.figma.com/design/4YsPaFBSw1VYM9v4s80QBF/AD-T3-0364398?node-id=0-1&t=79Fe8hKq7zL0q4X9-1
Figma Prototype Preview: https://www.figma.com/proto/4YsPaFBSw1VYM9v4s80QBF/AD-T3-0364398?node-id=1-2&p=f&t=syMJFNVII22FnFP7-1&scaling=scale-down&content-scaling=fixed&page-id=0%3A1&starting-point-node-id=1%3A2
Usability Testing
After completing the lo-fi prototype, I created a usability testing plan. I defined the main goals, designed the task sets, and decided on the testing method and setup. This helped ensure the testing focused on key user journeys and the most important features of the app.
Usability Testing Videos:
https://drive.google.com/drive/folders/1xPCV_KQepMgsSm7R7aNPWN7Zbr2YC8sx?usp=sharing
Post-Test Evaluation (Survey):
https://docs.google.com/forms/d/1XHjcaokRzIBkWjyuy56g9IKcuSrpv_FUpCHi5MEtBOU/preview
Post-Test Evaluation Results:
https://docs.google.com/spreadsheets/d/1VHE3lZJXntx6VtxeE-aaVfTLmV0Wq8TETi9ynOyifJY/edit?usp=sharing
Test Reports & Next Steps
After running the usability tests, I compiled the results into a report. Overall, the feedback was very positive, with users finding the app clear and easy to use. However, a few areas needed refinement, especially around navigation labels and feature visibility. Based on these issues, I identified specific improvements to guide the next stage of design.

Final Submission
Figma Prototye Workspace
Figma Prototype Preview

Canva Presentation Slides
Usability Testing Documents
Usability Testing Videos:
https://drive.google.com/drive/folders/1xPCV_KQepMgsSm7R7aNPWN7Zbr2YC8sx?usp=sharing
Post-Test Evaluation Results:

< back to top >
REFLECTION
So far this semester, this has been the most stressful assignment for me. Working on it in Figma was especially challenging because I struggled to stay motivated and confident in my decisions. At every step, I found myself questioning whether my design choices made sense, which led me to repeatedly change my plans and add new elements.

Because this project felt very personal, something I was creating for myself. So I placed high expectations on the outcome. I wanted the final result to be as good as possible, which made me try to do everything at once, even when it was unrealistic. This mindset significantly increased my stress, but it also helped me realize the importance of setting clearer priorities and trusting my design decisions rather than constantly reworking them.

Labels:

Comments

Post a Comment

Popular Posts