Application Design II - Task 4: Final Project - Completed App

7.7.2025 - 27.7.2025 ( Week 11- Week 14)
Gam Jze Shin / 0353154
Application Design II / Bachelor of Design in Creative Media
Task 4: Final Project - Completed App

---

Index

1. Instructions
2. Task 4: Final Project - Completed App
3. Feedback
4. Reflection

---

Instructions

fig 1.1  Application Design MIB

---

Task 4

In this task, Students will apply the knowledge gained from Tasks 1, 2, and 3 in Task 4. They will integrate visual assets and refine their prototype into a fully functional and complete product experience. Students are required to present the final published web version created using FlutterFlow.

Task 4 Progress

fig 2.1 Task 3 Progress Rate

In Task 3, I completed the user flow from the sign-up page to the product detail page. For Task 4, I continued by designing the add-to-cart page, followed by the payment and tracking pages. After completing all the necessary prototype screens, I connected them into a seamless flow and enhanced the project by adding functional features, visual animations, and interactive elements.

Product Detail Page (Selection Showing)

fig 2.2 - 2.3 Update App Status

I added an app state called "showinformation" with a Boolean type, allowing me to control the visibility using conditional visibility. When the user clicks anywhere on the page, the selection will be hidden. However, when they click the "Add to Cart" button, the Boolean value changes to true, making the selection panel visible.

fig 2.4 Selection showing Video

This video demonstrates that when the button is clicked, the information panel slides up, and when the close button is clicked, the selection panel is hidden.

fig 2.5 Counter Button added

In the selection page, I included a counter to adjust the product quantity using the built-in counter button in FlutterFlow. I learned how to use this feature by watching a tutorial on YouTube. After linking it properly, the counter button functioned as intended.

fig 2.6 Counter button Video

This video showcases the functionality of the counter button in action.
Online Learning Video: https://youtu.be/HcYVeklShhM

fig 2.7 Firestore added

Since I wanted to create the "My Cart" page and connect it to the product detail page—so that when the "Add" button is clicked, the product is automatically added to the cart—I first needed to set up a Firestore collection for the cart.

My Cart Page

fig 2.8 Build up My Cart Page

Next, I created the "My Cart" page and built the layout before linking it to the product detail page.

fig 2.9 Text Variable

The information I needed to pass over included the product image, product name, and price. For each of these properties, I selected the corresponding fields from the product documents that were already linked to the product detail page.

fig 2.10 Query Collection added

For the ListView and container, I added a query collection and selected the same query type used in the product detail page. This allowed all the data to be linked seamlessly from the product detail page to the My Cart page.

fig 2.11 Animation in Lottiefiles

I created a new animation for the page that appears after the "Add to Cart" action, displaying a message saying "Added to Cart Successfully." This helps provide feedback to the user, letting them know their action was successful.

fig 2.12 Delete Action

Besides that, I also added a delete icon and set an action for it to remove the item from the cart by deleting the corresponding document from Firestore.

fig 2.13 Flow from product to cart page

This video shows the full process—from adding a product to the cart and displaying the success animation, to navigating to the My Cart page and deleting the product from the cart.

fig 2.14 Conditional Visibility Panel

I updated the conditional visibility for this panel so that when the check button is clicked, it slides up. The price display is also toggled—when the check button is turned on, the price is shown, but if it's toggled off, the price changes to RM 0.

fig 2.15 Panel showing Video

This demonstrates that when the toggle is switched on, the panel slides up and the price displays as RM 799. However, when the toggle is switched off, the price changes back to RM 0.

Payment Page

fig 2.16 Build up Payment Page

In the payment page, I designed the layout to be scrollable by adjusting the column properties, allowing the content to scroll vertically for better user experience.

fig 2.17 Switch Widget

I also included a switch widget that allows users to toggle it on and off. When toggled on, it applies a discount to the price, and when toggled off, the price returns to its original amount. This feature lets users see the price difference with and without the discount.

fig 2.18 Macro Animation - Slide left to right

When navigating to the payment page, the screen scrolls upward from the bottom. I also added a macro animation where the content slides in from left to right. This video highlights the animation in action.

fig 2.19 Payment Done Animation added

Between the payment page and the tracking page, I included a macro animation that indicates the payment process is complete. After the animation plays, it automatically transitions to the tracking page.

fig 2.20 Payment Animation Show

When the "Place Order" button is clicked, it navigates to the animation page and displays the "Payment Successful" animation.

Tracking Page

fig 2.21 - 2.24 Tracking Page Build up

Using the same concept, I built the tracking page based on the design I had created earlier. The challenging part was recreating the graphic design—I didn’t copy it exactly but made some adjustments to better fit the layout and functionality of the page.

fig 2.25 On page Animation on Tracking Status

In the tracking page, the main purpose is to display the tracking status to the user. To highlight the current parcel status, I used an on-page load animation with a loop type, applying a micro animation effect to the graphic button that indicates the current status.

fig 2.26 Flippable Card added

I modified the driver contact section to make it more interactive by turning it into a flippable card. This allows users to flip the card to view the driver's name and contact information, enhancing the user experience.

fig 2.27 On page Animation added

Since the flippable card initially appeared unclickable, I added a fade-in animation to highlight it and make it look interactive. This helps users recognize that the card has a function and encourages them to click on it, similar to a clickable button.

fig 2.28 - 2.29 Delivery Animation added

When the user clicks on the animated status icon button, an animation plays indicating the "Delivering" status. After displaying for about 4 seconds, it automatically navigates back to the tracking page.

fig 2.30 Show Tracking page in Profile Page 

To make the tracking page more accessible, I integrated it directly into the profile page. This way, users can simply click on the profile page from the home page to view the tracking information within the project.

Other Functional Features

fig 2.31 - 2.32 Copy Function added

In the tracking page, I added a copy feature next to certain information. I discovered that I could make it functional by allowing users to copy specific text when they click on it, so I implemented this feature to enhance usability.

fig 2.33 Copy Function Video

After the user clicks the copy button, a reminder appears confirming that the text has been copied to the clipboard. This lets the user know they can now paste the information elsewhere.

fig 2.34 Alert Dialog added

To make the app feel more realistic, I added alert dialogs to buttons that don't have a function yet. This prevents user confusion by showing a message when those buttons are clicked, letting users know that the feature is not available yet.

fig 2.35 Alert Dialog Video

This video demonstrates how buttons that are not yet functional will trigger an alert dialog when clicked. It’s a simple feature to implement, but it’s important to ensure that all visible functions are accounted for, so users aren’t left confused.

fig 2.36 Share Function added

I also noticed that a functional feature I could add was the share button. On my product detail page, I included a share button and assigned an action to it using the "Launch URL" function. 

fig 2.37 Share Function Video

For now, I’ve linked it to my project URL to demonstrate its functionality, allowing it to navigate to another page when clicked.

Problem Faced

fig 2.38 Wait Screen

I often had to wait a long time for the test mode to load, especially after adding new features and wanting to preview the changes. Because of this, I sometimes chose to publish the web version directly to view the outcome more quickly. In some cases, the web version loaded faster than the test mode. However, there were times when the published web version didn’t update to the latest changes immediately, even after publishing. I found that the published version would only reflect the latest updates after the test mode had been run at least once.

Final Published Web Version
Click here to view the published web version. (Recommended: Adjust size to around 80% for better fit in web version / Best viewed on iPhone 14 Pro (430 × 932)).

fig 2.39 Final Published Web Version

Prototype Walkthrough Video

fig 2.40 Task 4 Prototype Walkthrough Video

Presentation Video
Click here to view the task 4 Presentation Video in YouTube.

fig 2.41 Task 4 Presentation Video

---

Feedback

Week 14
General Feedback

Micro and micro-interactions are important parts of the project requirements. The completed app should look and feel like a real, fully functional application.

---

Reflection

Experience

In this final task, I became more familiar with FlutterFlow compared to before. This helped me avoid previous mistakes—for example, I now understand the importance of proper alignment to prevent layout issues, and I know how to use the right widgets to place content correctly. This saved me time from constantly readjusting layouts. I also explored more features in FlutterFlow, such as the copy button, which allows users to copy text directly. Exploring these new tools made my final app feel more functional. Of course, some features were still challenging—especially those involving parameter connections and Firebase integration, which required more learning and troubleshooting.

Observation

During development in FlutterFlow, I encountered errors when adding widgets and actions. After observing the process, I found the debug panel in test mode to be very useful. It lists all the widgets and shows their status, helping me identify which part isn’t working. Debugging is a cycle that requires persistence and patience, but the satisfaction of solving a problem makes the effort worth it.

Findings

I found that integrating Firebase was quite challenging. Even when following YouTube tutorials step by step, I faced issues—such as missing variables or unclear instructions. Some tutorials weren’t detailed enough, so I had to explore and figure things out myself. Sometimes, AI tools helped me solve problems by analyzing the specific issues I described. I also discovered that FlutterFlow occasionally has bugs, such as the published web version not updating immediately. At times, I had to wait or run the app in test mode first to see the latest updates. This repetitive process of testing and publishing became a part of my final task. It tested my patience, but I stayed motivated by focusing on the final outcome I wanted to achieve.