0% found this document useful (0 votes)
15 views23 pages

HCI Assignment 2 Final Document

Uploaded by

pasindup129
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
0% found this document useful (0 votes)
15 views23 pages

HCI Assignment 2 Final Document

Uploaded by

pasindup129
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 23

Final Document

1
Contents
1.Introduction ......................................................................................................................................... 4
1.1. Overview of the App’s Purpose ................................................................................................... 4
1.1.1. Mobile Train Ticket Booking and Tracking Platform ............................................................. 4
1.1.2. Key Features for User-Friendliness and Accessibility............................................................ 4
1.2. Importance of Inclusive and Accessible Design ........................................................................... 5
2. Research on Diverse User Groups....................................................................................................... 6
2.1. User Groups Considered .............................................................................................................. 6
2.1.1. Beginners .............................................................................................................................. 6
2.1.2 Intermediate Users ................................................................................................................ 6
2.1.3 Advanced Users...................................................................................................................... 6
2.1.4 Users with Disabilities ............................................................................................................ 6
2.2 Accessibility Needs of Users with Disabilities ............................................................................... 7
2.2.1 Visually Impaired Users .......................................................................................................... 7
2.2.2 Hearing-Impaired Users ......................................................................................................... 7
2.2.3 Mobility-Impaired Users ........................................................................................................ 7
2.2.4 Cognitively Impaired Users .................................................................................................... 7
2.3 Inclusivity Considerations for Non-Disabled Users ....................................................................... 7
2.3.1 Elderly Users........................................................................................................................... 7
2.3.2 Tourists/Non-Native Speakers ............................................................................................... 8
2.3.3 Users with Low Digital Literacy .............................................................................................. 8
3.Personas and User Scenarios Simply ................................................................................................... 9
3.1 persona 1 ...................................................................................................................................... 9
3.2 Persona 2 ...................................................................................................................................... 9
3.3 Persona 3 .................................................................................................................................... 10
3.4 Persona 4 .................................................................................................................................... 10
3.5 Persona 5 .................................................................................................................................... 11
4.Inclusive and Accessible Design ......................................................................................................... 12
4.1 Key Design Features for Accessibility .......................................................................................... 12
4.1.1 Screen Reader Compatibility................................................................................................ 12
4.1.2 High Contrast Mode for Visually Impaired Users................................................................. 12
4.1.3 Keyboard Navigation and Voice Commands ........................................................................ 12
4.1.4 Multimodal Notifications (Visual, Auditory, and Haptic Feedback)..................................... 12
4.1.5 Adjustable Text Sizes for Users with Visual and Cognitive Impairments ............................. 12
4.2 Designing for Inclusivity .............................................................................................................. 13
4.2.1 Simple Navigation for Beginners .......................................................................................... 13

2
4.2.2 Detailed Options for Advanced Users .................................................................................. 13
4.2.3 Multilingual Support for Non-Native Speakers .................................................................... 13
5.Application Features (User Interface) ................................................................................................ 14
5.1 Booking Process .......................................................................................................................... 14
5.2 Live Train Updates....................................................................................................................... 14
5.3 E-Ticket Management ................................................................................................................. 15
5.4 Notifications ................................................................................................................................ 15
5.5 Seat Tracking ............................................................................................................................... 16
6.Colors and Visual Design .................................................................................................................... 17
6.1. Color Palette for User Interface (UI) Design .............................................................................. 17
6.1.1.High Contrast for Readability ............................................................................................... 17
6.1.2.Neutral Colors and Accessibility for Color-Blind Users ........................................................ 17
6.2.Justification for Color Choices..................................................................................................... 18
7.High-Fidelity Prototype ...................................................................................................................... 19
7.1 Overview of the Prototype Design .............................................................................................. 19
7.2 Key Screens and Interactions ...................................................................................................... 20
7.2.1 Booking Page ........................................................................................................................ 20
7.2.2 Live Train Updates Screen .................................................................................................... 21
7.2.3 E-Ticket Page ........................................................................................................................ 21
7.2.4 Seat Tracking Interface........................................................................................................ 22
7.3 Accessibility Features in the Prototype (Figma) ......................................................................... 22
8.Conclusion .......................................................................................................................................... 23

3
1.Introduction

1.1. Overview of the App’s Purpose


1.1.1. Mobile Train Ticket Booking and Tracking Platform
T-Easy Pay is a mobile application designed to simplify the process of booking train tickets
in Sri Lanka. It allows users to easily purchase tickets, choose their seats, and receive e-
tickets with QR codes for quick boarding. Additionally, the app provides live train tracking,
so users can see the location and status of their train in real-time. This makes train travel
more convenient and accessible, especially for those who want to avoid long queues or
ticket office delays.

1.1.2. Key Features for User-Friendliness and Accessibility


T-Easy Pay includes several features that make it easy to use for everyone:

1. Simple Ticket Booking Process


• Step-by-Step Guidance: Users are guided through each stage of booking, from
selecting their departure station and destination to choosing travel dates and train
classes. The interface ensures a smooth booking experience with minimal steps.
• Seat Selection: Users can visually choose their preferred seats using a simple layout,
with available and booked seats clearly distinguished.
• Return Tickets: For convenience, the app offers a quick option to book return tickets
in the same session, reducing the need for multiple bookings.

2. Live Train Tracking


• Real-Time Location Updates: The app tracks the exact location of the train on a
map, allowing users to monitor its movement and estimated arrival times.
• Live Notifications for Delays or Changes: If a train is delayed or its schedule
changes, users receive immediate push notifications. This helps them adjust their
travel plans accordingly, reducing stress and uncertainty.
• Station Notifications: Alerts notify users when their destination is approaching,
ensuring they don’t miss their stop.

4
3. QR Code E-Ticket
• Instant Access to E-Tickets: After a successful booking, the app generates a QR code
that serves as the user’s e-ticket. This code is stored within the app and can be
accessed anytime.
• Paperless and Contactless Boarding: At the station, users simply show their QR code
at designated scanning points for entry, eliminating the need for printed tickets.
• Offline Availability: The e-ticket QR code is available even without an internet
connection, ensuring users can access it in areas with poor network coverage.

4. Customizable User Settings


• Dark Mode: The app offers a dark mode option, which is easier on the eyes during
nighttime use and helps conserve battery life on mobile devices.
• Multiple Language Support: Users can switch between different languages,
including English, Sinhala, and Tamil, to cater to the linguistic diversity in Sri Lanka.
• Voice Command Integration: Users can navigate the app and perform actions such
as searching for trains or booking tickets using voice commands, making the app
accessible for people with limited mobility or those who prefer hands-free
interaction.

5. Trip History and Ongoing Trips


• Detailed Trip History: Users can view a history of their previous bookings, allowing
them to easily rebook the same trips or track their past journeys.
• Ongoing Trip Management: The app shows details of active trips, including
departure times, train status, and seat information, so users can manage and
monitor current journeys directly from the app.

6. Secure Payment Integration


• Multiple Payment Methods: Users can pay for their tickets using credit or debit
cards, mobile wallets, or bank transfers, with all options secured via encryption.
• Saved Payment Information: For convenience, users can securely save their
payment details to make future bookings quicker.
• Instant Payment Confirmation: Upon successful payment, users receive an
immediate confirmation and receipt, ensuring they are aware of the transaction
status.

1.2. Importance of Inclusive and Accessible Design


Research on Diverse User Groups
Inclusive and accessible design is essential for making T-Easy Pay usable by a wide range of people.
The app is designed with diverse users in mind, including:

• Older Users: Simple navigation, large buttons, and clear text ensure the app is easy to use
for people who may not be tech-savvy.

• People with Disabilities: Features like voice commands and adjustable font sizes make the
app accessible for users with visual impairments or other disabilities.

• Color-Blind Users: The app avoids using color as the only way to convey information, making
it usable for people with color blindness.

5
By focusing on inclusivity, T-Easy Pay ensures that anyone, regardless of age, ability, or technical
knowledge, can easily book train tickets and manage their trips.

2. Research on Diverse User Groups


2.1. User Groups Considered
2.1.1. Beginners
• Overview: Beginners may be unfamiliar with mobile train ticket booking apps. They need
simple, guided interactions.

• Design Considerations:

o Easy Navigation: The app uses clear, large icons and minimalistic menus, helping
first-time users find their way without confusion.

o Onboarding Help: The initial screens, like the "Register" and "Log in" pages in
design, include clear prompts and tooltips guiding users through account creation
and booking steps.

2.1.2 Intermediate Users


• Overview: Intermediate users have some experience with mobile apps and train bookings
but may still require occasional guidance.

• Design Considerations:

o Customizable Settings: Features like "App Settings" allow intermediate users to


tailor their experience with options for dark mode and font size.

o Quick Access: The app provides shortcuts for frequent actions like booking, viewing
trips, and accessing e-tickets, which cater to intermediate users who need efficiency.

2.1.3 Advanced Users


• Overview: Advanced users are familiar with booking processes and expect more control and
faster actions.

• Design Considerations:

o Advanced Filtering and Options: These users will appreciate the ability to filter train
schedules or sort trips based on travel times or seat availability, visible in the
"Booking" pages.

o Voice Commands: The app's voice command feature helps advanced users book
tickets quickly, enhancing productivity.

2.1.4 Users with Disabilities


• Overview: The app considers accessibility features for users with physical, sensory, or
cognitive disabilities.

• Design Considerations:

o Assistive Technologies: The app is compatible with screen readers and has features
like high-contrast text and voice commands for users with limited mobility or vision.

6
2.2 Accessibility Needs of Users with Disabilities
2.2.1 Visually Impaired Users
• Overview: Users with partial or complete vision impairment may require assistance in
navigating the app.

• Design Considerations:

o Dark Mode & High Contrast: The app's dark mode (seen in "App Settings")
reduces eye strain, while high-contrast colors, like yellow for key buttons,
ensure that text and icons stand out.

o Screen Reader Compatibility: The app's interface is designed with screen reader
support, making it accessible for blind users.

2.2.2 Hearing-Impaired Users


• Overview: These users may have difficulty with auditory elements in the app.

• Design Considerations:

o Visual Notifications: Instead of relying on sound alerts, the app uses banner
notifications and vibration to notify users of train updates or e-ticket availability.

o Text-Based Interaction: Booking processes and notifications are text-based,


ensuring that hearing-impaired users can fully engage with the app.

2.2.3 Mobility-Impaired Users


• Overview: Users with limited mobility may have difficulty interacting with small touch
targets.

• Design Considerations:

o Large Touch Areas: The app uses large, easily tappable buttons for primary
functions, such as the "Search Train" button on the booking page.

o Voice Commands: Mobility-impaired users can navigate the app hands-free


using voice commands.

2.2.4 Cognitively Impaired Users


• Overview: Users with cognitive impairments may have trouble processing complex
information or navigating intricate designs.

• Design Considerations:

o Simple and Consistent Layout: The app follows a consistent layout across
screens, with easily recognizable icons and color coding for different tasks (e.g.,
red for "Download" and blue for "Share" in the e-ticket page).

o Step-by-Step Assistance: Booking processes are broken down into clear, simple
steps, reducing cognitive load.

2.3 Inclusivity Considerations for Non-Disabled Users


2.3.1 Elderly Users
• Overview: Elderly users may struggle with small text or complicated interactions.

• Design Considerations:
7
o Large Text and Icons: The font size adjustment options in "App Settings" cater to
elderly users who need larger text.

o Simplified Navigation: Key tasks like booking and checking trips are available on
the home screen, reducing the need for extensive navigation.

2.3.2 Tourists/Non-Native Speakers


• Overview: Tourists or users unfamiliar with the local language need translations and
visual guidance.

• Design Considerations:

o Multilingual Support: The app offers language options like Sinhala, Tamil, and
English, as seen in the "App Language" setting.

o Visual Cues: The app uses clear icons (such as a train symbol for bookings and a
QR code for e-tickets) to help non-native speakers understand the app without
relying on language.

2.3.3 Users with Low Digital Literacy


• Overview: These users may not be very familiar with smartphones or apps.

• Design Considerations:

o Guided Interactions: The onboarding process and clear, step-by-step booking


pages help users with limited experience navigate easily.

o Minimalist Design: The use of a clean and simple interface (as seen in the
"Home" and "Booking" pages) prevents overwhelming users with too much
information.

8
3.Personas and User Scenarios Simply
3.1 persona 1

Sandaru Shavin (Film Director)

• Scenario: Sandaru needs to


travel to multiple filming locations
across Sri Lanka and uses the T-easy
Pay app to check train routes and
schedules that fit his unpredictable
filming schedule.
• Goal: Find the quickest route
with minimal transfers and flexibility
to adjust bookings.
• Outcome: Sandaru books a train
ticket and feels reassured knowing
he can make changes if needed.

3.2 Persona 2

Ahmed Pitigala (Elderly User)

• Scenario: Ahmed is planning a


visit to his grandchildren and uses T-
easy Pay to check train schedules
and book a ticket.
• Goal: Easily find and book a
ticket without technical
complications.
• Outcome: Ahmed successfully
navigates the simple interface and
confidently books his ticket.

9
3.3 Persona 3

Pavani Nisansala (Busy Professional)

• Scenario: Pavani is
commuting to a business
meeting and needs to quickly
book a ticket.
• Goal: Find the earliest
train and book efficiently on
the go.
• Outcome: Pavani books
her ticket within minutes and
makes it to her meeting on
time.

3.4 Persona 4

Lucas Jacob (Tourist)

• Scenario: Lucas, a tourist,


is exploring Sri Lanka and
wants to book a scenic train
route.
• Goal: Discover scenic
travel options that are easy
for non-locals to navigate.
• Outcome: Lucas books a
scenic route, enjoying a
hassle-free, enriching travel
experience.

10
3.5 Persona 5
Sarah (Mother with Toddler)

• Scenario: Sarah needs to


ensure a comfortable train
journey with her toddler.
• Goal: Book a train with
family-friendly amenities like
accessible seating and
restrooms.
• Outcome: Sarah books a
train with the necessary
facilities, ensuring a smooth
trip with her toddler.

11
4.Inclusive and Accessible Design
4.1 Key Design Features for Accessibility
4.1.1 Screen Reader Compatibility
• Overview: Screen reader compatibility ensures that visually impaired users can navigate
and interact with the app through auditory feedback.

• Implementation in T-Easy Pay: The app supports screen readers by having properly
labeled UI elements (like buttons, fields, and icons). For example, important buttons
such as "Search Train" and "Checkout" are tagged with descriptive text, enabling users
to understand their functions without needing to see the screen. This is particularly
helpful for blind users during the booking process or when viewing their trip details.

4.1.2 High Contrast Mode for Visually Impaired Users


• Overview: High contrast modes improve readability by increasing the contrast between
text and background.

• Implementation in T-Easy Pay: The app's color scheme includes bright yellow (#D7AC00)
for key elements such as buttons and dark text on a light background, ensuring optimal
contrast for users with low vision. This color palette, seen on multiple screens like the
booking and profile sections, helps visually impaired users navigate the app with ease.

4.1.3 Keyboard Navigation and Voice Commands


• Overview: Keyboard navigation and voice command integration allow users with
mobility impairments or those who have difficulty with touch inputs to interact with the
app.

• Implementation in T-Easy Pay: Voice command support enables users to search for
trains, check trip details, or book tickets without using their hands. This is ideal for users
with motor impairments, and the app’s voice command feature integrates with
accessibility tools to enhance usability.

4.1.4 Multimodal Notifications (Visual, Auditory, and Haptic Feedback)


• Overview: Notifications provided in multiple formats ensure that users with varying
sensory impairments receive critical alerts.

• Implementation in T-Easy Pay: For example, when users receive updates about train
schedules or booking confirmations, the app provides visual cues (banner notifications),
auditory alerts, and vibrations (haptic feedback). This ensures that users with hearing or
visual impairments are notified about important updates, regardless of their specific
sensory limitations.

4.1.5 Adjustable Text Sizes for Users with Visual and Cognitive Impairments
• Overview: Adjustable text size is crucial for users with visual impairments or cognitive
disabilities, allowing them to comfortably read the content.

• Implementation in T-Easy Pay: In the "App Settings" page, users can customize text size
to suit their needs. This feature ensures that visually impaired users can increase text
readability, while users with cognitive disabilities can simplify the interface for easier
comprehension.

12
4.2 Designing for Inclusivity

4.2.1 Simple Navigation for Beginners


• Overview: Beginners need clear, intuitive navigation to avoid frustration and
easily accomplish tasks like booking tickets or managing trips.
• Implementation in T-Easy Pay: The home screen features large icons with clear
labels for key actions like booking, viewing trips, and accessing e-tickets. The
app’s layout remains consistent across pages, reducing cognitive load for new
users. Simple tasks like searching for trains or checking tickets are organized in a
straightforward manner, making it easy for first-time users to follow.

4.2.2 Detailed Options for Advanced Users


• Overview: Advanced users seek more customization and control, expecting the
app to accommodate faster workflows and provide additional features.
• Implementation in T-Easy Pay: Advanced users benefit from features like
advanced filtering on the booking page, where they can filter by train type, seat
class, or time. They can also store payment methods for quick checkouts and use
voice commands to streamline their experience.

4.2.3 Multilingual Support for Non-Native Speakers


• Overview: To accommodate users who are not native speakers, multilingual
support is necessary for ensuring full accessibility to the app's features.
• Implementation in T-Easy Pay: The app provides language options in the
settings, allowing users to switch between Sinhala, Tamil, and English. The
inclusion of symbols and icons alongside text further assists non-native speakers
in navigating the app with minimal reliance on language, as seen in the "Select
Your Train" and "Payment Summary" screens.

13
5.Application Features (User Interface)

5.1 Booking Process

• Overview: The booking process is designed to be


simple, intuitive, and user-friendly, allowing users to
quickly find and reserve train tickets.
• Implementation in T-Easy Pay: The app’s booking
screens guide users through a step-by-step process.
Users start by entering departure and destination
information, select their preferred train, and then
choose a class and seat. The UI features drop-down
menus and date selectors to make input easier. Key
buttons, such as “Search Trains” and “Checkout,” are
prominently displayed in the app’s yellow theme,
ensuring users can easily move forward in the
booking process. Each step is clearly labeled, with
train schedules, ticket prices, and seat availability
shown in a visually distinct manner to reduce
confusion.

5.2 Live Train Updates

• Overview: Live train updates provide real-time


information about train schedules, delays, and
platform changes to keep users informed.
• Implementation in T-Easy Pay: The live train updates
screen displays detailed train schedules, including
departure and arrival times, which update
dynamically. The use of color coding (green for on-
time trains, yellow for minor delays, and red for
major delays) ensures that users can easily
understand the status of their trains at a glance.
These updates are particularly important in case of
unexpected delays or changes, helping users adjust
their travel plans accordingly.

14
5.3 E-Ticket Management

• Overview: E-ticket management allows users to


store, view, and share their digital train tickets
directly from the app, eliminating the need for
physical copies.
• Implementation in T-Easy Pay: After booking, users
can access their e-ticket on a dedicated screen, as
seen in the uploaded screenshot. The e-ticket
includes essential information such as train details,
seat number, and QR codes for easy boarding. The
"Download" and "Share" buttons, clearly positioned
at the bottom of the e-ticket screen, allow users to
save the ticket to their device or send it to someone
else. The use of the app’s color scheme ensures that
important information stands out, making it easy for
users to reference their tickets before boarding.

5.4 Notifications

• Overview: Notifications are used to alert users about key events like booking confirmations,
train delays, or upcoming trips.

• Implementation in T-Easy Pay: Users receive both in-app notifications and push
notifications for updates such as train schedules, payment confirmation, and seat
availability. These notifications can be customized in the app’s settings, allowing users to
choose between visual, auditory, and haptic alerts. For example, users can set banner
notifications or vibration alerts for critical updates like last-minute platform changes. This
multimodal approach ensures that notifications reach users effectively, regardless of their
personal preferences or accessibility needs.

15
5.5 Seat Tracking

• Overview: Seat tracking provides users with a real-


time view of seat availability and allows them to
select their preferred seat during the booking
process.
• Implementation in T-Easy Pay: In the seat selection
screen, users are shown a graphical representation of
the available seats on the train. Available seats are
highlighted in yellow, while booked seats are grayed
out. Users can tap on any available seat to reserve it.
This interactive and visual approach makes it easy for
users to understand seating arrangements and select
the most suitable option based on their preferences,
such as choosing a window or aisle seat

16
6.Colors and Visual Design
6.1. Color Palette for User Interface (UI) Design

The color palette plays a crucial role in the user interface design of the T-Easy Pay train
ticket booking application. By leveraging a balanced combination of contrast and neutral
tones, we ensure both visual appeal and usability. Below are the considerations taken into
account while defining the color palette:
6.1.1.High Contrast for Readability
Primary Color (#D7AC00 - Warm Yellow):

• Used for primary actions like buttons (e.g., "Save", "Add to Cart") and highlights throughout
the app.

• This yellow color stands out on both dark and light backgrounds, ensuring that important
actions and elements are always visible.

Secondary Colors:

• Black (#000000) and Dark Grey (#333333) for text and icons on lighter backgrounds.

• These darker colors provide high contrast with the background, improving readability of
content like navigation text, headers, and body text.

Background Colors:

• White (#FFFFFF) and Light Grey (#F1F1F1) are used as the background for most sections,
especially for cards, forms, and lists. This ensures that the primary yellow and black
elements remain highly readable and distinct against these neutral tones.

Impact of High Contrast:

• Ensures that key elements like buttons, notifications, and form inputs are immediately
distinguishable.

• Makes the interface more accessible for users with low vision or those using the app in
bright light environments.

• Improves usability by clearly separating different interface elements through contrast,


making it easy to identify actions and navigation options.

6.1.2.Neutral Colors and Accessibility for Color-Blind Users


Neutral Colors:

• Shades of Grey (#F1F1F1, #C0C0C0) are used for less important elements like borders and
dividers.
• These neutral tones help maintain a clean and minimalist design, avoiding overwhelming the
user with excessive color saturation.

Accessibility Considerations for Color-Blind Users:

• Red-green color blindness is the most common form of color blindness. Therefore, the
primary color palette avoids red and green combinations as critical differentiators.
17
• Instead, we use black and yellow, which are distinct and accessible to most users, including
those with color vision deficiencies.
• For important actions (e.g., confirmation or error states), additional elements such as icons
and text descriptions are employed to complement color-based information, ensuring that
users with color blindness can still understand the context.

Impact on Accessibility:

• The use of neutral and accessible colors ensures that all users, regardless of their vision
abilities, can easily navigate the app and interact with key elements.

• By combining both color and text to communicate important information, the app provides
an inclusive experience for users who may have trouble distinguishing between certain
colors.

6.2.Justification for Color Choices


The chosen colors for the T-Easy Pay app are driven by the need for both usability and brand
identity:

• Primary Color (#D7AC00 - Warm Yellow):

o This shade of yellow is vibrant and friendly, which aligns with the app’s mission to
make train ticket booking quick and hassle-free. The color is also reminiscent of train
ticket counters and information signs, adding a subtle connection to the context of
train travel.

• Black (#000000) and Dark Grey (#333333):

o These are used for text and key icons to ensure readability across various screen
sizes. Black and dark grey provide excellent contrast against the white and light grey
backgrounds, ensuring that textual information remains clear, especially in list
views, buttons, and navigation elements.

• White (#FFFFFF) and Light Grey (#F1F1F1):

o These colors are used for background areas and secondary UI elements to provide a
clean, professional look while maintaining high readability of the primary text and
button elements.

• Additional Justification:

o The palette balances vibrancy and simplicity, ensuring a modern design that appeals
to a broad user base while maintaining functional clarity.

o The minimalistic use of bright color (yellow) in conjunction with a neutral


background improves user focus on primary actions, ensuring the interface is not
overwhelming or distracting.

o High contrast between text and background enhances readability for all users,
making the app functional even in less-than-ideal lighting conditions (e.g., outdoors).

18
7.High-Fidelity Prototype
7.1 Overview of the Prototype Design
The interface of the prototype, T-easy pay, in focus, has a well-defined structure and a simple
approach to the booking of train tickets, which is aimed at different groups of users and comprises a
number of functions. The prototype is designed in a way to provide intuitive navigation and
interaction to the users right from creating the account, booking the ticket, to tracking the user’s
travels.

19
7.2 Key Screens and Interactions

7.2.1 Booking Page

Features: Train route search bar, date selection, passenger details box, seat selection, payment
(credit card and other).

User Flow: User enters the start journey and end journey. Then he clicks on search button. Schedule
is shown and user clicks the button showing view seats. He selects the seat, and click on proceed to
pay button. After that he gets e-ticket confirmation.

Interactions: Make interactions clear and responsive. Validate and handle errors in input fields.

20
7.2.2 Live Train Updates Screen

• This page is designed to provide information on train


movements and their schedules, indicating when a
train is late, any shift in the time of arrival or
departure and even the position of the trains. This
page allows the notification for the status of the
trains which can help the users know the status of
their chosen trip.

7.2.3 E-Ticket Page

• On the E-ticket screen, there is a summary of the


journey that has been booked which gives particulars
of the train including which coach, seat number and
date of the journey. This one contains a QR code in
order to facilitate fast check-in at boarding which
makes it easy for the users when they are about to
board the train. The user would confirm this payment
once they reach the e portal.

21
7.2.4 Seat Tracking Interface

• Seat Information: A picture graph of the available


seats in the train possibly using different color for
representation.
• Seat selection: Select your preferred seats which you
will be flying and keep a track on them till you board.
• Alerts: We'll let you know if anything about your seat
availability or train schedule changes.

7.3 Accessibility Features in the Prototype (Figma)

Compliance: Hard to say from the images, but ideally the prototype meets accessibility
guidelines like WCAG.
Features: Think about including functionalities like high-contrast mode, keyboard navigation
and screen-reader compatible.
Testing - it is important to test the application/application feature in association with
assistive technology to make sure that it works for user with disability.

22
8.Conclusion

In conclusion, the T-easy Pay app exemplifies the importance of inclusive and accessible
design in modern mobile applications. By considering the diverse needs of users, from
beginners to advanced users, as well as individuals with disabilities, the app ensures that
everyone can easily book train tickets, access real-time updates, and manage their journeys
without unnecessary complications. The research into user groups, including elderly users,
tourists, and individuals with varying levels of digital literacy, has informed a design that is
both intuitive and robust.
Key accessibility features such as screen reader compatibility, high contrast mode, and
adjustable text sizes reflect the app's commitment to inclusivity. In addition, the multimodal
notifications and keyboard navigation ensure that users with different abilities can navigate
and interact with the app smoothly. The use of a color palette optimized for readability and
accessibility further enhances the overall user experience, making T-easy Pay a
comprehensive solution for a wide range of users.
The high-fidelity prototype brings these design principles to life, showcasing a seamless
booking process, real-time updates, e-ticket management, and seat tracking interfaces that
prioritize ease of use and accessibility. By focusing on user-friendliness and adhering to
WCAG guidelines, the app is well-positioned to meet the needs of a broad audience,
promoting independent and confident use for all travelers.
Through thoughtful design and a commitment to inclusivity, T-easy Pay has successfully
created an application that not only meets technical requirements but also enhances the
travel experience for all users, regardless of their abilities or background.

Group BD Members
Student ID Name
28283 W.G.G.A.S.K. Dias
28838 M.A.A. Ruvinda
29020 M.N.J. Rifka
28837 S.T.R.K.R. Samarakkody
28586 Hettiarachchi .U.K.
28549 W.H.E.P. Wickramaarachchi
28921 M.F.F. Fazla
29091 N.V. Pasindu Piyumika
28923 T.L.A. Pavani Nisansala
28732 J. M. P. L. Jayasekara
28485 L.D. Ruwanthika
29021 K.K.D.C.D. Nawarathna
28472 H.U. Madubhashini
29181 P.K.D.B. Sandaruwanee

23

You might also like