Application Design II · Task 3 · Interaction Design

- 7 July 2025 / Week 8 - Week 11

YANG ZHI CHING / 0365154

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

Task 3 · Interaction Design

---

INSTRUCTION

Doc 1.1 MIB

Requirements:

1. Interaction Design in Flutter Flow

2. Project Blog Post

3. Presentation Video

---

Task 3 · Interaction Design in FlutterFlow

For this task, I developed a complete interaction design using FlutterFlow, based on the prototype I created during the previous project.

1. What is FlutterFlow?

FlutterFlow is a visual application builder powered by Flutter. It allows designers and developers to build fully functional applications through a low-code, drag-and-drop interface. The platform supports custom actions, Firebase integration, API calls, animations, and more, making it ideal for rapidly building interactive and responsive applications.

2. FlutterFlow Tutorial Video

I referred to tutorials on the "FlutterFlow University" YouTube channel, which were particularly helpful in guiding me through the fundamentals of widget structuring and page transitions.

Progression |

1. OnBoarding Page

When I first started using FlutterFlow, I found that understanding basic widgets like Row, Column, and Container was essential. Leveraging the knowledge I gained in Mr. Razif's class and from online tutorials, I successfully created the onboarding page using the PageView widget. This helped me implement multiple screens that users can swipe through, which aligns with my initial onboarding design in Figma.

Fig 1.1 Landing Page

2. Sign Up / Sign In Page

Similar to the onboarding page, I also used PageView for the sign-up/sign-in flow. However, I redesigned the layout of the input fields to reflect a more modern and professional appearance. This updated design feels cleaner and better aligns with current mobile UI/UX standards.

 

Fig 1.2 Sign In Page Old Version and New Version

Fig 1.3 Sign In and Log In Page

3. Home Page and Navigation Flow

I utilized the Stack widget to layer the Google Maps widget beneath a semi-transparent info panel. This structure allowed me to replicate most of the visual layout from my Figma design — about 80%-90% of the interface was successfully translated into FlutterFlow.

Unfortunately, I encountered issues with the Google Maps widget because enabling full functionality requires linking a credit card for Google Cloud billing, which I haven’t been able to do yet. As a result, I haven't fully implemented features like route preview maps and step-by-step navigation that require Google Maps authentication.

Fig 1.4 Home Page and Search Page

In terms of navigation, my next step is to integrate:

• A report system
• A "Successfully Arrived" reward pop-up window
• Route visualization and interaction with Google Maps

Fig 1.5 Route Page

4. Notification Page

From the bottom navigation bar on the Home Page, users can access the Notification Page, along with other sections like Profile and Rewards. However, due to time constraints, I haven’t fully developed the Profile Page or Rewards System. For now, my focus remains on building the main navigation flow of the app.

Fig 1.6 Notification Page

5. Overall User Flow

Landing → Onboarding Pages → Start Button → Choose Sign Up or Log In →
Sign Up → Popup Message (Welcome/Hi [Username]) (not implemented yet) →
Home Page → Enter Destination in TextField → Search Results →
Tap Kuala Lumpur → View Preview Map → Start Navigation →
Follow Navigation Steps → End Journey → (Show Rewards - not implemented yet)

Fig 1.7 Work Place in Flutter Flow

Still To-Do List:

• Sign-up / login database integration

• "Welcome back" / "Hi [username]" pop-up after login

• Google Maps access, preview route, and real-time navigation

• Rewards pop-up upon journey completion

• (Optional): Profile Page and Info Page (e.g., route summary or line checking)

6. Walkthrough Video

Fig 1.8 Walkthrough Video

Presentation Video |

Youtube Link :  https://youtube.com/shorts/2NvbIx-hxCc?si=QMyeQx9ImMq_ekQO

---

Reflection |

Throughout this task, I observed that although FlutterFlow provides a visual interface that simplifies the development process, it still requires a solid understanding of app structure, logic flow, and UI hierarchy. Without knowing how widgets like Stack, PageView, or ListView work together, it becomes difficult to manage dynamic interactions effectively.

While designing the interaction flow, I encountered limitations — such as needing a valid Google Maps billing setup — which halted some key features. This taught me that certain app functionalities depend on backend configurations, which must be prepared early.

From a design perspective, I learned how important it is to keep layouts clean and consistent. I refined my UI design to look more professional and minimal, which also made the interaction flow more intuitive.

One major challenge was time management. This semester has been packed with heavy coursework, and I often found myself spread too thin to dive deeply into every function. As a result, I prioritized the core user journey over supplementary features like the profile or reward systems.

What I gained most from this project is a much deeper practical understanding of FlutterFlow, especially how to convert Figma wireframes into actual, functioning pages. While I’ve built most of the visual side, interaction logic (actions, conditionals, data binding) still requires further exploration and energy.

---

Further Reading |

FlutterFlow University 

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