Application Design 2 - Task 3 / Interactive Component Design & Development
15.06.2025 - 07.07.2025 / Week 8 - Week 11
Siang Huey Yee / 0369549
Task 3 - Interactive Component Design & Development
OUTLINE
INSTRUCTIONS
Module Information Booklet
TASK 3 - INTERACTIVE COMPONENT DESIGN & DEVELOPMENT
In this Task 3, 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 focused on transforming our planned interactions into functioning components that can be directly integrated into our final app using FlutterFlow and animation tools.
Requirements:
-
Continue from the interaction plans made in Task 2.
-
Create working interactive components, not just visual mockups.
-
Use FlutterFlow, HTML/CSS/JavaScript, or animation libraries (e.g. Lottie, GSAP) to build them.
-
Ensure animations are functional and ready for integration into the app.
-
Types of interactive components can include:
-
Navigation menus with interactive icons
-
Slide-in or expanding side menus
-
Pop-up windows or modals
-
Animated call-to-action buttons
-
Screen/page transitions
-
Other creative interaction ideas (upon discussion with lecturer)
-
LOTTIEFILES ANIMATION
In Task 2, I mentioned that I created several micro-animations using
the LottieFiles platform. After designing the animations, I exported
them as .json
files, which are compatible with FlutterFlow. Since FlutterFlow provides
built-in support for Lottie animations through its Lottie Animation
widget, I was able to upload the exported files directly into the
platform. This allowed me to effectively integrate the micro-animations
into my app, enhancing the overall user interaction and interface
experience in a smooth and visually appealing way.
FLUTTERFLOW
Then, I have utilized the FlutterFlow platform to redesign the Moovit app, focusing on improving its user interface and interaction flow. I began my development process by creating a Loading Page, followed by the Log In and Sign Up pages. Once the authentication flow was in place, I proceeded to develop the core of my MVP flow, the Navigation Page, which required the integration of Google Maps.
To enhance the navigation experience, I also created an additional Map Page, allowing users to have a more focused and detailed view of the map. In this page, users can input their current location (e.g., Taylor’s University) and set their destination (e.g., Sunway Pyramid). Upon entering this information, the app will display the route information, showing the user how to reach the destination with step-by-step guidance.
To support this, I developed a custom Route Info Panel component that dynamically displays the travel route details. This includes walking directions, BRT (Bus Rapid Transit) steps, and estimated time to arrival, which greatly improves the overall clarity and usability of the navigation feature.
- Loading Page
.json
format and uploaded it into FlutterFlow using the built-in Lottie Animation
widget. This animation acts as a welcome screen to greet users as they
launch the app.
In terms of visual design, I adhered to a consistent colour palette throughout the app, focusing on orange, black, and white to maintain visual branding and coherence. The Loading Page reflects this palette, establishing the app’s identity right from the beginning.
- Log In Page
For the Log In Page, I designed a welcoming and user-friendly interface that invites users to access their accounts. At the top of the page, I included a welcoming message to greet users as they return to the app. Below that, I placed two input text fields: one for the email address and another for the password.
To enable this functionality, I set up Firebase Authentication using the Email/Password method and integrated it with FlutterFlow. This allows users to securely log into their accounts. In FlutterFlow, I connected the input fields to the Firebase backend so that when users click the "Log In" button, their credentials are verified through Firebase.
In addition, I included a small text link below the login form that says something like "Don't have an account yet? Register now!". This link navigates users to the Sign Up Page if they haven’t registered yet. Once successfully logged in, the app will direct users to the Navigation Page, which serves as the main interface of the app.
- Sign Up Page
Once the user fills in the fields and clicks the "Sign Up" button, their information is sent to Firebase for account creation. Upon successful registration, users are automatically navigated to the Navigation Page, which is the main content hub of the app.
Just like the Log In Page, the Sign Up Page also includes a small text link that says something like "Already have an account? Log In". Clicking this link will redirect users back to the Log In Page, allowing returning users to easily access their accounts if they have already signed up previously.
This seamless navigation between the Log In and Sign Up pages improves the overall user experience and ensures a clear, straightforward authentication flow within the app.
- Navigation Page
I have developed the Navigation Page as the core of my Moovit app redesign, focusing primarily on usability and clear access to route information. At the top section of this page, I embedded a Google Maps widget, which displays the user's current location. For the purpose of this prototype, I have set the default location marker at Taylor’s University, which is visually represented on the map through a customized location marker.
Below the map, I implemented a PageView widget that allows users to horizontally swipe between three distinct route-related sections:
-
Suggested Routes – displays recommended travel options.
-
My Preferred Route – lets users view routes they have saved or frequently use.
-
Nearby Stops – provides information on nearby bus or train stations for easier access to public transport.
Continuing down the page, I added a Nearby Attractions panel. This section highlights nearby popular spots such as restaurants and cafes, with clickable category icons for users to filter their preferences. These include Beverages, Pastry, Coffee, Foods, and Fast Foods, that helping users quickly find what they’re looking for around their location.
Following that, I incorporated a Weather & Forecast widget, which provides a snapshot of the current weather conditions as well as the forecast for the next few days. This feature is paired with simple reminders such as “Remember to bring an umbrella” on rainy days or “Stay hydrated” on hot sunny days, offering helpful prompts based on weather changes that may affect a user’s journey.
At the bottom of the page, I included a Navigation Bar for quick access to other sections of the app. The nav bar consists of five icons:
- Home
- Ticket & Finance
- Navigation & Map
- Stations & Lines
- Profile
However, for this project, my main focus has been on developing the MVP flow, which is centered specifically on the Navigation & Map Page. This is where the core user experience lies, offering a full route planning and travel support system integrated with interactive map features.
- Map Page
On this page, users can input or select their current location and desired destination. For the prototype, I have set the default location as Taylor’s University and the default destination as Sunway Pyramid. These are reflected on the Google Map widget, which displays two custom location markers which one for Taylor's University and one for Sunway Pyramid.
Beneath the map, there is a “Let’s Go” button. When clicked, this triggers the visibility of the Route Info Panel, a custom component I designed to provide users with step-by-step route guidance. The panel outlines the suggested method of travel, including walking time, public transport details (such as BRT), and total estimated time that helping users clearly understand how to get from their current location to the destination.
This page plays a key role in the overall MVP flow, as it brings together the core features of route planning, map interaction, and clear travel instructions in a user-friendly format.
- Half- Completed Moovit App Walkthrough Video
This walkthrough video showcases the interactive prototype developed in Task 3, focusing on the core features of the Moovit app redesign. Built using FlutterFlow, the prototype includes micro-interactions and animated elements such as the Loading Page animation, the functional Navigation Page with Google Maps integration, and the Route Info Panel. View the to walkthrough video below to explore how the MVP flow was brought to life through interactive components and transitions.
- Modifications - Final Task Updates
For the Final Task, an additional Bus Station Page was introduced to enhance the overall user experience. Within the PageView widget under “Nearby Stations,” users can now tap on Sunway Lagoon BRT Station to view its precise Google Maps location, complete with a location marker. This helps users visually identify the station and understand its surroundings.
To further improve usability, a bookmark icon button is placed above the map. When tapped, the button triggers a micro-interaction animation. This feature allows users to easily save or favourite frequently visited stations for quicker access in the future.
- Final Walkthrough Video and Video Presentation
- Moovit Web Deployment Published Link
REFLECTION
At the beginning of this task, I faced a lot of difficulties as FlutterFlow was completely new to me. It was hard to even get started since I was not familiar with the interface, functions, or logic behind how it worked. I spent a lot of time exploring, testing, and learning how to use the platform effectively.
As I continued working on the prototype for our final project, I slowly became more familiar with FlutterFlow's system, including how to build UI elements, connect interactions, and manage state. Although it was quite challenging, this task helped me gain a better understanding of how interactive components are designed and developed in a low-code environment.
I am thankful to my peers who occasionally guided me when I was stuck and to our lecturer, Mr. Razif, for his support and feedback. This experience pushed me to be more independent and gave me confidence to explore new tools like FlutterFlow on my own.
Comments
Post a Comment