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

2025.05.29 - 2025.07.07 Week 8 - Week 12

Teh Ming En/0364908

Application Design 2-Bachelor of Design (Honours) in Creative Media--Taylors University

Task 3: Interactive Component Design & Development

---

Instructions

---

Interactive Component Design & Development

In this task, we built upon the knowledge and visuals we developed in Task 2 by creating actual working micro-interactions and animated elements for our app. We mainly focused on visualizing our ideas and used FlutterFlow to turn those ideas into functional components that can be directly integrated into our final app.

LottieFiles Animation

Fig 1.1 Shopping Cart Animation

Fig 1.2 Loading Animation

Fig 1.3 Senheng App Logo Animation

In my prototype, I included several animations that needed to be integrated into FlutterFlow. I chose to create them using LottieFiles, as the animations are simple and easy to customize. In total, I created three animations: a loading animation, a shopping cart animation, and an animated Senheng logo. I adjust the elements such as colors, speed, motion, and size to match my app’s branding.

For the loading animation, I designed four colored circles which are red, cyan, yellow, and white. Each circle is animated to scale up and down while shifting slightly in position to create a rhythmic and dynamic loading effect.

The shopping cart animation features a shopping cart that appears first, followed by two to three shopping bags dropping into it from above. This simulates the action of adding items to the cart and adds a fun, intuitive visual cue for users.

The third animation is the Senheng logo animation. It starts with a small red ball bouncing around the screen in playful motion. Eventually, the bouncing leads to the reveal of the “SENHENG” wordmark. Once completed, I exported the animations as GIFs and integrated them into FlutterFlow.

Flutter Flow

Fig 2.1 Home Page

In FlutterFlow, I created the MVP main flow for my app, which is based on the Senheng shopping application. Naturally, the main focus was on building the product purchasing flow. I started by designing the homepage, where I used a lot of containers, rows, columns, and two carousels to structure the layout.

Since it was my first time using FlutterFlow, I spent a lot of time exploring its features and figuring out how things worked. At the beginning, I found it quite difficult as it is unlike Figma, FlutterFlow doesn't allow you to freely move elements around to design the layout. However, after some experimentation, I realized that the key is to properly organize content using containers, rows, and columns.

Once I got the hang of it, I found FlutterFlow to be fairly convenient. It offers a lot of built-in components like buttons, list views, and carousels that are function. As long as they're configured correctly which isn’t too difficult. I think they can save a lot of time during development.

Fig 2.2 Search Result Page

Fig 2.3 Firebase

For the Search Results Page, I used Firebase to simplify the process and save time from manually arranging each product item. In the Firebase database, I created entries for each product, including the name, price, image path, and units sold.

As for the images, I imported them into the Media Assets section of FlutterFlow and linked them accordingly. After setting up Firebase, I added a ListView to the page. By binding the data from Firebase to the ListView, the product items were automatically displayed in a scrollable list format. This approach not only saved a lot of time but also made it easier to manage and update the product data dynamically without needing to redesign the UI each time.

In addition, I implemented a filter feature on the Search Results Page. When I first started building this in FlutterFlow, I wasn’t exactly sure how to make a panel slide in from the side as it’s quite different from how interactions are handled in Figma. At first, I kept trying different combinations of containers, animations, and visibility settings. It was a bit confusing, and honestly, I felt stuck for a moment.

Eventually, after some trial and error, I solcved the problem. Now, when users tap the filter icon at the top right, the panel slides in from the right. It feels rewarding to see it working smoothly..

Fig 2.4 Poduct Details Page

Fig 2.5 Product Selection Card

Next came one of the essential parts of the app which is the Product Details Page. Just like with the homepage, I continued using a lot of containers, rows, and columns to arrange all the content properly. At this point, I was already a bit more familiar with FlutterFlow’s layout system, so building the structure felt smoother compared to my earlier struggles. For the product image section, I used a PageView widget. This allowed me to create a swipeable image gallery, where users can slide through multiple product images. 

As for the product selection card (where users can choose quantity, variation, etc.), I created it as a reusable component. This made it easier to manage and update without needing to edit every screen manually. I then linked this component to the Product Details Page and set it up so that when users tap “Add to Cart,” the selection card slides up from the bottom. 

Fig 2.6 Cart Page

Fig 2.7 Log In Page

For the other more common pages in the app such as the Cart Page, Login Page, and Onboarding Page, I continue to use the basic layout tools in FlutterFlow: containers, rows, and columns. These pages didn’t require any complex animations or interactions, so most of the effort went into arranging the layout neatly and keeping the design consistent with the rest of the app.

Fig 2.8 Checkout Page

Fig 2.9 Select Payment Page

For the Checkout Page I also used various containers, rows, and columns for the layout. When selecting the payment method button, it will take users to select their payment method. For this page, I used a checkbox group and a dropdown box to complete the layout. Users can choose the method they want. Back to the Checkout page, users can click the "Place Order" button to place their order. Then, there will be a confirmation animation appears, which is the cart animation done in the LottieFiles.

Page Animation in FlutterFlow

Fig 3.1 Animations - On Page Load

Fig 3.2 Animations

After completing all the pages, I started working on the page animations. I use the On Page Load function in the animations part. To achieve the animations that are designed in the Storyboard, I mainly used the fade - ease in & out and slide - ease in & out animations.

Submision

Walkthrough Video - Youtube

Youtube Video: https://youtu.be/jh_EhXJC9s8

Publish Web Link: https://senheng-app-mingen.flutterflow.app/

Reflection

After completing this task, I have something to say: First, using FlutterFlow was challenging at first, especially when trying to make the interactions feel smooth and responsive. I was very confusing at that time. However, after I spent some time exploring the different functions and components, I became more familiar with prototyping.

I found that the core of FlutterFlow is all about using a variety of components to organize and structure content properly. Whether it’s arranging images and text, placing icons, or positioning buttons, everything needs to be neatly aligned and that’s where rows, columns, and containers come in.

Although it felt a bit confusing at first, especially coming from a design tool like Figma where things are more visually flexible, I gradually started to understand the logic behind it. Over time, I found that this structured approach actually helped make the layout more organized and consistent across the app.