Application Design 2 - Task 2 : Interaction Design Proposal & Planning
21/04/2025 - ( Week 5 - Week 7 )
Ho Winnie / 0364866
Application Design 2 / Bachelor's of Design Honors In Creative Media
Task 2 : Interaction Design Proposal & Planning
This week, we were introduced to FlutterFlow, the main platform we’ll be using to develop our final application. Mr. Razif guided us through the fundamentals of building a fully functional user authentication flow, including login, sign-up, and dashboard pages. We also learned how to integrate Firebase with FlutterFlow, enabling real-time data storage and secure user authentication.
During the session, we explored Firebase Authentication, which allows users to create accounts and log in using their email and password. Mr. Razif demonstrated how to set up Firebase in the FlutterFlow project settings and link the sign-up and login buttons to the corresponding authentication actions. Once logged in, users are redirected to a personalized dashboard, showcasing dynamic content based on user data from the Firebase backend.
In addition to the hands-on tutorial, we gained insights into FlutterFlow's drag-and-drop UI builder, custom functions, and how the platform supports low-code development, making app creation faster and more accessible—even for those with limited coding experience.
This introduction helped us understand the importance of backend integration in modern app development and gave us a strong foundation to start prototyping our own applications. Below is the final outcome of the in class exercise :
A. Master Plan & Story Boarding
For Task 1, where I’m working on the recreation of the TBS app, I’ve been tasked with creating a Master Interaction Board. This board outlines my main plan for both macro and micro interactions across the app. The macro interactions cover the broader user flows—like booking a bus ticket or checking schedules—while the micro interactions focus on the finer details, such as hover effects, button animations, and feedback when a user takes an action. These small touches are important for making the app feel polished and responsive.
After completing the interaction board, I’ll move on to the Storyboard, where I’ll map out the animation plan for each user flow. For every screen or interaction, I need to consider and define three types of animations:
-
On-load animation – what happens when the page or component first loads.
-
On-page animation – animations triggered by user interactions or movements within the same page.
-
Off-load animation – what the user sees when they leave the current page or component.
This process helps me ensure consistency in how the app behaves and feels, while also aligning the motion design with the overall brand experience and usability goals of the new TBS app.
 |
| Fig 2.1 Overview of Master Plan |
 |
| Fig 2.2 Overview of Story Board |
Overview of Figma file : Click HERE to access
- The splash screen starts with a small bus that scales up at the center. It then transitions into the three-stripe logo, which eases out as the "TBS" text springs in, followed by the tagline. The sequence ends with the bus driving from left to right, leading into the main screen.
 |
| Fig 2.3 Overview of Splash Screen Animation |
The onboarding flow begins with a visually engaging image fade-in paired with a bottom sheet
Users progress by clicking to slide the screen to the left, revealing the next onboarding page.
-
The flow ends with a left-to-right bus animation as the user clicks “Let’s Get Started,” smoothly transitioning to the next screen.
The booking screen begins with a bus graphic sliding in from the left and settling below the “Book Your Next Trip” title, creating a guided and engaging entry.
- As the bus exits to the right, the main content (TBS Wallet & booking form) slides up into view, transitioning the user from animation to interaction.
- Users can swipe horizontally between panels like promotions and active tickets, while selecting options such as destination triggers a smooth bottom overlay. The flow ends with a fade-to-white screen transition upon tapping “Search Bus.”
 |
| Fig 2.7 Overview of Home Page Animation |
- The page begins with the top header bar fading in from above, followed by the date selector sliding up from the bottom. Search result cards then appear in batches with a fade-in and slight upward motion
- When a bus card is selected, it slightly enlarges before the screen slides left or fades out, leading to the seat selection page.
- Users can slide the date selector horizontally to browse different days.
- They can also scroll vertically to explore the list of available bus schedules for the selected date.
 |
| Fig 2.9 Overview of Bus Schedule Animation |
- The filter drawer begins by sliding down from the top, displaying a blue header labeled “Sort & Filter.” The filter form (including sort options, time, class, and company) fades in and slides up slightly from the bottom.
- Upon tapping the "Apply" button, the entire filter panel fades out, smoothly returning the user to the previous screen.
When users tap a filter option (time/class/company), the selected box transforms with a subtle bounce, changes to green, and displays a tick—clearly indicating selection.
 |
| Fig 3.1 Overview of Filter Animation |
- The seat selection screen begins with the legend fading in with a slight zoom, followed by the seat layout (bus grid) scaling in from 20%.
- Once users tap the "Next" button, the entire seat map slightly blurs or fades out, transitioning to the next step smoothly.
- Tapping a seat changes its color to green and triggers a sliding animation that reveals the seat information panel.
- Users can also scroll vertically to browse all available seats.
 |
| Fig 3.3 Overview of Seat Selection animation |
- The screen begins with the route and date header easing in , followed by the contact details card fading in with a subtle scale-up animation.
- Once the “Next” button is tapped, the entire screen fades out, transitioning to the next step.
- Users can scroll vertically to view details and horizontally to browse insurance plans.
- When users click on "Add Passenger" , a overlay will slide up from the bottom
- When a passenger is selected, a green tick animation appears beside the name along with the total price, confirming the selection.
 |
| Fig 3.5 Overview of Adding Passenger Animation |
- The screen begins with the “Payment Details” header fading in, followed by the TBS E-Points rewards card sliding up from the bottom.
- If the user taps “Redeem Points,” a loading spinner and redemption animation play before returning to the payment screen with an updated price and fade-out transition.
- Users can scroll vertically to view available payment methods.
- The progress bar animates smoothly from 0 to its current value, visually representing the earned points.
 |
| Fig 3.7 Overview of Redeeming Points Animation |
- The screen starts with a payment card scaling in from 0.8× to full size using an ease-out effect.
- Once the user taps “Confirm & Pay,” the screen fades to white and displays a payment processing animation, indicating progress before moving to the next step.
 |
| Fig 3.9 Overview of Making Payment Animation |
- The tab selector (Upcoming / Past) softly bounces into view, followed by ticket cards fading and sliding up sequentially.
- When switching between tabs, the page fades out and new ones slide in from the bottom
- Users can interact with the tab selector to view different ticket states
 |
| Fig 4.1 Overview of My Tickets Animation |
- The screen begins with the search input field fading and sliding in from the top, followed by FAQ cards entering with a slight upward motion.
- Booking issue cards then slide in horizontally from the left. When exiting, the entire page gently fades out to transition away.
- Users can tap to expand/collapse FAQ items, triggering a 90° rotation of the arrow icon.
- They can also horizontally scroll through the booking issues tab for quick navigation.
 |
| 4.3 Overview of FAQ Animation |
 |
| Fig 4.5 Video Editing |
3. Feedback
Comments
Post a Comment