Application Design 2 - Final Project : Completed App

 21/04/2025 -  ( Week 11 - Week 14 )

Ho Winnie / 0364866 

Application Design 2 / Bachelor's of Design Honors In Creative Media 

Final Project : Completed App

---

1. Final Project - Completed App

2. Feedback 

3. Reflection 

---

1. Final Project - Completed App

Requirements : 

"Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience."

Recap of Completed Features in Task 3 : Click HERE for the blog post

• Splash Screen – Built with Lottie animation and smooth page transition to the login screen.

• Login Page – Fully functional with input fields, buttons, and animated transitions.

• Onboarding Pages – Designed interactive onboarding screens with animations and a transition to the home page.

• Trip Setup – Pages for selecting departure/destination and choosing travel dates using custom popup components.

• Sort & Filter Options – Interactive filter page with toggleable checkboxes and chips.

• Bus Schedule Page – Displays available buses with toggle icons to mark favorites.

• Seat Selection – Fully functional seat layout allowing users to choose seats.

• Passenger Management – Added a popup to input passenger details easily.

• TBS Points Redemption – Implemented redemption feature with animations for a smoother user experience.

• Payment Flow – Completed payment page with animations

Progression : 

For my final project, I have successfully completed the Ticket Page along with a fully functional bottom navigation bar that allows seamless navigation between the main sections of the app.

Key Features Completed in Final Project : 

• Bottom Navigation Bar:

  • Fully functional navigation between Home, Tickets, and Profile pages.

• Ticket Page:

  • Displays upcoming tickets for easy access to future trips.

  • Shows past tickets so users can review their travel history.

• Profile Page:

• Includes a FAQ section with dropdowns for common questions, making it easy for users to find answers quickly.

Bottom Navigation Bar : 

For the bottom navigation bar, I built the entire layout in FlutterFlow as a reusable component. Each icon was designed as a pressable button, and I assigned navigation actions to redirect users to their respective pages: Home, Tickets, and Profile.

To make the user experience smoother, I added slide left/right transition effects when navigating between pages. This approach not only keeps the design consistent across all pages but also ensures that updates to the navigation bar can be easily made from a single component.

Fig 1.1 Bottom Navigation Bars

Purchased Ticket + Ticket Section ( Shows upcoming and past ticket ) :

For the purchased ticket page, I designed the layout by systematically using a combination of containers, rows, and columns to properly organize all the ticket details in a structured way. Each section of the ticket, such as departure and arrival locations, travel date and time, passenger information, seat number, and QR code, was placed carefully within rows and columns to maintain proper alignment and spacing. The use of containers ensured that each part of the ticket information was grouped together for better readability and a clean UI structure.

To make the page more visually engaging, I added a scale animation that triggers on page load. This animation smoothly transitions the ticket component from a smaller scale to its full size, creating a “pop-in” effect. The animation not only makes the page feel more dynamic but also provides a sense of feedback to the user, indicating that the ticket has successfully loaded.

Fig 1.2 Build Process for Purchased Ticket

For the ticket section, I designed a page that allows users to view both their upcoming and past tickets. The layout was built using a combination of Stack, Column, Row, and Container widgets, ensuring that each ticket card is neatly organized with details such as departure and arrival points, date, time, seat information, and ticket price. Each ticket card also includes action buttons like Refund, Receipt, and View for better interactivity.

To make the interface more engaging, I implemented slide-in animations for the ticket cards, creating a smooth transition effect as the page loads. Additionally, I set up buttons for switching between the upcoming and past ticket views, using the Action Panel to navigate to the corresponding pages with a fade transition. This improves the overall user experience by providing a responsive and visually appealing interaction.

Fig 1.3 Build Process for Ticket Section

Profile Section ( Shows profile settings and able to view FAQs ) : 

This is the profile page that I built to display user-related settings and navigation options. The page was structured using a Stack with Columns and Rows to organize the user avatar, name, and various profile options neatly. Each option, such as TBS Wallet, Community, Directory, FAQ & Support, and About, is placed inside a Container with an accompanying icon and text label for a clean and intuitive interface.

To make the page more dynamic, I added slide and fade-in animations to the elements so they appear smoothly when the page loads. For interactivity, I configured actions in the Action Panel, such as navigating to the FAQ page with a fade transition effect when the FAQ & Support option is tapped. This enhances the user experience by providing seamless navigation within the app.

Overall, the profile page serves as a central hub for users to access important settings and features. The combination of organized layout, subtle animations, and functional navigation ensures that the page feels polished while remaining easy to use.

Fig 1.4 Build Process for Profile Page

This is the FAQ section I created to help users quickly find answers to common questions and manage recent bookings. At the top, I added a search bar so users can search for specific FAQs. Below that, each FAQ item is structured with a toggle arrow button—when tapped, it expands to show the corresponding answer, making the interface interactive and easy to navigate.

Additionally, I integrated a ListView to display users' recent ticket purchases, where each ticket card includes a "Report" button. This allows users to quickly report any issues related to their bookings, adding practical functionality to the page.

To enhance the overall user experience, I included slide and fade-in animations so the FAQ items and ticket list appear smoothly when loaded. The Action Panel was configured to handle the toggle states and navigation between the FAQ pages, ensuring a seamless and dynamic interaction flow.

Fig 1.5 Build Process for FAQ Pages

Final Submission : 

Flutter Web Deploy App : https://tbsapp-winnie.flutterflow.app/  (Please inspect and view in mobile size which is 393 x 852 - view in incognito mode if link is viewed before previously) 

App Walkthrough Video : 

App Presentation Video : 

---

2. Feedback

Week 14 : App is okay and ready for submission

---

3. Reflection

Experience : 

Working on this final project was an enjoyable and fulfilling experience. Since I had already completed most of the core features during Task 3, the final stage focused mainly on refining the app by building simpler sections like the profile and ticket pages. Using FlutterFlow made the development process efficient and intuitive, and I appreciated how much could be achieved without writing code. I also want to thank Mr. Razif for his continuous guidance and for introducing me to this platform, which has been a valuable learning experience.

Observations : 

I observed that proper planning and time management played a big role in making the process smoother. By working on the more complex tasks — such as the booking flow, seat selection, and payment features — earlier in the project, I was able to leave the simpler features for later, reducing last-minute stress. FlutterFlow’s component-based design and built-in backend integration made it easier to structure the app logically, and my prior coding knowledge helped me understand how to organize widgets effectively.

Findings : 

Through this project, I found that no-code tools like FlutterFlow are powerful for rapid prototyping and building functional apps quickly, especially when paired with good planning. I learned how to combine visual design with logic using features like Action Flows, page states, and animations to create a polished user experience. Overall, the project reinforced the importance of tackling harder tasks early, using time efficiently, and leveraging the right tools to build a professional and functional MVP.