Application Design 2 - Task 3 Interactive Component Design & Development

  09/06/2025 - 06/07/2025 (Week8 - Week11)

Teu Yu Tian / 0371923
Application Design 2 | Bachelors of Design (Honour) in Creative Media | Taylor's University
Task 3 - Interactive Component Design & Development

---

1. LECTURES:

Week 6 - SignUp/Login

Week 7 - No class

Week 8 - Map

Week 9 - Product list and product details page

Week 10 - Product List, add to cart and delete

Week 11 - Review Session

---

2. INSTRUCTIONS:

REQUIREMENT:

Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.  

 

The output of this task is a working animation element that are ready to be integrated in their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using HTML/CSS and JavaScript with the use of animation framework if necessary. 

Interactive Components/Elements can be: 

• Navigation Menu with interactive icons
• Side Menu interaction 
• Pop Up boxes 
• Call to action buttons
• Page/Screen transitions 
• Etc. (discuss with the module coordinator for further clarification)

Submission Requirement

1. Project Files & Video Walkthrough 

2. A single HTML file that includes all components, along with external CSS and JavaScript files as needed. 

3. Online posts in your E-portfolio as your reflective studies 

Work Progression

1. Explored FlutterFlow

   • First time using the tool, spent time learning the interface and basic layout structure.

   • Tested widgets and navigation to understand how pages and screens are built.

2. Set Up Interface & Navigation

   • Designed the main pages and added navigation between them.

   • Faced some issues with custom transitions—used default ones while exploring workarounds.

3. Built Core Screens

• Created key pages like Reserve, My booking, Wallet, and Booking.

  

 

  

 


 

• Experienced bugs like the Wallet screen not displaying and no errors shown, it work in run mode but not in test mode.

1. Set up Firebase data and Backend Query Collections

• Store data in the query collection list: 

• 
  
  

1. 
   

   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   
   Tried to Match Design Details

   • Attempted to replicate original design elements like round corners and drop shadows.

   • Found customization limited for certain widgets (e.g., text fields, filter sliders).

2. Implemented Basic Animations

   • Tried advanced effects like shimmer loading.
     
     
     

     
     
     
     

3. Workarounds for Transition Limitations

   • Navigation transition works but with limitations

   • Used max offset values and fade effects to fake a full-screen slide-in effect.

   • Adapted animations visually to compensate for FlutterFlow's limits.

---

Current In-Progress Work

• Animations:

  • "Recenter current location" button on map – still under development

  • "Scan nearby" animation – in progress

  • Shimmer effect – basic version works, still refining for full effect

• Incomplete Pages:

  • Parking Information page

  • Booking Summary page

  • Payment Confirmation page

  • Payment In Progress page

  • Payment Success page

FlutterFlow Project Files:

published link

https://app.flutterflow.io/run/OsbnMMbsDPrrJjI30YwM

App Walkthrough:

Presentation video:

---

3. FEEDBACK

Can add map navigation animations. 

---

3. REFLECTION

Experience

This was my first time using FlutterFlow, and it was definitely a learning curve. I spent quite a bit of time just figuring out how to build the layout and use the navigation tools properly. The widgets were convenient, but I often felt limited—especially when I couldn’t adjust things like rounded corners or drop shadows on pre-made components like text fields. Some bugs also slowed me down, like the Wallet screen not appearing even though there was no error shown. Setting up navigation transitions wasn’t as straightforward as I hoped either, and I’m still trying to find a clean way to do it. Even though I didn’t manage to finish everything, I’m glad I gave it a try and got to explore something new.

Observation

Working with FlutterFlow made me realize how different no-code tools are from design software like Figma or actual coding. It’s fast and convenient, but it can be frustrating when you want more control over details or animations. I had to come up with visual workarounds, like pushing the animation far off-screen and fading it in, just to make it look smooth. Not being able to see why something broke—like with the Wallet page—was confusing and slowed things down. The shimmer animation was probably the hardest part, but I felt satisfied when at least a simple version worked. Even though I didn’t complete everything I planned, I came away with a better understanding of app design and how animation fits into real interaction.

Findings

I discovered that FlutterFlow is useful for building quickly, but not as flexible when it comes to customizing details. Some elements in my original design—like the filter slider or certain transition effects—just couldn’t be recreated exactly. I tried following tutorials for shimmer animations, but they were quite complex and didn’t turn out the way I imagined. Eventually, I used a loading query and managed to get a basic shimmer effect working, which felt like a small win. Features like the “recenter location” button and “scan nearby” on the map are still in progress. I also didn’t finish some pages like payment confirmation and booking summary, but I learned a lot just by trying to set them up.