Posted by

Application Design 2 Task 3

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

Jie Xuan/ 0356515

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

Task 3: Interactive Component Design & Development

TABLE OF CONTENTS

1. Lectures

2. Instruction

3. Task 3: Interactive Component Design and Development

4. Feedbacks

5. Reflections

LECTURES
xxx

INSTRUCTIONS

Timeframe: Week 08 – Week 11 

Description:
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.

The output of this task is a working animation element that are ready to be integrated in their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using Flutterflow and Lottieflies with the use of animation framework if necessary. 

Interactive Components/Elements can be: 
Navigation Menu with interactive icons. 
Side Menu interaction 
Pop Up boxes
Call to action buttons
Page/Screen transitions 
Requirements:
1. Interactive components/elements created with Flutterflow and Lottieflies.

Submission:
1. Project link & Video Walkthrough.
2. Collaborator Links.
3. Online posts in your E-portfolio as your reflective studies

TASK 3: INTERACTIVE COMPONENT DESIGN AND DEVELOPMENT
A. Animation in Flutterflow
Loading Bar 

For the initial page, I insert a loading bar for the splash screen. But the visual outcome I think not so good. So I decided when Final Task I want to try out the Lottiesflies Animation. 

B. Developing App in Flutterflow
Splash Screen


My initial screen features the KTM logo accompanied by a FlutterFlow loading bar. However, the final visual of the loading animation did not meet my expectations. To enhance the user experience, I decided in final task I will explored LottieFiles to search for a more visually engaging loading animation. 

Onboarding Page






For this three onboarding page I insert KTM logo image and than the three onboarding image and paragraph and the progress indicator final visual a bit too big in Final Task I think I will refine the progress indicator. 

Login Page



This is a login screen designed using FlutterFlow for the KTMB Integrated Ticketing System mobile app. The layout includes a logo at the top, followed by input fields for username and password, a checkbox to agree to terms and privacy policy, a yellow "LOG IN" button, and options for account registration and password reset. Social login options via Facebook and Google are also provided. The page structured using a Column widget with nested Containers, Rows, and TextFields. 

Ticket Booking Page

This screen is part of the KTMB ticket booking app and allows users to view available train schedules after entering their travel details. The top section displays the selected departure, arrival stations, and travel date. Users can filter the results using tabs like Most Relevant, Fastest Route, and Lowest Price. Below, a list of train options is shown by class—Platinum, Gold, and Silver—with information including departure and arrival times, travel duration, passenger count, included amenities (e.g., breakfast, lunch, WiFi), and ticket price (e.g., RM85 for Platinum). The page provides a clean, user-friendly interface to help travelers easily compare and choose the best train option. 

Check Out Page 

This screen serves as the payment processing page in the KTMB mobile app. It features a simple and clean layout, with an animated illustration of a person running on a credit card, indicating that a payment is currently being processed. Below the image, the page displays the message "Payment Processing" followed by "Please Wait A Moment...", along with a loading indicator represented by loading bar. The structure consists of a Column inside a Stack, combining Text, an Image, and a Flutter flow animation to enhance user experience and provide visual feedback while the transaction is in progress. However, the final visual of the loading animation I think can be better. To enhance the user experience, I decided in final task I will explored LottieFlies to search for a more visually engaging loading animation. 

Payment Success Page


In this page I added a tick/checkmark animation using LottieFiles to indicate successful payment processing. The animation plays automatically once the page loads, giving users a clear and engaging visual confirmation that their transaction is being processed or completed. I used Lottie because it provides smooth and lightweight animations that enhance the user experience without affecting app performance.

Ticket Details Page

I designed the Ticket Details page to display the user's train ticket information clearly and professionally after a successful booking. At the top, I included a QR code for easy scanning during boarding. Below the QR code, I presented all essential travel details using neatly styled yellow buttons, such as departure time, departure and arrival stations, train class, seat numbers, ticket type, and number of passengers. I also added a 'Back to Home' button at the bottom for smooth navigation, along with a reminder to show the QR code when boarding. This layout helps ensure a user-friendly and efficient travel experience. 

Check Upcoming Ticket Page

This page shows the user’s train tickets in two tabs: Upcoming and Past. In the Upcoming tab, users can see their ticket details like travel date, time, departure and arrival stations, class (e.g. Platinum), price (RM85), and extras like breakfast and WiFi. Each ticket is clearly displayed in a card format. This page helps users quickly view and manage their bookings. 

Voucher Page

This page shows the user's vouchers in two tabs: "Redeem" and "Used". Under the Redeem tab, users can see different voucher cards, such as RM20 off for new users and rewards vouchers like RM10, RM30, or RM50 off based on points. Each card shows the voucher code, expiry date, and usage info. The layout is simple and clear, making it easy for users to check and use their available discounts. I also make the voucher section can scroll. 

Redeem Success Page

This screen is a simple confirmation page that appears after a user successfully redeems a voucher. It includes a celebratory image of tickets in a gift box, a bold "Congratulations!" message, and a short line confirming the successful redemption. At the bottom, there’s a yellow Back button that allows users to return to the previous screen. The layout is clean and visually positive to enhance the user experience after a successful action. 

Wallet Page

In this page displays the user's e-wallet information. At the top, it shows the current balance (RM231.00) along with a button to "Add Money" and a link to view detailed balance info. Below that, under the Card Information section, it shows a saved credit/debit card (e.g., RHB Bank, masked number, cardholder name, and expiry date). There's also a large plus icon, likely meant for adding a new card. The interface is clean, with a blue gradient background, and includes a bottom navigation bar for easy access to other parts of the app.

For task 4 I will continue Lottieflies Animation because I still not yet finish animation part.
Furthermore, I will finish the last 5 pages. Homepage, Seat select, Proceed Page, Ticket Fill Page, Reward Page and Profile Page. 

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

Presentation Walkthrough Video: https://youtu.be/qiwEqGY4Qfs



FEEDBACK

WEEK 8
General Feedback: -
Specific feedback: -

REFLECTION
Observation
Throughout the app development process in FlutterFlow, I observed that while the platform is user-friendly and efficient for building functional UI elements, visual polish still requires thoughtful customization. For example, the default loading bar used in the splash screen did not align with my visual expectations, prompting me to explore LottieFiles for smoother and more appealing animations. Additionally, components like the progress indicator on the onboarding page appeared oversized in the final build, showing the importance of previewing and adjusting UI elements regularly. Navigation across screens such as login, ticket booking, checkout, and voucher redemption worked well structurally but needed visual refinements for a more polished experience.

Finding
One of the key finding was how much of a difference animation makes in user engagement. By integrating LottieFiles especially in the payment success screen I found that even simple animations can greatly improve user experience and provide instant feedback. I also realized that visual clarity and layout consistency play a huge role in usability. For example, the Ticket Details and Upcoming Tickets pages were effective because they organized information cleanly using card layouts and styled buttons. The voucher and wallet pages similarly benefited from a simple, scrollable format. Overall, I learned that balancing design aesthetics with functionality is critical, and some default components in FlutterFlow may need adjustments to fully meet user expectations.

Experience
This project enhanced both my design and technical skills. I gained hands-on experience in building multi-screen app flows, managing data display, and applying conditional logic in FlutterFlow. Incorporating animations with LottieFiles was particularly enjoyable and helped me bring my app to life visually. I also learned how to improve from early drafts—for instance, replacing basic loading bars with animated elements and refining UI sizing. Looking ahead to Task 4, I plan to complete the animation features and finalize the remaining five screens: Homepage, Seat Select, Proceed Page, Ticket Fill Page, Reward Page, and Profile Page. Publishing my work through Flutterflow and documenting it in a walkthrough YouTube Video also gave me valuable experience in presenting and sharing digital products professionally. 

Comments

Post a Comment