Task 1 | App Design I Self-Evaluation and Reflection

-

25 September 2024
Simon Ko Jing Liang
0364359
Bachelor of Design in Creative Media


INSTRUCTION


Fig 1
Module-PDF

Task 1 | App Design I Self-Evaluation and Reflection

Background introduction

The application that I redesigned is KTMB (Keretapi Tanah Melayu Berhad). It is the main railway operator in Malaysia. It operates intercity and commuter train services throughout Peninsular Malaysia and also connects to Singapore and Thailand via its intercity services. KTMB plays a crucial role in Malaysia's transportation network, providing an alternative mode of travel for both passengers and cargo. The railway system managed by KTMB covers various destinations across the country, facilitating travel for commuters, tourists, and businesses alike.

Below is the link of the final outcome of KTMB that I redesigned and the video presentation.

 
Fig2 
Video

Onboarding Pages


Fig 3
Onboarding Pages

AI Evaluation

1. Design and Aesthetic Appeal:
  • Color Palette: The colors (yellow, blue, and white) are consistent, providing a clear, unified theme that feels modern and engaging. The use of bright colors like yellow conveys warmth and energy, while blue brings a sense of trust and calmness—ideal for a transportation service.
  • Typography: The font is simple and readable, which enhances the accessibility. The variation between headers (e.g., "BOOK," "TRAVEL," "ENJOY") and body text size helps in creating hierarchy, ensuring users focus on the right information.
  • Iconography and Illustrations: The minimalistic, flat illustrations work well in maintaining visual consistency. The characters in the images have relatable expressions and actions, making the process easy to understand.
  • Balance and Spacing: There's ample white space between the elements, ensuring the design doesn't feel cluttered. The clean design with moderate spacing between text and imagery improves readability and user focus.
2. User Experience (UX):
  • Simplicity: The steps (BOOK, TRAVEL, ENJOY) are presented in a linear, intuitive flow. This is essential in an onboarding process, as users will likely follow a sequential journey to get familiar with the app/service.
  • Interaction: The onboarding screens are instructional, and the inclusion of "Next" and "Start" buttons clearly indicates the flow of user interaction. This reduces confusion and makes navigation easier.
  • Clarity: Each step's purpose is clearly defined, and the action corresponding to each phase is easy to understand (booking, traveling, and enjoying the experience).
  • Engagement: The welcome screen with a strong CTA ("Login Now") is highly visible and uses an eye-catching color for the button. This ensures that the user immediately knows where to go next after completing the onboarding.
3. Branding and Communication:
  • Logo Consistency: The use of the KTM logo on the initial page is strategic, placing brand recognition upfront. This reinforces trust and informs users that they are in the right place.
  • Messaging: The brief text under each title is concise and to the point, communicating what the user will experience at each stage. However, you may want to ensure that the text is not only informative but also appeals emotionally to the user to increase engagement (for example, emphasizing ease of travel, convenience, or saving time).
  • Welcome Page: The image of the actual KTM train on the welcome page reinforces the service's real-world aspect. This connection with the physical service can boost the credibility of the app.

4. Functionality and Practicality:

  • Progressive Disclosure: Users are guided step-by-step, preventing cognitive overload by focusing on one action per screen (booking, traveling, and enjoying).
  • Call to Action: "Next" and "Start" buttons are effective, though you could consider ensuring all CTAs are consistent in color and size to make them more intuitive. Right now, "Next" buttons are blue, while "Login Now" is yellow. Consistency in button design would help reinforce what users should interact with.
5. Accessibility:
  • Color Contrast: The contrast between text and background is generally sufficient for readability. However, you might want to test these contrasts for users with visual impairments, especially for colorblind users, as yellow and white might blend for some individuals.
  • Language and Readability: The language is simple, clear, and jargon-free, making it accessible to a wider audience. Keeping the sentences short also helps improve the comprehensibility of the information.

Suggestions for Improvement:

  1. Enhance Emotional Engagement: You might add more emotionally-driven copy that emphasizes how the service simplifies travel, such as "Your easy, hassle-free journey begins here."
  2. Button Consistency: Consider using a consistent button color across all screens for a more cohesive experience (for example, all buttons being the same shade of yellow as "Login Now").
  3. Further Accessibility Testing: Ensure the design meets accessibility standards for users with disabilities. This includes color contrast checks and making sure the font size can scale if needed.

Self-Evaluation

- The button color can be consistency.
-Most of the elements are good.

Register & Login Pages


Fig 4
Register and login page

Fig 5
Registration Page


Fig 6
Account Confirmation Page

Fig 7
Email Confirmation 

Fig 8
Successful Page

AI Evaluation

1. Design and Aesthetic Appeal:

  • Color Palette: The consistent use of yellow and blue across both login and registration screens reinforces the KTM brand identity and provides continuity with the previous onboarding pages. The bright yellow header immediately catches attention and is well balanced with the clean white background.
  • Form Fields: The design of the input fields (email, password, etc.) is simple and effective. The yellow border around each field adds a slight visual pop without being overwhelming.
  • Button Design: The login button is appropriately highlighted in yellow, making it easily recognizable. In the registration page, the blue "Register" button contrasts well with the yellow header, making it stand out. However, maintaining consistency between button colors could improve the visual flow (perhaps keeping the login button blue to match the registration screen).
  • Icons for Social Media Login: The Google and Facebook buttons are clear and well-designed, with their original color schemes intact, which makes it easy for users to recognize and select their preferred login method.

2. User Experience (UX):

  • Simplicity: The forms are minimalistic, which helps users focus on completing the task (login/register) without unnecessary distractions. The clear separation of social media login and email login provides an easy choice for users.
  • Interaction: The presence of a “Forgot Password?” link on the login screen adds a necessary function for users who may struggle to remember their credentials. It’s small but visible enough.
  • Back Navigation (Registration Page): The back arrow icon on the registration screen provides a clear, easy way to navigate back to the previous screen. This is important for mobile users who rely heavily on intuitive navigation options.
  • Form Structure: The forms are well-structured with the required fields, and each field has ample space, making the interaction feel comfortable without feeling cramped.

3. Branding and Communication:

  • Logo and Brand Positioning: The KTM logo is prominently placed at the top of both screens, which reinforces brand identity right from the start. It helps ensure that the user feels connected to the service throughout the process.
  • Message Clarity: The "Hi Login Now" text on the login screen is welcoming but could be slightly refined. For example, instead of "Hi," a more formal or friendly prompt could improve user engagement, such as "Welcome Back! Log In Below."
  • Call to Action: The call to action on both screens is clear—yellow for the login button and blue for the registration button. However, maintaining consistent button styles and colors could reinforce a sense of continuity. You may also want to use the same style for buttons across both pages (same shape, size, and color).

4. Functionality and Practicality:

  • Form Fields: Both screens are practical in terms of the number of fields. The login screen provides a quick access option through social media, reducing friction for users who prefer this method. In the registration form, the necessary fields are present, such as first and last name, email, and password, ensuring that all critical information is collected.
  • Password Confirmation: Including the "Confirm Password" field in the registration form is a good practice to prevent password-related errors. However, you may also want to consider adding a “Show Password” feature to further assist users during this process.

5. Accessibility:

  • Contrast and Legibility: The color contrast between text and background is good, especially for the headers and buttons. The contrast for input field labels and borders is sufficient for visibility, though increasing the font size for these labels could improve readability for users with visual impairments.
  • Field Labels: The placement of field labels inside the form could pose challenges for users who rely on screen readers or who may accidentally delete the label text as they type. Consider adding explicit field labels above the input fields for better accessibility.
  • Alternative Login Options: The inclusion of Google and Facebook login buttons helps accommodate users who prefer not to go through the registration process manually. This also enhances accessibility by offering familiar login options.

Suggestions for Improvement:

  1. Consistent Button Colors: Standardize button colors across login and registration screens (e.g., use yellow or blue for both “Login” and “Register”) to maintain a cohesive design.
  2. Language Refinement: Consider refining the text to make it feel more personal or inviting (e.g., "Hi" can be changed to "Welcome Back!" for a more polished look).
  3. Password Visibility Option: Add a "Show Password" option to improve user convenience, especially for mobile users.
  4. Field Label Position: Position field labels above the input fields to improve clarity and accessibility, especially for users with disabilities or those using screen readers.

Self-Evaluation

- Successful Page: The icon can change to a thing that related to the application.
- Font size should be consistency. 
- Be careful for the spacing. 

Home Page


Fig 9
Home Page

AI Evaluation

1. Design and Aesthetic Appeal:

  • Color Palette: The blue and yellow color scheme remains consistent with the previous screens, which helps reinforce brand recognition. The black “Search Ticket” button contrasts sharply with the background, making it easily noticeable and actionable.
  • Layout and Structure: The page is structured with a clean, minimalistic layout. The form fields are well-organized, and the key call-to-action button ("Search Ticket") is placed centrally, which draws the user's attention.
  • Iconography and Visual Cues: The use of icons at the bottom (Home, Calendar, Ticket, and Profile) is helpful for navigation, and they are clear enough for the user to understand their purpose without text. The small bell icon for notifications at the top right is a good touch, making notifications accessible without cluttering the screen.
2. User Experience (UX):
  • Navigation: The navigation buttons at the bottom offer easy access to different sections of the app, which is crucial for users who want to perform different actions. The positioning is intuitive, following standard mobile app design practices.
  • Form Fields: The placement of form fields for “From,” “To,” “Departure,” “Return,” and “Passenger” is logical and straightforward. However, for a better user experience, you could consider adding drop-downs or date pickers for some fields (e.g., Departure/Return dates), which could enhance the ease of use, especially on mobile devices.
  • Call-to-Action Clarity: The “Search Ticket” button is central and prominent, allowing users to know exactly where to take action after entering their trip details. It’s large enough to ensure that it’s easily tappable on mobile devices.

3. Branding and Communication:

  • Brand Logos: The display of both ETS and KTM Komuter logos at the top helps users immediately recognize the available services. This is a great branding strategy, especially if the app allows for booking across multiple services.
  • Communication of Purpose: The purpose of the page is very clear—users are here to search for tickets. The concise form layout and central CTA ensure that the user doesn’t get distracted by unnecessary information. The “Announcement” section at the bottom provides space for important updates, though it currently lacks content. Ensure that this section is frequently updated to improve the communication of real-time information (e.g., delays, promotions, etc.).
4. Functionality and Practicality:
  • Form Simplicity: The form covers all the necessary details for booking a ticket without overwhelming the user with excessive options. It’s simple and practical, offering just what’s needed to make a booking.
  • Button Size and Accessibility: The "Search Ticket" button is large enough to be easily clickable on mobile devices, enhancing usability. However, adding visual feedback when the button is pressed (e.g., color change) could improve the interactive experience.
  • Announcement Section: While the “Announcement” section is present, it’s not visually prominent or currently utilized. You might want to make it more dynamic by using color changes or alerts to notify users of important updates.

5. Accessibility:

  • Form Field Labels: The labels inside the form fields are clear but could be more accessible by positioning them outside the field for better readability, especially for users with disabilities or when the form fields are filled.
  • Color Contrast: The overall color contrast between blue, yellow, and black ensures that key elements are easily visible, though it might be worth testing the contrast between the light yellow input fields and their surrounding environment to ensure they are clear for users with visual impairments.
  • Text Size and Spacing: The text size appears to be adequately large for readability on mobile devices. The spacing between the input fields is also sufficient, preventing the user from feeling overwhelmed or confused about where to tap next.
Suggestions for Improvement:
  1. Add Input Assistance: For fields like “Departure” and “Return,” include a date picker to make it easier for users to select dates. Similarly, drop-down menus for the “From” and “To” locations can make the experience smoother.
  2. Label Positioning: Consider moving labels outside of the form fields or including floating labels that move above the field when clicked. This will enhance accessibility and ensure the labels don’t disappear when users begin typing.
  3. Dynamic Announcement Section: Enhance the “Announcement” section with color or visual indicators when there are important updates to capture user attention.
  4. Add Visual Feedback to Buttons: Consider adding hover or press states to the buttons (especially the “Search Ticket” button) to provide visual feedback that the button has been pressed.

Overall Impression:

The home page design is clean, practical, and user-focused. It balances aesthetic appeal with functionality, making it easy for users to perform the key action of searching for tickets. With some additional usability enhancements, such as input assistance and better utilization of the announcement section, the design would offer an even smoother and more engaging experience.


Self Evaluation

- The input field (Departure & Return) can add icon such as date picker.
-The text 'from' and "to" can  move out to input field, make the overview consistency.


Steps of Buying Ticket 

Fig 10
Step of buying ticket

AI Evaluation

1. Design and Aesthetic Appeal:

  • Color Consistency: The design maintains the use of KTM’s primary brand colors—yellow, blue, and black—throughout the booking process, ensuring continuity with the rest of the app. This is crucial for maintaining brand identity and providing a cohesive user experience.
  • Form Layout: Each step in the process has a clean and structured layout, with clear sections for user input. The minimalist approach works well, preventing the user from feeling overwhelmed by information.
  • Visual Hierarchy: The hierarchy is effective, especially with the use of color and size. Important buttons like “Continue to Order,” “Pay Now,” and “Complete Booking” stand out in yellow or black, clearly indicating the next action.
2. User Experience (UX):
  • Step-by-Step Process: Breaking the process into multiple screens (Select Date, Train Ticket, Seat Selection, etc.) simplifies the complex task of booking a ticket. Users are guided through the process without being presented with too much information at once. This reduces cognitive load and makes the process feel manageable.
  • Date Selection: The calendar view for selecting the travel date is clear and visually appealing. However, adding some visual feedback (e.g., highlighting selected dates) might improve usability.
  • Seat Selection: The seat selection screen is intuitive, using color coding (green for available, red for booked) to visually communicate seating availability. This is an industry-standard approach that users are likely familiar with.
  • Passenger Info: The form for entering passenger information is straightforward. The use of two screens for this part of the process is a bit unusual; you may want to combine them for a more streamlined experience unless there’s a specific reason to separate them (e.g., accommodating multiple passengers).

3. Functionality and Practicality:

  • Button Clarity: Key actions are clearly marked with bold buttons, like “Search Ticket” and “Continue to Order.” The next steps in the process are always obvious, which helps reduce friction.
  • Payment Options: The payment section provides users with multiple options (bank transfer, card payment, etc.), enhancing the flexibility of the app. However, ensuring that the buttons for different payment methods are equally prominent could avoid biasing the user toward a particular payment option unintentionally.
  • Train Ticket Summary: The summary page before the final ticket booking is useful for users to review their trip details, pricing, and other relevant information. This is a crucial step in ensuring users feel confident about their purchase before committing.
4. Branding and Communication:
  • Brand Logos: The use of brand logos for ETS and KTM Komuter at various stages of the process strengthens the connection to the official service. This builds trust with users who may be booking through the app for the first time.
  • Communication of Information: The app communicates all relevant details (departure times, destinations, seat numbers, etc.) clearly at each stage. There’s little room for confusion, which helps users stay informed and reassured throughout the booking process.

5. Accessibility:

  • Form Input Accessibility: The forms appear to have sufficient spacing between fields, which is good for accessibility. However, increasing the text size slightly, especially for input fields, would further improve accessibility for users with visual impairments.
  • Color Contrast: While the overall color contrast is generally good, the yellow text on white backgrounds (e.g., form labels) might be difficult for some users to read. Ensuring a strong contrast between text and background can make the app more accessible.
  • Clear Navigation: The back arrows at the top of each page allow users to easily return to previous steps without losing their progress. This is essential for maintaining a smooth user experience.
6. Potential Improvements:
  • Combine Passenger Information Screens: As mentioned earlier, consolidating the passenger information entry into a single screen would streamline the user experience. Splitting the input into two screens may create unnecessary friction.
  • Date Selection Highlighting: Add a visual highlight (such as a blue outline or fill) to indicate the selected date on the calendar screen. This visual feedback will reassure users that their input has been registered correctly.
  • Payment Options: When displaying payment options, consider making the buttons more uniform in size and prominence. This will prevent users from feeling nudged toward a particular payment option unintentionally.
  • Error Handling: Ensure that there’s clear feedback for users if they make a mistake (e.g., missing a field, entering incorrect data). Highlight errors in red or provide helpful tooltips that explain what needs to be corrected.

7. Overall Impression:

The overall design of the ticket-buying process is clean, user-friendly, and visually consistent with the rest of the app. By breaking down the process into clear, manageable steps, you’ve made it easy for users to follow along and complete the transaction. With a few minor tweaks (such as improving color contrast and consolidating screens), the flow would offer an even more seamless experience.


Self Evaluation

-For the bank option, the input field can make a drop down so that the page looks simplicity.

-Simplify the passenger information if want to buy 2 or more tickets.


Personal Info and Setting Pages

Fig 11
Personal Information & Setting Page

AI Evaluation

1. Design and Aesthetic Appeal:

  • Consistency: The design maintains the same color scheme, typography, and layout as the other pages, which provides a seamless user experience across the app.
  • Simplicity: The pages follow a minimalist approach with clean lines and plenty of white space, making it easy to navigate. The use of yellow for headings and blue for options (such as buttons and toggles) is clear and visually consistent.

2. User Experience (UX):

  • Personal Information Page:

    • Form Layout: The input fields for personal information are well-organized and easy to fill in. However, you might consider adding clearer distinctions between editable fields and non-editable information.
    • Editable Indicator: You’ve included an icon (pencil) next to the user image, likely indicating the option to edit the profile photo. It’s a common practice, but it might be useful to make this more prominent or add a tooltip.

  • User Account Page:

    • Categories: Dividing the account information into sections like "Personal Information," "Booking History," and "Accessibility" helps users quickly find what they need. The use of icons for key sections also enhances the visual hierarchy.
    • Profile Highlight: Displaying the user’s name and email at the top of the page is a good practice. It personalizes the experience, making it feel like the user is engaging with their own space within the app.

  • Accessibility Page:

    • Clear Options: The design of the accessibility page is intuitive, with toggle switches and drop-down menus that are easy to interact with. Each category (e.g., Amplifier, Blindness, Text and Display) is clearly labeled with appropriate icons, reinforcing the category meaning.
    • Visual Feedback: The use of color to show active states (e.g., the toggle for "Amplifier" being on) provides clear feedback for users. This is especially helpful for users with cognitive or visual impairments.

  • Multilingual Support:

    • Language Selection: The option for choosing languages like Chinese, Bahasa Melayu, Japanese, and Korean is a welcome feature, especially in a diverse region like Malaysia. However, the design could be improved by using drop-down menus or flags to make the selection process more intuitive.
    • Global Accessibility: Including multiple language options is critical for improving accessibility, and this feature is well-executed. Each language option is clearly listed, making it easy for users to switch based on their needs.

3. Functionality and Practicality:

  • Easy Navigation: The back arrow at the top of each page allows users to return to previous screens, and the bottom navigation bar provides quick access to key areas of the app. This minimizes friction and allows users to easily move through different parts of the app.
  • Accessibility Features: The inclusion of specific accessibility settings such as "Amplifier" and "Text and Display" ensures that users with varying needs can customize their experience. Adding more detail about each feature (e.g., what the "Amplifier" does) could improve clarity for users who may not be familiar with these terms.

4. Accessibility:

  • User-Friendly Layout: The large, high-contrast buttons and labels improve accessibility for users with visual impairments. However, the yellow text on a white background might pose challenges for users with low vision. Consider increasing contrast for these elements.
  • Touch-Friendly Elements: The touch targets for buttons and toggles are large and easy to interact with, ensuring the app is accessible to users with motor impairments or those using assistive devices.

5. Branding and Communication:

  • Consistency: The consistent use of KTM’s brand colors reinforces the brand identity, which is important for a trusted transport service. The overall design language is professional and streamlined, making users feel that the app is well-organized and reliable.

6. Potential Improvements:

  • Language Selection Dropdown: While the language selection is simple, consider making the language selection process more graphical, with country flags or a drop-down menu to visually reinforce the choices.
  • Accessibility Descriptions: Include brief descriptions or tooltips for the different accessibility features. For example, explaining what "Amplifier" does or providing further details about the "Blindness" option.
  • Color Contrast: To improve readability for visually impaired users, consider increasing the contrast of yellow text on white backgrounds, especially in form fields and labels.

7. Overall Impression:

The personal information, account, accessibility, and multilingual support pages offer a clean and straightforward user experience. The integration of accessibility options shows a strong focus on user needs, and the overall design is cohesive with the rest of the app. With minor improvements to color contrast and clearer descriptions for accessibility features, this section of the app would provide an even more inclusive and seamless user experience.


Self - Evaluation

- The text can be out of the input field.
- For the option can make a drop down.
- The text color can use bright color so that the user can clearly see the text.

My Rail Time Page


Fig 12
My Rail Time Pages

1. Design Overview:

  • Consistency: The color scheme, layout, and typography are consistent with the other parts of the app. The recurring use of blue, yellow, and white helps maintain a cohesive design.
  • Maps Integration: The integration of maps adds a dynamic element to the app, offering real-time geographical context, which is useful for journey planning.

2. Individual Screen Analysis:

My Rail Time (Left Screen):

  • Search Functionality:
    • The user can input their Origin (Johor), Destination (Woodlands), and Date (21 September 2024) to search for available trains. The fields are simple and easy to interact with, fitting well into the design framework.
    • Map Display: The map preview at the bottom shows the route between Johor and Woodlands, offering users visual confirmation of their route. This map feature can improve user engagement and understanding of the journey.

My Rail Time 1 (Middle Screen):

  • Train Schedule:
    • Date Selection: Users can select the day of travel from a weekly calendar (Sun-Sat), clearly displayed at the top, with the selected date highlighted (Monday, 21 September).
    • Departure Times: The train times are displayed in yellow cards, showing the time from Johor to Woodlands with the estimated duration (1 hour 15 minutes). This is very straightforward and user-friendly.
    • Weekly Overview: By allowing users to swipe through days of the week, it offers flexibility to check multiple schedules with ease.

My Rail Time 2 (Right Screen):

  • Real-Time Map Tracking:
    • The detailed map provides a more in-depth view of the route between Johor and Woodlands. Users can follow the path visually, which adds a helpful layer to the app for users who prefer spatial information.
    • Search Button: The Search button located at the bottom is easily accessible, allowing users to search for train times or routes again if needed. The placement of the button ensures it’s visible without cluttering the screen.

3. User Experience (UX):

  • Simplicity: The screens are easy to navigate with clear labels, straightforward icons, and well-structured layouts. This design caters to users who might be unfamiliar with mobile apps, ensuring they can quickly find and select the right train.
  • Interaction: The combination of text input fields, map visuals, and interactive date selectors offers a smooth and informative process. This mixture of input methods provides a more dynamic and engaging user experience.

4. Accessibility:

  • Visual Design: The high-contrast yellow text boxes on white and black backgrounds are accessible to users with visual impairments. The large touch targets (like date selectors and time buttons) are friendly for users with motor impairments.
  • Maps Usability: For users with disabilities related to sight or spatial awareness, consider adding zoom capabilities or text-based route descriptions for those who may have difficulty interpreting maps.

5. Functionality:

  • Interactive Maps: The inclusion of maps is a great feature, providing both static and dynamic views. However, depending on the complexity of the rail system, it may be useful to include additional layers, like station names or journey progress, to make the map even more informative.
  • Schedules: The schedule layout with departure times, destinations, and durations is concise and avoids clutter, which is essential when users are trying to quickly check train availability.

6. Improvements:

  • More Information on Map: It would be useful to include some form of tooltip or pop-up on the map showing stations or real-time train positions. This would give users an extra layer of information.
  • Current Day Highlight: While the day of travel is selected in the schedule, it might be beneficial to add a marker for "Today" to ensure users understand they are viewing the current day's schedule.

7. Overall Impression:

The "My Rail Time" feature is practical and well-designed, offering users a simple way to search for trains and visually track their route. The balance between form input and map interactivity creates a helpful and intuitive experience for travelers.


Self- Evaluation

-There are not much functions in the map.
- The design is consistency.

This final set of screens appears to focus on three core functionalities of the app: Rewards, Booking History, and Notifications. Here's a detailed analysis of each screen's usability, design, and functionality:

Fig 13
Rewards, Booking History & Notification Page

1. Rewards (Left Screen):

  • Points System Display: The top section prominently displays the user's accumulated points (150 Points), which is a clear and simple way for users to track their rewards progress.
    • The barcode at the top may indicate that the user can redeem rewards in person or online, adding flexibility.
  • Rewards List:
    • The "All Rewards" section lists special discounts, such as Holiday Discounts with up to 30% off during holiday seasons. This offers a compelling incentive for frequent travelers, making the loyalty program attractive.
    • Design: The use of blue cards to list available rewards ensures consistency with the rest of the app and creates a clear distinction between different reward types.
    • Additional Details: Each reward card provides a summary of the offer, making it easy for users to understand the benefits.

2. Booking History (Middle Screen):

  • Train Trip Summary:
    • The screen lists the user's previous bookings, starting with the most recent (Johor to Woodlands on 21 September 2024). Each entry shows the train time, route, and passenger details, offering a comprehensive overview at a glance.
    • Clear Categorization: The separation between different train rides, displayed on blue cards with clear route and time information, is visually distinct. This makes it easy to scan through different bookings.
    • Interactive Design: Each train trip card likely leads to more detailed booking information when clicked, allowing users to check past trips and receipts easily.
    • Consistent Layout: The interface is clean and user-friendly, making it easy to check booking history without overwhelming users with too much information at once.

3. Notifications (Right Screen):

  • Timely Updates:
    • System Alerts: The screen includes critical system messages, such as System Maintenance alerts, which are marked with icons for clarity (red exclamation marks for urgent issues).
    • Booking Confirmations: The user is informed when bookings are confirmed, offering reassurance.
    • Help Center Messages: There is a dedicated notification for Help Center resolutions, improving communication between the app and users when issues arise.
    • Train Status Updates: Important notifications like train rescheduling and arrival times are displayed clearly, ensuring users are kept informed of any delays or changes to their journey. The use of icons next to each message enhances the clarity of these alerts.
  • Design:
    • The yellow background and minimalist iconography make the notifications stand out. Each message is concise, ensuring users can quickly digest the information.


General Observations and Recommendations:

  • Consistency and Cohesiveness:

    • The design of all screens maintains a consistent visual identity with recurring colors, fonts, and button shapes. This consistency is essential for creating a cohesive user experience.

  • Functionality:

    • The Rewards screen encourages user engagement by making it easy to see what points can be redeemed for.
    • Booking History offers a seamless way for users to access their past travels, with potential room to add more detailed functionality like refunds or rebook options.
    • Notifications provide critical updates and ensure users are well-informed about system changes or train delays.

Accessibility and Usability:

  • Clarity: The use of icons paired with text in the notification screen improves accessibility, making it easier for users to understand system alerts at a glance.
  • Typography: The large, readable text used across all screens helps make the app more accessible to users with visual impairments.

Suggestions for Improvement:

  1. Expand Rewards Details:

    • Provide more specific details for rewards, such as expiration dates, eligibility criteria, and how they can be redeemed. This information could be included when clicking on individual reward cards.

  2. Filter Options in Booking History:

    • Adding a filter to allow users to search for specific past bookings (e.g., by date or destination) would improve usability, especially for frequent travelers.

  3. Interactive Notifications:

    • The notification section could be enhanced by allowing users to click on specific alerts to view more detailed information (e.g., reasons for delays or links to customer support for resolved issues).

Self- Evaluation

- For the Rewards can be add more information such as expired date or so on.


Conclusion

The app presents a comprehensive, user-friendly solution for rail passengers, allowing them to book tickets, manage their personal information, and stay informed about their travel plans. The design is clean, consistent, and easy to navigate, which will appeal to both regular travelers and first-time users.

Strengths:

  • Intuitive User Flow: The process of booking tickets is streamlined and easy to follow, reducing friction for users.
  • Accessibility and Inclusivity: Thoughtful inclusion of accessibility options ensures that the app can be used by people with various needs.
  • Visual Consistency: The color palette and design elements are consistently applied across all screens, creating a cohesive user experience.

Areas for Improvement:

  • Interactivity: Certain features, like the rail map and rewards, could be more interactive, offering users greater control and information.
  • Advanced Features: Adding guest checkout, real-time train status, and more personalized options in the history section could enhance the app's utility for frequent travelers.

Issues, Problem & Improvement

Based on my observation and AI evaluation, I found that the issues and lack of detail I was aware of were exactly the same as the AI ​​assessment. 

Below is the pages that I made some improvement.

  • Onboarding page
  • Login & Register page
  • Successful page
  • Booking Page
  • Bank option
  • Select date page
  • Accessibility page
  • My Rail Time & Map

Onboarding Page

Fig 14
Onboarding Pages & Welcome Page

After I made my observations and looked at the improvements and suggestions given by the AI,
I changed the color of the button from blue to yellow, the same color as the welcome page to make them more consistency and smoothly.


Fig 15
Login Page

As with the Getting Started page, I also changed the color of the GOOGLE and FACEBOOK buttons from blue to yellow. Additionally, I moved the text "Email Address" and "Password" from the input fields out of the input fields. Then add an icon in the password input field.

Fig 16
Registration Page

I moved the texts from the input fields out of the input fields so that the users can input their information easily.


Fig 17
Successful Page

I change the icon to train icon to make the overall design consistency and the user can know what the application they used.

Fig 18
Login process page

I moved the texts from the input fields out of the input fields so that the users can input their information easily.

Fig 19
Booking Page

I moved the text 'from' and 'to' from the input fields out of the input fields so that the users can input their information easily. Then I also add the calendar icon so that when the user wants to input the date they want, they just need to click the calendar icon and choose the date.


Fig 20
Bank Option

I changed the options to a drop down menu so the user can choose to type the bank name or click the drop down menu and select the bank.


Fig 21
Select date

Through the AI evaluation and my observation, I make the date can be highlighted when the user had chose the date they want.


Fig 22
Accessibility Page

I added information icons for the magnifier and blindness so if the user doesn't know what they are they can hover over the icon and they will pop up with a short description.

Fig 23
My Rail Time & Map

For the my rail time page, I make the date can be highlighted when the user had chose the date they want. Then for the map, I added a tool icon so that the users can make their customize or use any tools that they want such as know the distance between start point to end point.


* Here is the Link to take a look. When you zoom out, you can see 2 sets of app designs, the original one above and the improved one below.


Presentation Video 



Fig 24
Presentation Video

Reflection

Through this assignment, I gained a deeper understanding of the intricacies involved in app design. Initially, I believed the app I redesigned was well-constructed and generally effective in meeting user needs. However, as I delved deeper into the design process and took a more critical approach, I began to notice subtle details that I had previously overlooked. These small but important aspects of the design—such as spacing, alignment, font consistency, and user interaction flow—started to become more evident, and I realized that even a seemingly good design can hide imperfections when not thoroughly examined.

Through this assignment, I gained a deeper understanding of the intricacies involved in app design. Initially, I believed the app I redesigned was well-constructed and generally effective in meeting user needs. However, as I delved deeper into the design process and took a more critical approach, I began to notice subtle details that I had previously overlooked. These small but important aspects of the design—such as spacing, alignment, font consistency, and user interaction flow—started to become more evident, and I realized that even a seemingly good design can hide imperfections when not thoroughly examined.

One of the key takeaways from this experience is the importance of paying attention to every element, no matter how minor it may seem. Every detail contributes to the overall user experience, and even small adjustments can significantly impact the final product's usability and appeal. While I tried to focus on various aspects of the app's design, I realized that my human limitations made it easy to overlook certain details, especially when managing multiple design elements simultaneously.

To overcome this challenge, I incorporated AI tools to assist me in evaluating my design. AI proved to be a valuable resource in this process because it could objectively assess the visual appeal and functionality of the app in ways that I, as the designer, might not immediately notice. The AI provided insights into areas where improvements could be made, such as color contrasts, layout symmetry, and even accessibility considerations. By offering a fresh and unbiased perspective, the AI helped me refine my design and focus on areas that needed additional attention.

In conclusion, this task make me know redesign an application is not just redesign, I also need to know about the elements that I added are them related to the application or they are not suitable for the app. Also, to evaluate my own redesigned application is a challenge to me because I will feel that everything that I redesigned is perfect and well in my head, so through this task, I realize that even I had done the design, I still should need to observe the work and make some improvement if have some mistaken.

Popular posts from this blog

Final Project

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design in Creative Media FINAL PROJECT: INFOGRAPHIC VIDEO ANIMATION INSTRUCTION Progression In the first week, we formed a team of 10 people according to the requirements. After that we started to brainstorm our ideas. We decided to use water pollution as the subject for our final project.  Then our leader started to plan our work. Fig 1 Work assigned Fig 2 Contextual Research  We assigned the work in our meeting. Some of us doing sketches, some of us doing coloring and some of us doing animation.  Art Direction & Mood board Once we had assigned the work. We started to do the mood board and art direction. Fig 3 Mood board Fig 4 Art direction Also the timeframe and scenes: https://docs.google.com/spreadsheets/d/18JC6GKoaJ5WfJTMVOtlC9jCHI2721pKqhM6HsHPc7TQ/edit?gid=1942087598#gid=1942087598 Sketches & Wireframe Fig 5 Sketches & Wireframe - Part 1 Fig 6 Sketches & Wireframe - Part 2 Fig 7 Sketches & Wireframe - Pa...
Welcome

Minor Project

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design (HONS) in Creative Media Minor Project Lecture The first week, Mr. Mike introduces the module and briefing the projects. After that Mr. Mike let us to team up with seven people.  Project Brief Fig 1 Project Brief Instruction Fig 2 Module -PDF Process Week  1 After becoming a group, we started to choose our project of  this semester. The project that our group chosen is Warisan TrueXR project. First of all, we followed the steps started from contextual research. We separated to different part, some of the member search about the client, some of the member search about AR glasses, some of the group member researched about museum negara and so on. Fig 1 Contextual Research We noticed that the venue was at the National Museum, and this project was about immersive experiences, that is, mixed reality, so we went to the museum to learn more about the size of the muse...
Welcome

GAME DEVELOPMENT: Final Project

-
Image
26 December 2024 Simon Ko Jing Liang 0364359 Bachelor of Design (HONS) in Creative Media INSTRUCTION Fig 1 INSTRUCTION-PDF Process DONE Level 1 environment Player Control Coin item script Coin Collect UI YET TO DONE Level 2 environment Level 3 environment Level 1, 2, 3 UI Level 2 & 3 items  Enemies Obstacles (spikes and so on) Character animation
Welcome

Project 1: ANIMATED INFOGRAPHIC POSTER

-
Image
SIMON KO JING LIANG 0364359 Bachelor of Design in Creative Media Instruction Fig 1 Instruction -PDF Part 1: Infographic Poster  Infographic poster  reference  Fig 1 Infographic poster  reference  I choose this infographic poster as my reference to redesign because of its lots of text even though it has enough information about social media and mental health. Since the main target group for my redesign of this poster is young people, it is necessary to simplify the entire information poster and highlight the important information. Below is the important information that appeared in the poster. Fig 2 Infographic : Social Media & Mental Health - PDF Ideas & References Fig 3 Reference 1 Fig 4 Reference 2 Sketches Fig 5 Sketch 1 This is the first sketch that I made but from the feedback of Mr. Shamsul, the layout is not organized and didn't see the design principal such as contrast in the sketch. Mr. Shamsul suggested me to find some good references an...
Welcome

Final Project

-
Image
26 December 2024 Simon Ko Jing Liang 0364359 Bachelor of Design (HONS) in Creative Media INSTRUCTION Process When the prototype was working which is the AR map experiential, I added multiple 3D attractions in Unity to make the experiential more interesting but cannot import too much 3D model. I had imported more 3D model before but when reopen the project, all of the 3D model will disappear or some materials had missing. AR SCENE Fig 1 For AR scene, I created a Canvas and  added a panel then added a back button and text in the panel. For the back button can be click and back to Discover scene.  Fig 2 After that I created an image target that I had downloaded the image target from database(Vuforia).  Fig 3 Then I imported the 3D Model which is The Great Wall. Then I adjust its scale and its position so that when the camera scan the image target, the 3D model can be appear at the right position and the user can interact with it.  Fig 4 This is the Liberty...
Welcome