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

⭐ 11/6/2024 - 2/7/2025 (Week 8 - Week 11)

🎀 Yan Zhi Xuan | 0369425 

💜 Application Design 2 | Bachelor of Design (Hons) in Creative Media | Taylor's University 

📚 Task 3: Interactive Component Design & Development

---

TABLE OF CONTENTS  /ᐠ - ˕ •マ ⋆｡°✩

1. Lectures

2. Instructions

3. Task 3: Interactive Component Design & Development

4. Feedback

5. Reflections

---

1. LECTURES ⊹ ࣪ ˖₊˚⋆˙⟡

Week 8

Fig. 1.1 Map Integration in FlutterFlow.

YouTube video: Link

In Week 8, we learned how to integrate and test Google Maps within FlutterFlow. Mr. Razif guided us through setting up map widgets, configuring marker types, and adjusting map properties such as zoom level and map style. Although we encountered an error message indicating that Google Maps couldn’t load properly, the session helped us understand how to connect map data using documents and test marker functionality.

Generate Map Keys: FlutterFlow Doc

Map Tutorial from FlutterFlow: Google Map Widget

- Learn how to generate and use Maps keys for Google Maps integration in the FlutterFlow app.

💜 Reflection: This session helped me see the potential of using interactive maps in app design. Even though we faced a loading issue, I now understand how to configure map elements in FlutterFlow and the importance of linking them correctly with data sources.

Week 9

Fig. 1.2 Building Product Browsing, Details & Cart Pages in FlutterFlow.

YouTube video: Link

In Week 10, we developed the product browsing and detail pages in FlutterFlow and implemented the “Add to Cart” feature. To support this, we created an item database in Firebase Firestore, setting up the necessary collections and fields for each product. We also configured the Firestore location to ensure data is properly stored and accessed in real time. This allowed us to dynamically pull product information into the app.

Google Doc: Adding Reviews to a Product App

💜 Reflection: Setting up Firestore and linking it with FlutterFlow taught me how data structures directly impact functionality. Seeing products appear dynamically from the database and being able to add them to the cart made the app feel more complete and realistic.

Week 10

Fig. 1.1 Building Product Browsing, Details & Cart Pages in FlutterFlow.

YouTube video: Link

In Week 10, we developed the product browsing and detail pages in FlutterFlow and implemented the “Add to Cart” feature. To support this, we created an item database in Firebase Firestore, setting up the necessary collections and fields for each product. We also configured the Firestore location to ensure data is properly stored and accessed in real time. This allowed us to dynamically pull product information into the app.

Google Doc: Add to Cart & Checkout Flow (Firestore)

💜 Reflection: This week deepened my understanding of backend integration in app development. Building the Add to Cart and Checkout system helped me learn how to structure data in Firestore and manage user-specific actions. It was exciting to see the app handle real-time updates and simulate a real shopping experience.

---

2. INSTRUCTIONS ⊹ ࣪ ˖₊˚⋆˙⟡

Fig. 2.1 Module Information Booklet - Application Design 2.

Task 3: Interactive Component Design & Development (Week 08–11, 20%):

• Build actual interactive elements using HTML/CSS/JS.
• Examples: pop-ups, side menus, transitions.
• Submit working HTML file, walkthrough video, and e-portfolio post.

---

3. TASK 3: INTERACTIVE COMPONENT DESIGN & DEVELOPMENT ⊹ ࣪ ˖₊˚⋆˙⟡

Week 8

Setup and Configuration

I documented the FlutterFlow project setup process, which includes app configuration, Firebase integration, and theme customization. The top-right image displays how I connected the app to Firebase using the built-in Firebase Project Creator and configuration tools. Below that, I customized the app’s typography and color styles to align with Guardian’s brand—applying consistent display fonts and a health-themed palette.

Fig. 3.1 Setting in FultterFlow.

Project Name: Guardian 

Project Description: Founded in Malaysia. 

This reflects the app’s local origins and identity, helping reinforce its cultural relevance in future UI and branding decisions.

Package Name: com.zhixuan.guardian

Display Name: Guardian 

A consistent and clear naming structure ensures proper deployment on app stores and a smooth setup for future integrations (like Firebase or dynamic links).

Entry Page: LandingPage 

This will serve as the main landing screen when users launch the app, making it critical that it’s intuitive and well-structured.

Fig. 3.2 App Bar & Typography Setting in FultterFlow.

For visual branding, I applied our signature orange background color (#ff8201), which stands out and aligns with our theme. The font family was set to Roboto, with a white color and size 18, maintaining clarity and accessibility.

Fig. 3.3 Firebase Project Setup.

I successfully set up the Firebase project for the Guardian app. This marks the beginning of backend integration, which will support features like user login, real-time database, and cloud storage. The setup process was smooth, and seeing the “Your Firebase project is ready” screen felt like a big step forward. With Firebase now in place, I’m ready to move on to user authentication and data structuring next. Looking forward to implementing and testing core app features in the coming weeks.

Fig. 3.4 Firebase Authentication.

To enable secure user login in my Guardian app, I set up Firebase Authentication. As shown in the screenshot, I activated the Email/Password sign-in method under the Firebase Authentication settings. This allows users to register and log in using their email credentials.

I kept the setup simple for this MVP, but Firebase also offers advanced options like SMS Multi-Factor Authentication, which can be enabled later if higher security is required.

This integration with FlutterFlow ensures that user credentials are safely stored and managed through Firebase, enabling me to build features like Sign In, Sign Up, and personalized user states within the app.

Week 9

First Stage of App Development

Fig. 3.5 Firebase Query Collection in FlutterFlow.

Next, I set up the backend query collections using Firebase Firestore, which is integrated into FlutterFlow. I created three main collections: Products, Carts > Items, and Users.

• The Products collection includes fields like product name, image, price, discount, and rating.
• The Carts > Items subcollection is linked to products using a document reference and stores quantity and added time.
• The Users collection stores user data such as email, UID, display name, and profile photo.

These structured collections allow dynamic data to flow throughout the app, enabling features like personalized user accounts, real-time cart updates, and product filtering. You can see here how each schema is organized to support a scalable app experience.”

Fig. 3.6 Lottie Animation Vectors.

For this stage of my project, I created my animation assets using Adobe Illustrator. I started by drawing vector graphics with clean, layered shapes, keeping the design simple and suitable for lightweight animation. After completing the design, I exported the file as SVG, which is a compatible format for web-based animation tools. I then uploaded the SVG to LottieFiles' online editor, where I could animate the elements directly within the browser. Using basic properties like position, scale, and rotation, I built the animation without needing After Effects. Once I was satisfied with the motion, I exported the final animation as a Lottie .json file. This format is supported in FlutterFlow, so I was able to upload the Lottie animation directly into my app interface and integrate it smoothly into the user experience. This streamlined workflow—going from AI to SVG to Lottie—was lightweight and efficient, and it avoided the need for complex animation software.

Fig. 3.7 Custom Icons of the Nav Bar.

For the navigation bar, I redesigned custom icons using Adobe Illustrator to give the app a more personalized and brand-aligned look. After designing the icons, I exported them as SVG files, which are compatible with FlutterFlow’s custom icon system.

I then uploaded these SVGs to the FlutterFlow Icon Generator, which allowed me to convert them into usable custom icons within the app builder. From there, I was able to assign each icon to its respective tab: Home, Category, Cart, Store, and Account.

Week 9

Second Stage of App Development

Loading Page

Fig. 3.8 Animation of Loading Scene on LottieFile.

Fig. 3.9 Loading Scene to Launching Page.

This shows the Loading Scene setup in FlutterFlow, where I used microanimations to enhance the app's first impression. When the page loads, a dot scales up as a subtle motion cue, followed by a logo reveal using a fade-in animation. This creates a smooth and branded welcome experience for the user.

In the Action Flow Editor, I set a delay of 3 seconds using the Wait (Delay) action, which gives the animation time to play. After the delay, it automatically navigates to the Launching Page.

This simple combination of microanimations and timed transition adds polish to the user flow, making the app feel responsive and professionally designed from the start.

Launching Page

Fig. 3.10 Animation of Launching Scene on LottieFile.

Fig. 3.11 Launching Scene to Home Page.

After the loading animation, the user is brought into the Launching Scene, which includes a series of onboarding-style screens: Launching Page A, B, and C.

Each screen introduces a key value of the Guardian app—like trusted payments, exclusive deals, and secure checkout. These three screens are shown one after another automatically using a page view-style transition, giving the user a short intro tour.

At the bottom of the final screen, there’s a ‘Let’s Get Started’ button. When tapped, the button triggers an action that navigates to the Sign In Page, using a fade transition for a smoother user experience. This sequence helps orient new users with the brand message and prepares them for login or signup, while keeping the flow clean and interactive.

Week 10

Third Stage of App Development

Sign In Page

Fig. 3.12 Users Collection.

Fig. 3.13 Old animation VS New animation of Sign In Page.

Previously, the Sign In Page animation started with a smooth Ease-In transition where a gradient background flowed in from the Landing Page.

Once the screen fully loaded, a waving hand animation would appear with a slight rotation using Smart Animate, followed by the form elements fading in one by one.

In the updated version, I kept the original hand animation on screen load to maintain that friendly and welcoming feel.

However, I’ve improved the entry interaction. Now, when the page enters, the entire email and password input box slides up from the bottom, creating a more dynamic and purposeful flow.

Fig. 3.14 Sign In Page to Home Page or Sign Up Page.

Here’s how I structured the Sign In Page interactions inside FlutterFlow.

When the user fills in their email and password, tapping the Sign In button triggers a navigation action. As shown here in the Action Flow Editor, it takes them to the Home Page using a Slide Up transition, set to 500ms for a smooth yet responsive feel.

Alternatively, if the user doesn’t have an account yet, tapping on Create an Account will navigate them to the Sign Up Page—also using a Slide Up transition, but at a slightly shorter duration of 300ms to reflect a faster redirect.

These transitions give the login process a more dynamic and polished experience while maintaining consistent visual movement throughout the onboarding journey.”

Sign Up Page

Fig. 3.15 Sign In Page to Home Page or Sign Up Page.

This is the Sign Up Page, where users can create a new account by entering their details like name, email, phone, gender, and nationality. For this MVP, I’ve kept the Sign Up screen clean and simple without microanimations, to focus on functionality first. Users can also upload a profile picture as part of their account setup.

Once the user taps the Sign Up button, the app navigates them back to the Sign In Page, using a smooth Slide Up transition. From there, they can proceed to log in with their newly created email and password, and then tap the Sign In button, which will redirect them to the Home Page.

This looped flow helps simulate a real app onboarding experience—from registration to authentication and then access to the main app features.

Home Page

Fig. 3.16 Products Collection.

I connected Firestore to power the product list. In Firebase, each product document includes fields like name, price, discount, rating, and image URL. These were mirrored in FlutterFlow’s schema under the products collection.

Fig. 3.17 Product Grid View.

On the home page, I built a product grid by querying the Firestore products collection.
Each product is wrapped inside a container, and tapping on it triggers a navigation to the Product Detail Page, passing the product reference as a parameter.

Fig. 3.18 Custom Icons of Nav Bar.

On the left, it shows the process in Illustrator, where I designed a set of custom icons that reflect Guardian’s branding—like the cart, home, and profile icons. I then exported these SVG files and uploaded them into the FlutterIcon generator, which allows you to convert vector graphics into usable Flutter icon fonts.

On the right, it shows how these icons are implemented in the actual FlutterFlow app. Each tab now uses a custom icon that aligns visually with the rest of the app’s color scheme and layout, making the UI more cohesive and visually consistent.

Fig. 3.19 Microanimation of the Nav Bar.

The video attached above, you can see how the navigation bar appears in the app. I applied a bounce effect to the icons when clicked animation and active state color change to make the navigation more engaging and user-friendly. This process gave me full control over the icon style while keeping the integration smooth within FlutterFlow.

Week 11

Fourth Stage of App Development

Product Detail Page

Fig. 3.20 Passing the parameter.

For this week’s progress, I successfully connected the Firebase Firestore products collection to my FlutterFlow project. I created the necessary fields in both Firebase and FlutterFlow, including name, image, price, originalPrice, discount, rating, reviewCount, sold, and isFavorite, ensuring consistent schema mapping.

 

Fig. 3.21 Quantity +1 and Product added to Cart.

On the Home page, tapping a product triggers a Slide Left transition to the Product Detail Page. This page allows back navigation—tapping the back icon slides the view back to the right. When a user taps the quantity +1, then taps the cart icon at the bottom right, the cart badge on the top right corner animates by incrementing +1, indicating the product has been added. Finally, tapping the top right cart icon performs a Fade transition to the Cart Page, completing the interaction flow.

Fig. 3.22 Old design in Figma VS New Design in Flutterflow.

 I’d like to highlight some of the key changes I made during the transition from Figma to FlutterFlow.

This slide focuses specifically on the Product Details Page. On the left is the original Figma prototype, and on the right is the final build in FlutterFlow.

In the FlutterFlow version, I refined the layout for better clarity and usability. I made sure the Virtual Try-on button was precisely aligned and adjusted the spacing between sections to improve readability. I also replaced the original icons for Store, Save, and Share with custom ones that better match the overall design language.

Additionally, I applied slight color adjustments in the detail section to improve visual contrast.

While staying true to the original Figma design, I improved the margins, icon sizes, and text hierarchy to make the interface more responsive and user-friendly for real mobile devices. These small enhancements make a big difference in the overall user experience.

Empty Cart Page and Cart Page

Fig. 3.23 Items Collection.

Fig. 3.24  Animation for Empty Cart Page.

Fig. 3.25 Empty Cart Page and Cart Page with Product.

For Empty Cart Page, I focused on designing and animating the Empty Cart Page to enhance user experience when no items are in the cart. The layout features a visually appealing illustration where two shopping bags appear one after another in an upward motion, creating a soft and friendly interaction. This subtle animation was built using a Lottie file and timed positioning to simulate a playful bounce-in effect, drawing attention to the empty state without feeling dull or static. The purpose of this motion is to encourage users to start shopping again in a lighthearted way. Below the animation, a short message appears: “Your Cart is Empty,” followed by a prompt that reminds users they haven’t added anything yet. A bold orange "Start Shopping" button is placed underneath, acting as a call-to-action that leads users back to the product browsing page. This approach aims to reduce drop-offs and re-engage users through simple but effective micro-interactions.

Once a user adds a product to the cart, they are taken to the Cart Page, where the layout dynamically updates to reflect the product(s) added. The product card displays the name, price, quantity controller, and icons for edit or delete actions. Below that, the cart total is automatically calculated, and users are able to enter a voucher code before proceeding to checkout. This transition from empty to filled cart not only changes the visual layout but also the functionality, ensuring smooth interaction throughout the shopping flow.

Storyboard and Work Collection

Fig. 3.26 Storyboard Overview in FlutterFlow.

 I finalized the navigation flow and interaction design for the Guardian shopping app. The storyboard now maps out the complete user journey—from onboarding to checkout—showcasing how each screen connects and transitions between key stages. A standout feature is the Cart experience, which dynamically changes based on user interaction.

Fig. 3.27 Animation Collection.

The animation interactions not only enhance the visual appeal but also help foster a more emotionally engaging experience for users. Key screens like the Launching Page, Login, and Onboarding incorporate animated elements such as bouncing icons, expanding buttons, and staggered opacity fades to guide the user journey in a smooth and playful way. By carefully layering timing sequences and applying custom easing curves, I ensured that each transition feels fluid, intentional, and aligned with the overall Guardian brand aesthetic.

Fig. 3.28 3 main collections: Products, Carts > Items, and Users.

• The Products collection includes fields like product name, image, price, discount, and rating.
• The Carts > Items subcollection is linked to products using a document reference and stores quantity and added time.
• The Users collection stores user data such as email, UID, display name, and profile photo.

Fig. 3.29 Work Collection in FlutterFlow.

Here’s a quick look at the overall structure of the pages and components I’ve created in FlutterFlow.
On the left, you can see the full page list divided into scenes—such as Loading, Login, Home, Product, and Cart. I also built reusable components for the navigation bar, checkout bar, and various home/product sections.

The centre and right side of the slide shows how these pages come together visually, like the Home Page with exclusive deals, the Product Overview with the product detail component, and the Empty Cart Page.

Each element was built using FlutterFlow’s drag-and-drop UI builder, but I also added interactivity using custom actions, queries, and animations to replicate a realistic shopping experience.”

Fig. 3.30 What has been done and what comes next.

Here is a breakdown of my development progress.

✅ What Has Been Done includes:

• Loading and Launching animations
• Sign In and Sign Up flows
• Home Page with product scroll
• Product Page with Quantity +1 and Add to Cart interaction
• Empty Cart and Full Cart pages
• Custom Navigation Bar microanimation
• Page transitions using macroanimations

⏭️ What Comes Next includes:

• Building the Virtual Try-on Page to simulate nail colors
• Developing the Checkout Flow, including address and shipping method
• A fully working Payment Page
• And finally, generating the E-invoice Page after a successful transaction

These next steps will help bring the app closer to a functional MVP with a complete end-to-end shopping experience.

⭐ Final Submission

1. Web URL: Guardian App (Web Version)

2. Walkthrough Video: YouTube (completed walkthrough video with explanation in Final Project)

3. Presentation Video: YouTube

4. Presentation Slide: Canva Slide

Walkthrough Video of Guardian App (Preview App Version)

Fig. 3.31 Walkthrough Video (Preview Guardian App).

Presentation Video with Walkthrough Video of Guardian App

Fig. 3.32  Task 3 Presentation Video (Guardian App).

Presentation Slide (Tasks)

Fig. 3.33 Guardian App Redesign (AD2 Tasks).

---

4. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡

Fig. 4.1 Consultation with Mr. Razif.

Week 8

We only need to create animations in FlutterFlow without using any custom code. After that, we just download the JSON file to use in the app builder.

Week 9

Mr. Razid mentioned that for Task 3, we should focus only on building the macro and micro animations in FlutterFlow. If anything doesn’t work as expected, we can troubleshoot and refine it later during the final stage of the project.

Week 10

Mr. Razid mentioned that for Task 3, we should focus only on building the macro and micro animations in FlutterFlow. If anything doesn’t work as expected, we can troubleshoot and refine it later during the final stage of the project.

Week 11

Mr. Razid mentioned that for Task 3, we should focus only on building the macro and micro animations in FlutterFlow. If anything doesn’t work as expected, we can troubleshoot and refine it later during the final stage of the project.

---

5. REFLECTIONS    /ᐠ - ˕ •マ

Task 3 marked a turning point in my project, as it required not only crafting interactive animations but also building functional logic in FlutterFlow, especially for the cart system and UI transitions. Working in FlutterFlow challenged me to think beyond visual design and dive deeper into data structure, user behavior, and page logic.

A key feature I focused on was the Empty Cart Page. Rather than leaving it static, I implemented animated interactions, where two shopping bags slide upward one after another with bounce easing. This sequential motion adds emotional warmth and encourages users to begin shopping. I used FlutterFlow’s animation timeline editor, applying entrance effects with adjusted delays and easing curves. It was a deliberate choice to make the experience feel dynamic and engaging, especially when the cart has no items.

Aside from that, I also integrated animations across several onboarding and login screens, such as bouncing icons, fading text, and timed transitions. These animated elements were crafted to create a smoother and more immersive flow from one screen to another, helping users feel more connected to the brand right from the start. To achieve this, I spent time adjusting easing curves and animation durations to make the movements feel natural and consistent with the Guardian app’s playful and friendly tone.

This task challenged me to strike a balance between creativity and usability. I realized that too many animations could become distracting or overwhelming, especially on essential functional pages like checkout or login. Therefore, I had to carefully consider when and where to apply animations for maximum impact. I also gained practical experience in using FlutterFlow’s animation tools, including timeline-based controls and trigger events. Learning how to stack animations, sync them with user interactions, and maintain performance was a valuable skill I picked up throughout this process.

Moreover, I built and refined multiple UI components including the bottom navigation bar, custom icons, and category grids. I exported custom SVG icons from Illustrator, converted them via FlutterIcon.com, and uploaded them into FlutterFlow. This process helped me understand asset management, file types, and icon consistency across platforms.

In summary, Task 3 pushed me to merge design, animation, and functional prototyping in one workflow. It taught me the importance of user-focused interactivity, data-driven UI, and platform-aware animation. The skills I gained in Firestore setup, custom logic building, and timeline-based animation are highly transferable, and I feel more confident developing polished, user-ready mobile experiences in FlutterFlow.