INSTRUCTIONS
<iframe src="https://drive.google.com/file/d/16bRDQ2MYICukbgm9S20tULOMcRedVvyr/preview" width="640" height="480" allow="autoplay"></iframe>
Task 3 Requirements:
Now that Task 2 is done, it’s time to bring those ideas to life. In this task, I’ll be creating real micro & macro-interactions and animated elements for my app. No longer just visual concepts, but actual assets that are ready to be used in the final build.I’ll be using tools like Jitter and Lottie Files to design the animations, then integrating them directly into Flutterflow.
1. splash screen loadingTextPurpose: The splash screen animation serves as the user's first visual interaction with the app, setting the tone for the overall experience. Its primary purpose is to create a smooth loading transition while the app initializes in the background, reducing perceived wait time and reinforcing brand identity.
Visual Idea: Due to the limited skills on using lottie & Jitter to do this blur loading effect, I make it frame by frame on Figma and export them into .json file.
2. SwitchPurpose: To visually enhance the interaction when users toggle a switch on or off. It makes the action feel responsive, improving the user experience.
Visual Idea: The switch button animates with a smooth sliding motion and subtle feedback like color changes or bounce effects when toggled. This gives users a clear, intuitive sense of control and aligns with the app’s clean, modern design.
3. WaitingPurpose: To confirm a successful login with a smooth transition from loading to completion. It reassures users that their action was successful, and the app is ready.
Visual Idea: A circular loading indicator spins briefly, then transforms into a checkmark with a quick, satisfying motion.
4. liveStatusPurpose: To show that the app is waiting for real-time route. It gives users a clear visual cue that the system is actively checking for updates.
Visual Idea: Pulsing waves act as “waiting for signal” effect, making the wait feel purposeful and visually clear.
5. liveRoutePurpose: To indicate that the app is incoming for route information, especially related to live schedules or positions. It helps users understand that the system is actively processing.
Visual Idea: An LRT icon gently bounces and shaking moves along a short path while waiting. The motion adds a sense of liveliness and progress, keeping users engaged during the short wait.
My Flutterflow Link: https://app.flutterflow.io/share/my-rapid-p-u-l-s-e-hkzm9k
Quick Showcase Video:
REFLECTION
Experience
Developing interactive components for my LRT transport app deepened my understanding of how motion and feedback play a critical role in user experience. Transitioning from static designs in Task 2 to live, responsive elements required a shift in thinking not just about how screens look, but how they behave. I explored various forms of micro-interactions, such as button tap animations and status indicators, to enhance clarity and engagement. Additionally, I implemented macro-interactions like animated screen transitions to guide users through different stages of the app, such as moving from the route planner to detailed train schedules. Using Flutterflow visual logic tools allowed me to test, iterate, and refine these interactions without writing code, which was both empowering and efficient.
Observations
Through the development process, I observed several key patterns:
Now that Task 2 is done, it’s time to bring those ideas to life. In this task, I’ll be creating real micro & macro-interactions and animated elements for my app. No longer just visual concepts, but actual assets that are ready to be used in the final build.
I’ll be using tools like Jitter and Lottie Files to design the animations, then integrating them directly into Flutterflow.
1. splash screen loadingText
Visual Idea: Due to the limited skills on using lottie & Jitter to do this blur loading effect, I make it frame by frame on Figma and export them into .json file.
2. Switch
Visual Idea: The switch button animates with a smooth sliding motion and subtle feedback like color changes or bounce effects when toggled. This gives users a clear, intuitive sense of control and aligns with the app’s clean, modern design.
Visual Idea: A circular loading indicator spins briefly, then transforms into a checkmark with a quick, satisfying motion.
Visual Idea: Pulsing waves act as “waiting for signal” effect, making the wait feel purposeful and visually clear.
Visual Idea: An LRT icon gently bounces and shaking moves along a short path while waiting. The motion adds a sense of liveliness and progress, keeping users engaged during the short wait.
Experience
Developing interactive components for my LRT transport app deepened my understanding of how motion and feedback play a critical role in user experience. Transitioning from static designs in Task 2 to live, responsive elements required a shift in thinking not just about how screens look, but how they behave. I explored various forms of micro-interactions, such as button tap animations and status indicators, to enhance clarity and engagement. Additionally, I implemented macro-interactions like animated screen transitions to guide users through different stages of the app, such as moving from the route planner to detailed train schedules. Using Flutterflow visual logic tools allowed me to test, iterate, and refine these interactions without writing code, which was both empowering and efficient.
Observations
-
Small animations like scaling a button significantly improved perceived responsiveness and user trust.
-
Users responded better to animated transitions that clearly indicated a change in context, such as sliding from one screen to another, rather than abrupt jumps.
-
Implementing animations helped reduce cognitive load by drawing attention to relevant information like train status updates without overwhelming the user.
I also noticed that performance and timing mattered overly long animations disrupted flow, while subtle, short ones created a smoother experience.
Findings
Throughout the process, I found that interactivity significantly boosts usability. Animations that offered real-time feedback such as confirming a tap or saving a route helped reinforce user actions and reduced ambiguity in the interface. Additionally, I learned that micro and macro animations should complement each other to create a more coherent experience; when small and large movements were aligned with user expectations, the flow of the app felt more intuitive and natural. I also realized that animations must always serve a clear purpose purely decorative or exaggerated effects tended to distract users rather than enhance their journey. In contrast, functional animations, such as those indicating loading states or navigation transitions, added real value by improving clarity and engagement. Finally, using Flutter Flow as a no-code tool allowed me to seamlessly integrate both visual design and interaction logic, encouraging an iterative approach to building dynamic, user-centered features.
FURTHER READING How to do a bottom sheet? - https://www.youtube.com/watch?v=hJcIFYPGypEHow to add custom icon to Flutter Flow? - https://youtu.be/fJ8tCE_767A?si=4djwaLgE5KxtSfkl
-
Small animations like scaling a button significantly improved perceived responsiveness and user trust.
-
Users responded better to animated transitions that clearly indicated a change in context, such as sliding from one screen to another, rather than abrupt jumps.
-
Implementing animations helped reduce cognitive load by drawing attention to relevant information like train status updates without overwhelming the user.
I also noticed that performance and timing mattered overly long animations disrupted flow, while subtle, short ones created a smoother experience.
Findings
Throughout the process, I found that interactivity significantly boosts usability. Animations that offered real-time feedback such as confirming a tap or saving a route helped reinforce user actions and reduced ambiguity in the interface. Additionally, I learned that micro and macro animations should complement each other to create a more coherent experience; when small and large movements were aligned with user expectations, the flow of the app felt more intuitive and natural. I also realized that animations must always serve a clear purpose purely decorative or exaggerated effects tended to distract users rather than enhance their journey. In contrast, functional animations, such as those indicating loading states or navigation transitions, added real value by improving clarity and engagement. Finally, using Flutter Flow as a no-code tool allowed me to seamlessly integrate both visual design and interaction logic, encouraging an iterative approach to building dynamic, user-centered features.