Application Design II · Task 2 · Interaction Design Planning & Prototyping

21 April 2025 - / Week 1 - Week 7

YANG ZHI CHING / 0365154

Application Design II / Bachelor of Design (Hons) in Creative Media

Task 2 · Interaction Design Planning & Prototyping

---

INSTRUCTION

Doc 1.1 MIB

Requirements:

1. Interaction Design Documents: Creating detailed flowcharts and wireframes to map out user journeys,  creen layouts, and navigation paths.

2. Animation Prototyping

• Micro Animations: Small effects like button clicks, loading icons, and feedback states, prototyped in Figma.
• Macro Animations: Larger UI transitions or intro animations. I can use After Effects or reference similar examples if needed.

3. Explanation & Presentation: Write or visually present how these interactions and animations enhance usability and aesthetics, explaining the thought behind each design decision.

4. Presentation: Might be a video or class presentation (TBD by the coordinator).

---

Task 2 · Interaction Design Planning & Prototyping

For this task, I’ll be developing a full interaction design plan for my final mobile web app project. The main goal is to visually and conceptually plan how users will interact with the app to ensure a smooth and engaging user experience.

Micro animations: Button press, loading spinner, success checkmark

Macro animations: Screen transitions, slide-in menus, onboarding motion

1. App-flow mapping

a. On-boarding Page Flow

First, when user open the app, he will see a splash screen animation, then the animation ends and it will immediately transition to the on-boarding information page. At first I was using fade transition, but the fade effect may let the transition of the word look dazzling, then I change to push effect between the 3 information page.

 

Fig 1.1 On-boarding Flow

Fig 1.2 Log In / Sign Up Flow

Fig 1.3 On-boarding Page Preview

b. Main Flow - Navigation Flow

After successfully login/signu, user will proceed to main page which included search route to destination, map/line information, fovourite setting shortcut and also trip history shortcut to let user can quickly pick their regular trip without type in same information. In searching bar, there is a microinteraction animation which is the loading animation after user type in their destination.

After selected the destination, app will guide you by the navigation guide, the guide will uodated when user arrive every station.

Fig 1.4 Navigation Flow

Fig 1.5 Report Flow

c. Information Page

At Home Page, user can click to check out the information pages such as MRT/LRT line map, offload map.The transition (macrointeraction) used from home page to information page is Slide In from Left, thus, user can have a feeling that the information is aside the homepage, this will illustrate the imagine of user for the whole view of the map.

Fig 1.6 Information Flow

d. Profile Page & Notification Page

At the bottom of the pages, user can use the navigation bar to proceed to profile page and notification page. From Home Page, after you click the logo of either notification or profile, the pages will slide in from bottom.

Fig 1.7 Profile Page

Fig 1.8 Profile & Notification Page Flow

Fig 1.9 Notification Page

Fig 1.10 User Flow Mapping

2. Microinteraction Adding

Definition of Microinteractions:

Microinteractions are all the small, task-based features and interactions inside a digital product. Designers have to individually design each feature to make them more engaging and memorable. Every time engage in activities like syncing the data or devices, using tooltips during onboarding, picking a password, receiving a confirmation message, and so on, we are engaging in a micro interaction.

Fig 1.11 User Flow Mapping with Micro/Macro-interaction

3. Story Board

I explored how screens and components animate and transition, creating a smoother, more intuitive experience for the user.

To structure this, I broke down each task flow into 6 key screens or interaction moments. For each one, I considered three types of animations:

• On-load animation – how the screen or UI elements appear when loaded
• On-page animation – what happens when the user interacts
• Off-load animation – how the screen or component exits or transitions

Fig 1.12 Storyboard Overview

Fig 1.13 Figma Board Preview

Presentation Video |

Youtube Link : https://youtu.be/Jfs4b54zsLg

---

Reflection |

For this task, I focused on planning out the motion and interaction side of the app. Instead of just designing what the screens look like, I had to think about how things move — how a page loads in, how buttons react when tapped, and how screens transition in and out.

To make it more consistent, I went screen by screen and noted down the on-load, on-page, and off-load animations. For example, I made sure the homepage cards slide up naturally, and that the bottom navigation has a slight bounce when tapped — just enough to show feedback without feeling distracting. I also added subtle fades and scaling effects to buttons to make interactions feel more responsive.

For the login and profile flow, I kept animations soft and quick — the login success screen fades smoothly, and profile details slide in from below. These kinds of transitions help the app feel a bit more polished and easier to follow.

One thing I learned here is that animation isn't just decoration — it's a way to guide attention and reduce confusion. When done right, it helps users feel like the app is responsive and alive, not static.

Overall, this step made me more aware of how important timing and motion are in shaping the whole experience. Even simple tweaks like a progress bar animation or button feedback can make the app feel a lot more “together.”

---

Further Reading |

10 Micro Interactions Examples to Improve UX (2025)

https://www.designstudiouiux.com/blog/micro-interactions-examples/