Posted by

Application Design 2 Task 4

21/4/2025 - 15/8/2025 / Week 1 - Week 14

Jie Xuan/ 0356515

Application Design II/ Bachelor of Creative Media/Taylor's University

Task 4: Interactive Component Design & Development

TABLE OF CONTENTS

1. Lectures

2. Instruction

3. Task 4 : Final Project

4. Feedbacks

5. Reflections

LECTURES

INSTRUCTIONS

Timeframe: Week 12 – Week 14

Description:

A) Final Project – Completed App – 30 %

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.

B) E-Portfolio - 10 %

Students describe and reflect on their social competencies within the design studio context, supported by evidence. Reflect on how to empathize with others within group settings, interact positively within a team and foster stable and harmonious relationships for productive teamwork. Reflective writing is part of the TGCP.

Requirements:
Presentation Slide to be submitted as pdf format.
Online posts in your E-portfolio as your reflective studies

TASK 4: FINAL PROJECT
A. Modification and Overall Enhancement of FlutterFlow
Splash Screen & Loading page before login page



For Task 4, I refined my splash screen animation by replacing the old loading bar from FlutterFlow with a new loading dots animation from LottieFiles. The animation run 3000ms. 

Homepage

  


This screen acts as the main page for booking train tickets. It greets the user (“Hello, Jie Xuan”) and lets them choose between One Way or Round Trip. Users can fill in details like Departure, Arrival, Train Class, number of passengers, and Date, then tap the yellow Search button to continue.

Below that is a Deals & Offer section showing promotions like an RM20 discount for new users. The layout is simple and easy to use, with a bottom menu for quick access to Home, Ticket, Rewards, Wallet, and Profile pages.

Seat Select Page

This page has been set as a scrollable page to accommodate more seat rows. At the top, a color legend helps users understand seat status: Green = Available, Red (X) = Not Available, Yellow = Selected. 
Below that is a scrollable layout showing seat arrangements from Coach A to D. Users can scroll down to view more seats and tap on available ones (green) to select them, which then turn yellow. This layout is interactive and user-friendly, allowing users to easily browse and choose their seats before continuing with the booking. 

Proceed Page

After choosing the seat. The micro animation is slide up. Below the seat map, a confirmation box summarizes key trip details:

  • Departure: Kuala Lumpur KTM

  • Arrival: Ipoh KTM

  • Seat Numbers: B0019, B0020

  • Number of Passengers (Pax): 2

  • Total Price: RM85

At the bottom, there are two buttons: Cancel to go back or Proceed to move forward with the booking. This page helps users review their selected seats and trip info before final confirmation. The layout is clean, clear, and scrollable if more content is added.

Ticket Fill Page 




The video showcases the Payment Detail screen within the KTMB mobile ticketing app. The screen provides users with a clear and simple overview of their selected journey and payment information before proceeding. Key features demonstrated in the video include:
  • Journey Summary: Shows departure (e.g., Kuala Lumpur KTM) and arrival (e.g., Ipoh KTM) stations, selected travel date, and number of passengers.
  • Selected Seats: Displays the exact seat numbers chosen by the user.
  • Price Breakdown: Clearly outlines the total fare for the booking.
  • Action Buttons: Includes a "Cancel" button to return to the previous screen and a "Proceed to Pay" button for confirming and initiating the payment process.
The design is clean and user-friendly, ensuring travelers can review and confirm all key details before moving forward. This screen serves as a final checkpoint to avoid booking errors and enhances overall booking confidence.

Reward Page

This is the Rewards Page (PRewardPage) in FlutterFlow. It shows the user’s current reward points (e.g., 200/1000) with a progress bar to track how close they are to their next reward.

There are three quick access buttons:
  • Browse Rewards
  • Check Voucher
  • History
There’s also a section for today’s top deals to encourage users to earn and redeem points. At the bottom, the Popular Rewards section displays rewards like a free ticket (800 points) and RM10 discount (100 points). The page is scrollable, user-friendly, and includes a bottom menu for easy navigation.

Profile Page

This Profile Page  is a new page added in Task 4. It shows the user's photo, name, and email at the top. Below, there are two sections:
Your Account:
  • Edit Profile – to change personal info
  • Notification Settings – to manage alerts
App Settings:
  • Support – to get help
  • Terms of Service – to view app rules
The design is clean and easy to use, with a soft blue background and bottom menu for quick navigation. This page helps users manage their account and settings easily.

C. Final Submission
Published Web Addressed URL : https://ktmbmobile-jiexuan.flutterflow.app/
Presentation Video: xxx

xxx


FEEDBACK

WEEK 11
General Feedback: -
Specific feedback: -

WEEK 12
General Feedback: -
Specific feedback: -

WEEK 13
General Feedback: -
Specific feedback: -

WEEK 14
General Feedback: -
Specific feedback: -

REFLECTION
Observation
After completing this task, I realized that this subject is quite challenging, but I also learned a lot. I observed that FlutterFlow is similar to Figma in some ways, especially in design layout. However, FlutterFlow has more advanced features because it involves some coding. This made the development process both easier and harder—easier to design, but harder to implement since everything was new to me. I also noticed that FlutterFlow has some limitations compared to Figma. For example, certain design functions available in Figma are not available in FlutterFlow, which made the process slightly more difficult, especially without previous hands-on experience.

Finding
One important finding was how useful external tools and resources are in helping me learn faster. Tools like ChatGPT and online tutorials made it easier for me to understand new features and solve problems. They helped me save time and learn more effectively. I also noticed how crucial it is to focus on both functionality and user experience. Simple things like consistent spacing, intuitive navigation, and well-timed animations helped the app more user friendly. 

Experience
This project gave me valuable hands-on experience in turning my ideas into real, working app features. Even though it was my first time using many of these tools, I gained a better understanding of how UI/UX design and animations work together. Most importantly, I learned how real app development requires testing, problem-solving, and thinking across different areas. This experience helped me feel more confident and prepared to keep learning and improving. I have a clearer understanding of how to structure a mobile app, how to turn ideas into interactive prototypes, and how to work within the limitations of a platform like FlutterFlow. 

Comments

Post a Comment