Application Design 2 / Task 3

Shim Yi Xun || 0363292

Bachelor of Design (Honours) in Creative Media
  Application Design - DST 61004  

Application Design 2 - Task 3

  Overview  

> Module Information Booklet

> Task Instruction

• FlutterFlow Progress
• Presentation Video
• Walkthrough Video
• Final Submission

> Reflection

  Module Information Booklet  

  Task Instruction - Interactive Component Design & Development  

Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.

Interactive Components/Elements can be:
● Navigation Menu with interactive icons.
● Side Menu interaction
● Pop-Up boxes
● Call to action buttons
● Page/Screen transitions
● Etc. (Discuss with the module coordinator for further clarification)

  FlutterFlow Progress  

Splash Screen

In my initial Figma design plan, the Splash Screen was supposed to be a gradient background. However, due to the current limitations of FlutterFlow, I adjusted the design to use a solid orange background instead.

Onboarding Pages

While designing the Onboarding flow, I discovered that FlutterFlow’s built-in progress indicator offered limited customization options. To maintain a more engaging user experience, I created a custom animation using LottieFiles and added it to the Onboarding Pages.

Login/Signup Pages

The Signup Page was not included during the initial prototyping stage in Figma. However, upon transitioning to FlutterFlow, I took advantage of its built-in authentication features, which integrate with Firebase for secure data storage. And also to ensure a logical user flow, so I added the Signup Page at this stage.

Additionally, I added a small feature to improve the login experience. The Log In button is disabled at first and only becomes active after the user fills in all the required fields. This gives users a clear visual cue and makes the flow feel more intuitive.

Home Page

There weren’t any much changes to the Home Page layout, it mostly stayed the same as planned. I did make a small update to the navigation bar icons. Since it was tricky to import external icon sets into FlutterFlow, I decided to use the built-in icons instead.

Ride Booking Page (Sections)

This was by far the most challenging part of the entire task. In my original prototype plan, I envisioned the rectangular sections stacked together, allowing users to flexibly switch them using the Next and Back buttons. However, bringing this idea into FlutterFlow turned out to be a real struggle, it honestly felt like HELL MODE.

I spent several days exploring different solutions, and eventually figured it out by using App State with an integer data type to control and display each section dynamically. 

As for the step-by-step progress indicator, I created a custom micro-animation using LottieFiles, which lights up according to the active section.

I carefully set the step value for each section and applied conditional visibility based on those values. All the sections are stacked on a single page, so instead of navigating between different screens, I simply made the inactive sections invisible. Then, I set up actions to show the right section according to the current step.

Save Location

I also implemented a Save Location feature, which is part of the app’s core MVP features. I used the Toggle Icon widget to create a responsive Saved icon. When a user saves a location, its status updates instantly, by switching to the Saved icon within the search section, which provides clear visual feedback and helps users easily keep track of their preferred destinations.

Driver Info & Contact Pages

On the Ride Status Page, users can tap the driver’s profile to view detailed driver information. In addition to that, contact options like call and chat are also provided, allowing users to easily get in touch with the driver if needed.

Cancel Ride

I applied the same logic as the section navigation for the Cancel Button. When the button is clicked, a Cancel Confirmation Box pops up, with a semi-transparent overlay in the background to create contrast and draw focus to the box. This helps guide the user’s attention and makes the interaction feel more intentional and clear.

  Presentation Video  

Click HERE to view the presentation video on YouTube.

  Walkthrough Video  

Click HERE to view the walkthrough video on YouTube.

  Final Submission  

Click HERE to view published web.

  Reflection  

This journey has been a huge learning experience for me in using FlutterFlow to build a functional app. I started with just screen designs and ideas, but along the way, I learned how to work with app states, visibility conditions, custom animations, and Firebase integration. There were definitely frustrating moments, especially with multi-step navigation, but figuring out solutions step by step gave me a better understanding of how everything connects. Overall, this process helped me grow more confident in turning design into real, interactive features.