Application Design II - Task 3: Interactive Component Design & Development

09.06.2025 - 06.07.2025 / Week 8 - Week 11

Teo Mei Hui / 0358315

Application Design II / Bachelors of Design (Honors) in Creative Media / Taylor's University

Task 3: Interactive Component Design & Development

---

CONTENTS

1. Instructions
2. Task
3. Feedback
4. Reflections

---

INSTRUCTIONS

---

TASK

For this task, we’re required to take what we’ve learned in Task 2 and turn our ideas into actual, working micro-interactions for our app. Instead of just visualizing animations like before, we now need to fully develop them using HTML, CSS, and JavaScript—and we can also use animation frameworks if needed. The goal is to improve the user experience by adding interactive elements that feel smooth and engaging. We also have the freedom to make creative decisions about which animations or interactions we want to include in our app.

Some examples of the components we can work on are:

• Interactive navigation menus
• Side menu transitions
• Pop-up boxes
• Animated call-to-action buttons
• Page or screen transition effects

Basically, the outcome of this task should be fully functional animations that are ready to be integrated into our final app—not just mockups like in the previous task. If we have ideas beyond what’s listed, we can discuss them with our module coordinator for approval.

Final Submission

Published Web URL

Moovit by Teo Mei Hui 

*Recommended dimension: iPhone 16 - 393x852 (will make it responsive later on)

Video Walkthrough

---

FEEDBACK

N/A

---

REFLECTIONS

For this task, I used FlutterFlow to create functional micro-interactions for my app. Instead of coding manually, I explored FlutterFlow’s built-in animation features to design elements like pop-up boxes, button transitions, and navigation effects.

It took some trial and error to get the animations to feel smooth and intentional, especially when adjusting timing and triggers. One challenge was ensuring the interactions worked well across different screen sizes.

Overall, using FlutterFlow made the process faster and more visual, while still helping me understand how animations can improve user experience and interface flow.