Application Design 2 -Task 2: Interaction Design Planning & Prototyping
xx.xx.2025 - xx.xx.2025 / Week 5 - Week 7
IAN CHOO XIN ZHE / 0369451
Application Design 2 / Bachelor of Design (Honours) in Creative Media
MIB
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.
To begin exploring animation ideas for my app, I initially browsed through Pinterest in search of UI animation inspiration. However, I quickly realized that while Pinterest offered some visual references, it wasn’t the most practical source for specific UI-focused motion design. Wanting more relevant and structured examples, I turned to a design library called toools.design, which provided a much better selection of both micro and macro animation references. This platform gave me clearer insights into how animations can enhance user interaction and interface transitions effectively.
After doing some web surfing and research, I began noting down the types of animations I could incorporate into my app. With those ideas in mind, I created a new FigJam board to visually plan out the interaction design. I started by adding base interaction arrows and red indicators to highlight the buttons relevant to my MVP flow. To make the board more informative for presentation and walkthrough purposes, I roughly sketched out the layout details for each screen. Finally, I added interaction notes to explain the function of each button and how users would interact with them throughout the journey.
Next, I moved on to planning out the micro interactions for each screen in my MVP flow. At first, my FigJam board became quite messy as I tried to visually connect all the elements and interactions. To help clean things up, I consulted ChatGPT for suggestions on how to better organize the information. That’s when I was introduced to the idea of using a table format to display everything more clearly. The table included four key columns: screen, element, micro animation, and purpose—making it much easier to present and explain each interaction in a structured and visually tidy way.
After completing the micro interactions, I moved on to planning the macro animations. Following the same structured approach, I created another table—this time focused on larger-scale transitions within the app. The table included three columns: transition, macro animation concept, and purpose. This helped me clearly outline how the app would behave during screen changes and major interface shifts, while also justifying the reasoning behind each animation choice in terms of enhancing user experience and flow.
And with that, I finally completed the entire Interaction Design Planning FigJam board. It took quite a bit of time and a lot of thoughtful decision-making to get everything structured and organized the way I wanted. Although it was challenging at first, especially figuring out how to visually present the animations and interactions clearly, I’m glad I pushed through — the end result felt cohesive, functional, and presentation-ready.
Figjam Board
Video walkthrough link: https://drive.google.com/file/d/1uzKjV6URwUAWOx12n3G72aZ5APJ0sMJ9/view?usp=sharing
Reflecting on this task, it turned out to be one of the most challenging yet rewarding parts of my app design journey. I started by exploring UI animation ideas on Pinterest but quickly realized it wasn’t the most practical source. I then discovered toools.design, which offered more focused inspiration for micro and macro animations.
As I moved into FigJam to map out my MVP flow, the board quickly became messy. I had interaction arrows, screen layouts, and notes scattered everywhere. To fix this, I turned to ChatGPT for suggestions, which introduced me to using structured tables. This completely changed the game. I created a table for micro animations with columns like screen, element, animation, and purpose. Later, I did the same for macro animations, outlining transitions and the reasoning behind each one.
Through this process, I gained a deeper appreciation for interaction design. I realized it’s not just about how things look, but how they move, respond, and guide users through an experience. Animations aren’t just for flair—they help build clarity, provide feedback, and make the app feel alive.
In the end, my once messy FigJam board became a detailed, presentation-ready interaction map. It helped me think critically about every step in the user journey and how to design with both function and feeling in mind. This task not only improved my technical planning but also helped me grow as a thoughtful and intentional designer.
Comments
Post a Comment