APPLICATION DESIGN // TASK 03

  Hasnol Rafiq Bin Hasnol Raduan / 0356767

Advanced Interactive / Bachelor of Design (Hons) in Creative Media / Taylor's Design School

---

Task 03:

Sign In / Log In Page

I will delve into the journey of building the sign-in page using HTML and CSS, reflecting on the design choices, coding practices, and learning experiences throughout the process. The first step was to set up the basic structure of the HTML document. I opted for a simple yet effective layout that ensures a smooth user experience. Here is the initial code structure:

Initial Code Structure

When styling the page I aimed for a clean, user-friendly interface with a blue and white color scheme inspired by the Malaysian Train service. The CSS styles defined the overall look and feel of the page:

Styling Code Structure

To make the form functional, I added a simple JavaScript snippet that handles the form submission. The script prevents the default form submission, validates the inputs, and redirects the user to a new page:

Adding Interactivity with Javascript

Maintaining a consistent design language across the app was crucial. I chose colors and fonts that align with the Malaysian Train service, ensuring users feel familiar and comfortable. The use of a flexible container and percentage-based widths ensures the page looks good on various devices, from mobile phones to desktops. Providing immediate feedback, such as alerts for missing fields, improves the user experience by guiding them to complete the form correctly. The current script is basic and can be enhanced with more robust validation, error handling, and integration with a backend server for real-time authentication.

Sign-in/Login Page

Creating the KTMB train ticket booking app's sign-in page was a valuable learning experience. It allowed me to apply my HTML, CSS, and JavaScript skills to build a functional and aesthetically pleasing interface. Moving forward, I plan to incorporate more advanced features and improve the app based on user feedback and testing.

Homepage

The primary goal of the KTMB app is to provide a user-friendly, intuitive, and visually appealing platform for users to book train tickets effortlessly. Key design goals included:

• Clarity: Ensure the interface is easy to navigate.
• Efficiency: Minimize the number of steps required to complete a booking.
• Responsiveness: Make the app accessible on various devices.

Structure with HTML. The foundation of the app was laid out using HTML, focusing on creating a clean and semantic structure. Here’s a brief breakdown of the HTML components used:

• Header: A fixed header to display the user's KTM Wallet balance.
• Journey Section: Dropdowns for selecting journey details like time, origin, and destination.
• Booking Details: Inputs for selecting travel dates and the number of passengers.
• Promotions and News: Sections to display ongoing promotions and news items relevant to travelers.

Structure with HTML

The CSS was designed to enhance the user experience with a visually appealing and coherent color scheme, focusing on blues and whites, resonating with KTMB’s brand identity. Key styling elements included:

• Responsive Design: Ensuring the app looks good on both mobile and desktop screens.
• Fixed Header: Keeping important information always visible to the user.
• Interactive Elements: Dropdowns, calendars, and buttons that provide feedback when interacted with.

CSS Structure

JavaScript was employed to make the app interactive. Key functionalities included:

• Dropdown Menus: Allowing users to select options for journey details.
• Calendar: Enabling users to pick travel dates dynamically.
• Form Validation: Ensuring all required fields are filled before proceeding.

Javascript Functionality

Having the app include responsive design proved to be a challenge. Ensuring the app works well on various screen sizes was challenging. Media queries and flexible layouts were employed to address this. The dropdown functions and managing multiple dropdowns required careful handling of events and states to prevent unwanted behaviors. Creating a user-friendly and functional calendar from scratch involved managing dates, months, and user interactions dynamically.

Homepage

Developing the KTMB train ticket booking app has been a rewarding experience. It allowed me to apply and expand my skills in HTML, CSS, and JavaScript, focusing on creating a seamless user experience. This project underscored the importance of thorough planning, user-centered design, and iterative development. I look forward to refining this app further based on user feedback and adding more advanced features in the future.