Posted by

Application Design 2 Task 2

19/5/2025 - 8/6/2025 / Week 5 - Week 8

Jie Xuan/ 0356515

Application Design II/ Bachelor of Creative Media/Taylor's University

Task 2: Interaction Design Proposal and Planning

TABLE OF CONTENTS

1. Lectures

2. Instruction

3. Task 2: Interaction Design Proposal and Planning

4. Feedbacks

5. Reflections

LECTURES

INSTRUCTIONS
Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. The goal is to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application.

Requirements:
1. Interaction Design Documents: 
Create detailed flowcharts and wireframes that map out the user journey and key interaction points within the application. These documents should clearly illustrate the layout of each screen and the navigation structure of the app. 

2. Animation Prototyping: 
Micro Animations: 
Prototype small-scale animations that enhance the user's interaction with the application. These might include button effects, hover animations, loading indicators, and feedback messages. Use tools like Figma to create simple animations that demonstrate the intended effects.
Macro Animations: 
Develop concepts for larger-scale animations that significantly affect the user interface, such as transitions between different app states or animated introductions. For complex animations, you may use Adobe After Effects or similar tools to create more detailed prototypes. If actual animation creation is not feasible, you may alternatively provide references to existing animations that closely represent your intended design. 

3. Visual and Written Explanation: 
Accompany your prototypes with a written explanation or a visual presentation that describes how these animations and interactions contribute to the usability and aesthetic of the application. Discuss the purpose behind each animated element and how it integrates into the overall user experience design. 

4. Video or Class Presentation: 
To be decided by the module coordinator. Refer to example past students’ blogs for more details. 

Submission:
1. App Project Files & Walkthrough Video 
2. Blog post to put together the visual and written explanation. Imagine you are presenting your ideas and showing how it looks like. 
3. Video Presentation 

TASK 2: INTERACTION DESIGN PROPOSAL AND PLANNING
A. Master Plan & Storyboard
Following Task 1, I have completed the redesign of the KTMB Mobiles app and now developing a master plan to better understand and map out the app's flow. Moving forward, I created a storyboard that provides detailed descriptions of the interactive animations throughout the app. Each storyboard page is organized into three sections: Onload, Onpage, and Offload.
  • Onload Animation refers to animations that play when a page first appears.
  • Onpage Animation includes animations that occur while interacting within the page.
  • Offload Animation covers animations that happen when elements exit the screen or fade out.

Master Plan
Master Plan of KTMB Mobile App

Storyboard
Storyboard of KTMB Mobile App


B. Final Submission


C. Final Prototype


D. Video Presentation
xxx

FEEDBACK

WEEK 5 
Mr. Razif explained that the master plan and storyboard serve as a guide and a first draft of the ideation process. As the project progresses into animating transitions between pages and developing micro/macro animations, additional elements and details.

WEEK 6
-

REFLECTION
Observation
Throughout the KTMB Mobile App animation master plan and storyboard process, I observed how important animation is in enhancing user experience and guiding user attention. Animations such as slide, fade, and instant transitions not only create a smoother flow but also help users understand where they are in the app. I noticed that combining fixed elements with scrollable sections like in the homepage and reward pages strikes a good balance between clarity and flexibility. Additionally, small micro-interactions such as button hover effects or instant voucher updates significantly improve user engagement and feedback.

Finding
From my analysis, I found that breaking down animations into three categories Onload, Onpage, and Offload made it much easier to map each screen’s function and plan the overall interaction flow. This structure allowed me to identify inconsistencies and refine the transitions between pages. I also realized that having a clear masterplan not only improves the overall storytelling of the app but also supports visual consistency, especially in areas like navigation, voucher application, and seat selection. These findings have deepened my understanding of how animations support functionality and user satisfaction.

Experience
The experience of completing this task was challenging but rewarding. At the time, I had many other assignments, which made it quite stressful. However, I managed to overcome the pressure and complete the entire task. Through this, I have improved my time management and task prioritization skills. More importantly, I have gained valuable hands-on experience in developing animation masterplans and storyboards. This project has helped me become more confident, organized, and detail-oriented when handling complex design work, and it has strengthened both my technical and personal growth.

Comments

Post a Comment