Application Design II · Final Task

 - 29 July 2025 / Week 11 - Week 15

YANG ZHI CHING / 0365154

Application Design II / Bachelor of Design (Hons) in Creative Media

Final Task ·

---

INSTRUCTION

Doc 1.1 MIB

Requirements:

1. Flutterflow published link
2. Flutterflow project
3. Walkthrough Video Presentation of your app
4. Blog link directly to your final project blog post

---

Final Task · Animation and Finalize

Progression |

1. Completing Unfinished Sections

Due to limitations in FlutterFlow—particularly in customizing map styles and interactivity—I replaced the route navigation feature with a custom-drawn image of the map. The built-in Google Maps widget did not allow for personalized designs or draggable interactions. Additionally, I attempted to implement a "Pop-Up" feature for route completion notifications, but despite trying several tutorials, the functionality did not work as expected. As a workaround, I created a new page designed to visually simulate a pop-up.

Another challenge was implementing a draggable panel; I discovered that it could only scroll within a specific area and lacked the flexibility I originally intended.

  

Fig 1.1 Route Preview Before & After

Fig 1.2 Route Steps Pages Before

Fig 1.3 Route Steps Pages After

The report system was also planned as a pop-up interaction. However, I couldn’t make the pop-up appear directly after pressing the report button. As a temporary solution, I configured the button to navigate to a standalone demo page of the report flow.

Fig 1.4 Report Panel

I added a new profile section containing four sub-pages: Goals, My Badges, My Rewards, and Catalogue.

   

Fig 1.5 Profile Page Flow

I also encountered limitations when trying to implement a welcome dialog for new users. FlutterFlow's dialog pop-up features did not meet the interaction requirements. While an alternative would have been to use a new page for this, the login flow was already designed using the PageView widget. Adding another page to simulate a pop-up would have caused awkward transitions between screens, so I decided to remove the welcome dialog altogether.

 

Fig 1.6 Welcoming Dialogue of Sign Up & Log In Page

Fig 1.7 Not ideal transtition between the pages

Below is the whole flow at the moment with the walkthrough video.

Fig 1.8 Flow in FlutterFlow

Vid 1.9 Flow Walkthrough Recording in Flutterflow

2. Encounting Error on Google Map widgets

While testing my first animation, I encountered a significant error when entering test mode. After consulting ChatGPT, I found that the issue was commonly related to Google Maps integration. Despite following various troubleshooting steps—such as checking my API key settings—the problem persisted.

Fig 2.1 Cheking API Keys Connection

Fig 2.2 Encounting Error when "Publish"

Following the assistant's suggestion, I used a static image to represent the map. While this allowed the app to run in test mode, the tradeoff was that the image could not be dragged or interacted with like an actual map. Although I was disappointed about not being able to implement a full Google Maps feature, I prioritized project stability by removing all Google Maps widgets to enable successful publishing and testing.

 

Fig 2.3 Google Map Error and Assistant Suggestion

3. Animation

To enhance the user experience, I incorporated Lottie animations throughout the app, including the landing page and various user flows:

a. Landing Page

A bus moves across the screen while the message "Mooving is loading" appears—establishing the app's focus on public transport.

Fig 3.1 Landing Page Loading

b. Report System Loading

After submitting a report (e.g., for bus delay or service interruption), users see a short loading animation followed by a success message.

Fig 3.2 Report System Loading  

c. Rewards Animation

A congratulatory animation appears after users complete their route.

Fig 3.3 Rewards when user done their route

d. Notification Icon Animation

The message icon includes a subtle animation to make the UI feel more dynamic.

 

 Fig 3.4 Icon Animation

e. Goal animation and empty bucket animation in profile page

Goals: An arrow hits a target to represent achievement. My Badges: Progress bar animations are shown. Catalogue: An animated bucket flip indicates that it is currently empty.

 Fig 3.5 Profile Page Animation

4. Full Flow Walkthrough

Fig 3.6 Full Flow Walkthrough

5. Test Mode Walkthrough with Bugs

As when i play the test mode and also the web publish mode, it appear bus on colors and position error, thus , i was trying to fic these problems. And finnaly i fixed it by disenable the dark mode theme, becuase my laptop are dark mode theme, but when i was building this project was building light mode in my dark mode system, thus there appear the problem. after i cancle the dark mode, and change my sysytem to light theme, the whole project went successful, so i appreciate that.

Fig 3.7 Test Mode Walkthrough

Final Submission |

Flutterflow published link | 

https://moovit-2i63dk.flutterflow.app/

Walkthrough Video Presentation |

https://youtu.be/_E7W--dtQjk

Previous Task Blog link

Task 1 · App Design 1 Self-Evaluation and Reflection

Task 2 · Interaction Design Planning & Prototyping

Task 3 · Interaction Design

---

Reflection |

Observation

During the process of transferring my Figma design into FlutterFlow, I encountered many bugs, especially related to layout replication. It became clear that replicating an imagined design 100% in a low-code platform like FlutterFlow is not as straightforward as expected. Complex layouts and custom structures often led to dislocation errors, and the app required a highly organized and logical widget hierarchy to function properly. Additionally, my unfamiliarity with FlutterFlow’s system made it difficult to judge whether the platform’s limitations or my own inexperience were the main obstacles.

Findings

One of the biggest challenges I faced in this project was integrating Google Maps. While there were basic tutorials available on how to embed a Google Map into FlutterFlow, most did not cover how to implement custom interactions like route selections or dynamic user-driven changes. This gap in available resources left me stuck when encountering publishing errors related to Google Maps, with little guidance or troubleshooting help available online. As a result, I decided to bypass the issue by replacing the embedded map with a manually drawn version instead.

After solving the solar theme issue, new layout dislocation problems appeared again. Despite several attempts, I couldn't identify the root cause of the layout bugs, which led me to eventually rebuild the entire page from scratch.

What I Have Learned

This project taught me that app development requires more than creativity — it demands logical thinking, technical structure, and attention to every detail in the hierarchy. I learned that tools like FlutterFlow have both great potential and certain limitations, especially when it comes to replicating more custom or dynamic designs from Figma. I also realized the importance of understanding the boundaries of the platform I’m working with, and knowing when to pivot or simplify features to stay within project deadlines. Most importantly, I learned to approach debugging patiently and to expect multiple iterations when dealing with UI errors and tool unfamiliarity.

---

Further Reading |

FlutterFlow University 

https://youtu.be/moP9VtkoyjY?si=AWgndzc0thHVcX0X

FlutterFlow Documentation

https://docs.flutterflow.io/