Buying a Railway Ticket via ATVM in Mumbai — A UX Case Study

Using the railway’s ATVM in Mumbai is not a pleasant experience and that’s why I decided to analyze the problem & to know what exactly people are frustrated with.

Chaos at the ticket counter is a usual site.

Automatic Ticket Vending Machine (ATVM) as it is called, is meant to be a direct, easy and faster way to cut off to those long ticket counter queues for getting daily and seasonal tickets for Mumbai local trains.

Long queues where ATVM attendant is buying the tickets while other ATVMs are idle.

My experience of using ATVM, or waiting for people to finish their order was quite frustrating.

I had this pain point and couldn’t believe that I was the only one, After reaching out to my friends, I got to know about some more issues they had experienced.

My purpose here is to make the experience of buying a ticket less miserable.

The plan

Based on IDEO’s approach.

So I made a plan and started executing it

If you’re in a hurry and want to use the prototype click here.

So first, I needed to discover why the ATVM was frustrating. In other words, I had to define the problem.

So when I asked my slack design community, they guided me to go into the field and ask those question to the users & also observe people using the ATVMs (Ethnographic study).

The context of use.

Indeed, the best way to understand people’s need is to go in their environment and find out their context of use:

• Who are they?
• What are their goals?
• What is their environment?

So, I paid a visit to a railway station to ask people if I could observe how they interacted with the ATVM.

I chose the Wadala Road & CSMT stations which had a diverse group of users also it was nearby me which would help me to get quick user feedback.

First, I did a usability inspection of ATVM, reviewing the current system against a set of heuristics.

To give you an understanding of the ticket machine, I’ll start by the usability inspection first, then move to the usability tests.

Navigation

The main use case, which I filmed below is buying a ticket using a map(it covers urban and suburban railway stations of Mumbai).

To get an overview of the system, I laid out the machine’s Information Architecture.

Current IA of the ATVM.

Analysis

The machine had hardware issues like lag in response of touch screen, poor touch accuracy, tickets getting stuck when dispensed, glare on the screen & unable to scan smart card.

On the other hand, the interface violated a lot of heuristics which will be discussed below.

The sizing of the buttons is small which makes it difficult to select for large finger users.

When I tried to go back to change my destination, I was directed to the start screen, so all of my selections are lost.

After completing the whole transaction process the users got the error that the “Card could not be read” this is frustrating and if there are any issues with the machine it should be known to the user before or when they use the machine.

Below design heuristics for public kiosks conceived by Frode Eika Sandnes et al. (2010). This set of heuristics take into considerations the particular requirements of public kiosk systems and is proven and tested by experienced researchers.

H1 Avoid unnecessary visual elements.

H2 Make text and elements visible with sufficient contrast.

H3 Avoid language selections — make pages multilingual.

H4 Communicate on multiple channels (verbal & non-verbal)– minimize the need for reading.

H5 Show instructional videos on the start page.

H6 Provide clear affordances — make actions visible.

H7 Avoid unnecessary steps.

H8 Prefer direct selection over the selection by cycling through items.

H9 Solicit the advice of experts on language and culture(Or test the language with the users ).

H10 Use geographic layout for geographic data.

H11 Rely on recall, not memory.

H12 Use ‘confirm’ and ‘next’ buttons sparingly — provide back buttons (undo).

H13 Avoid unnecessary accuracy and detail.

H14 Do not allow illegal choices.

H15 Request information sequentially, not simultaneously.

H16 Reveal all the needed steps from the start.

: Design heuristics for public kiosks by Frode Eika Sandnes et al. (2010)

The Start screen

The main menu gives you 8 choices.

The “Book journey tickets” is being camouflaged with the background image. “Using map, Fast booking & All other stations” are closely placed which could result in errors.

(The system should speak the users’ language rather than system-oriented terms. Follow real-world conventions)Examples: Renew season ticket, Smart card detail, All other stations.

Recharge smart card option useless because this machine has no slot for cash/coins.

H1: The Gateway of India background image is affecting text.

H4: Use of relevant icons could be used to understand options better.

Booking tickets journey: Using map

The ATVM’s map is overlaid on the geographical map of Mumbai which is good for actual road navigation, but users are here to quickly find the destination and book a ticket.

• The whole map is divided into zones 1–9 which is used to group stations, users are made to locate their zones and click on it.
• The railway stations list is cluttered and anxiety-evoking(the issue is seen when one is in hurry to board a train).
• There is a clash between CRIS’s and users conceptual model as users are still clicking on the exact station and not zones in spite of tip to choose destination zone, thus increasing the time of a transaction. (concluded by usability testing)

Selecting exact station page

• The buttons labelled with stations are too close and cramped.
• Buttons are placed vertically which increases the time to scan the choose an exact destination.
• The stations present in a zone could range from 8–17 which is a lot of buttons to choose from.
• The journey ticket preview is a good feature but ignored due to its placement at the lower part of the screen as the user’s hand covers that area while using ATVM. (Observed during usability testing)
• H12: Back button not provided

Change journey details

Vertical scanning takes less time than horizontal scanning.

Checkout screen

The SUCCESS & ERROR notification have the same colour. This causes the user to wait for a ticket to dispense in spite of error notification.

Usability testing

I interviewed the CRIS Tech-support team about the know-how of the ATVM and shared the issues with them.

I also interviewed CRIS Mumbai project manager. He said that they just maintain the system if you have improvements you can present it to the general manager.

Also CRIS, New Delhi is where innovation and na ew product comes alive or railways just put out tenders for private companies to design the ATVMs.

Due to that ,there are inconsistencies in ATVM’s colors shape etc.(The new ATVM was red-grey instead of violet-orange, which lead to users not using it thinking its something different.)

I confirmed with the project manager that “User testing is not done, only the developers test it in a lab environment”

I wanted to get an idea of how users think the ATVM work.

I asked several nice people if I could observe their journey on the machine. I wanted to get an idea of how users think How the ATVM works?. I paid attention to the language they were using, their process, time to success, their pain points.

Here are some insights:

“Arre, chalu kya hai!(“what the hell is happening?”)-a user who tried 3 atvms and got “Card could not be read“ error at last stage of transaction.

Users didn’t know or care of other options available.

After observing users at railway station using ATVM I found out some issues they faced while using the machine. I have noted them in a Google sheet

Many user profiles came up after understanding the tests like Experienced or Inexperienced users, Local or Outstation travellers ,language skills(marathi, hindi, english)and level of technical skills.

People traveling with the metro come from various horizons, using personas presented the risk of being too reducting. I also didn’t want to fill the missing bits with hypothetical data, which would make them biased.

Rather, I chose to uncover their Jobs To Be Done: personas focus on who you are designing for, Jobs To Be Done focus on what your user’s goals are and put them in perspective.

This is particularly relevant here: every person using the railway is different but their Jobs To Be Done can be similar.

So,I used Job To be done theory to find solutions. Click here to read my references.

I asked these questions to the user who just bought the tickets from ATVM:

• Why did you use the ATVM?
• What were you trying to achieve by buying a ticket by ATVM?
• What motivated you to buy tickets with than other alternatives?

Creating Job stories

Job stories consists of Dimensions and Circumstances.

1.Dimensions of jobs to be done

Functional job: Task or an activity.

Emotional job: How do I feel when I am doing that job.

Social job: Was the perception of me in the social context.

2. Circumstances jobs to be done

• Situation.
• Motivation: Trigger.
• Desired outcome.

These are the job stories I came up by observing users & interviewing them.

Situation

When I am buying a ticket via ATVM …

Motivation

• I struggle to avoid any mistakes because that will make me and the queue angry.
• I struggle to find my destination in the map of the ATVM when I am in hurry and in turn lose the train.
• I get irritated when ATVM gives a “card could not be read” error at the end of the transaction.
• I don’t want to freeze while looking at the map searching for the station because that will waste my time and other people in the queue too hence it will embarrass me.

Desired outcome

• so that I can reach home at dinner on time.
• so that I could catch a train on time.
• so that I would spend less time buying the tickets.
• so that I would in waste my time using faulty ATVM.
• so I won’t make fool of myself.

How will we measure success?

• Reduced time for a transaction.
• Testing & talking to users and getting their feedback on the new design.
• Reduce in anxiety and freezing of users while using ATVM.

Inferring jobs to be done from job stories

Main job

• When I want to travel by train in Mumbai I want to quickly by my ticket without any mistakes so that I would reach my destination on time.

Related jobs

• When I buy tickets using a map at ATVM I want to find my station easily and complete the transaction without doing any mistake and not embarrass myself in front of everyone.
• When I have my ticket using quick booking I want to find the station and complete the transaction in the least time possible so that I would not keep others waiting.

Opportunities

• Make ATVM’s language more understandable.
• Make map more readable reducing user anxiety and freezing.
• Make transactions as error-free as possible(increasing the size of buttons, reducing the clutter, make a provision to give a summary of the ticket before checkout).
• Add shortcut for Experienced users hence reducing the time per transaction.
• Make design decisions according to the users understanding and conceptual model.
• ATVM should scan for a card in the second stage of the process, and if it is unable then “card could not be read” error can be given which will save the time of the user.

The translation of these needs into design decisions means improving main user flow for current users(using map), providing shortcuts for experienced users (quick booking) while helping unfamiliar users/beginners finding their destination more easily(search stations).

Constraints

• Touch screen accuracy: it differs from one ATVM to other, but to prevent errors good spacing and bigger buttons need to be present.
• Users are used to original user flow of the ATVM, so changes which will have steep learning curves would irritate them.

Users Don’t Hate Change. They Hate Our Design Choices.

-Jared Spool

• Considering the limitation system (hardware and software) every decision should be logical and doable by the developers. A good reference could be the current system’s interface.
• Need to make high contrast interfaces because many ATVMs are placed in sunlit areas which put a glare on the screen.
• Focus on what the railway authority could improve quickly at a lower cost.
• It should be simple enough so that everybody understands it, people from various cultures and having low-level technology & language skills.

For a widely used machine like a ticket machine, addressing various personas needs can be necessary.

Objectives

The final objective would be to reduce the time to purchase in order to reduce waiting queues while giving satisfaction to the user. Therefore, mixing business and UX goals.

The most challenging scenario is “Using map” OPTION because having a list of 120 stations on your face is anxiety-inducing.

The most common scenario, on the other hand, is simply buying a ticket The ticket sale from ATVMs is 27 per cent of the total ticket sales(source here) in Central Railway.429 ATVM machines have been installed so far. The experience of users when the machine, software & servers working as expected is okay & time per transaction could be improved too, especially when you hear from users that the overall feeling of using the machine is not satisfying. Shortcuts for experienced users would be welcome here.

Brainstorming

I googled various ATVMs and studied their interfaces, also I read HCI research papers on designing for kiosks. (Link 1) (Link 2)

Next, I improved the architecture by removing non-functioning buttons and using simple language which users could understand.

Keeping current users in mind I only changed what was necessary.

My first step was to remove the unwanted elements and increase the font size. Its important because of the distance from which the user is interacting with the display is 40 cm (average)

In the most used case “Book tickets using map” the current map is clutter so its necessary to organize it in a way that will be easier for users to find and reduce their anxiety.

Following design heuristics for public kiosks conceived by Sandnes et al means having a back button, showing steps of the process, reducing the task per page.

This feature helps users to switch to other functioning ATVM ’s when an error is notified.

There were many occurrences of users reaching the final step of the transaction and then notified with “Card could not be read.” error which irritated the users. It’s a hardware issue but that could be prevented by software as the machine could scan the smart card at the second step of the transaction and notifies the user there itself.

Also If the balance is less than 4₹ should give “Your balance is low error”

I observed that error and the success notification colour is same which didn’t communicate the error to the user. Here GREEN (for success) and RED (for failure) could be used

Taking the job stories into consideration I also need to work on a quick booking option which is currently only available at CSMT station.

Sketching

START SCREEN

Problems

1. Users were not able to understand the language i.e the language wasn’t local enough(Season ticket, Smart card detail)
2. Buttons size and background image camouflaged the text.
3. Too many choices and Non-functional button(Recharge smart card)

Solutions

1. Renew pass instead of “Season ticket”, Check balance instead of “Smart card detail”
2. Background image removed & Button size increased to make full use of screen
3. Removing Non-functional button & grouping buttons.
4. When observing users using old ATVM most used option was Using map so it should be the biggest button in the screen which will help the user to easily find it.

Here, my goal was to make the language more understandable and concise.

Here, my goal was to make the language more understandable and concise.

MAP

Problems

1. Crammed stations list, anxiety-inducing, cluttered.
2. Each zone has 8–17 stations in them leading to more choice in the next step.
3. The conceptual model (using zones )is different from users as users clicked on the exact station.

Solutions

1. Using the case study’s map as a base I organized the list and tested with the users.T hey were able to tell me that this is western, central, harbour with even labelling it
2. I needed to update & make some changes for current ATVM (size 27.5 x 36 cm) as the case study’s ATVM was of 20'’inches. Also then I grouped the stations in 5–6 which will reduce the information load.
3. Giving every group a square outline will make them feel like a button. After seeing that they will click on the group consisting of the station & not the station itself. I tested this hypothesis and it worked as expected.
4. Also, I referred to this old project for designing kiosks.
5. There was a lot of white space in the map so I made some changes in the map by overlapping groups of stations on the map. This increased the touch area.

• By making a similar map to reference and testing with the users confirmed that is a good solution as it was easy for users to understand and navigate.
• The map which I used as a reference was in the list form and not touch screen friendly so grouped the element in 5–6 stations which will solve the issue
• I tested the map with grouped stations and changed the location of the railway line headers as users scanned the map from top to down.

Quick booking

There was a need to reduce the transaction time for experienced users.

This station list has no sequence, making it hard for users to find their destinations

Right now its a customized solution only for CSMT station and making a unique for every station would be too tedious,

So, making a common solution would mean consistency, less learning curve.

Taking reference from the map, I made a list of junctions and important stations and came up with these solutions:

I would like to share the idea which was discarded as it was a customized solution.

It covered all the stations from CSMT.

I saw a pattern of railway setting a price on a ticket. eg.Cost of the ticket from CSMT to Panvel or Kharghar will be same as they fall in same pricing bracket.

This contained all the important junctions and could be used on any stations.

Wireframing

The next step was to wireframe it, which I did, using black and white colours to focus on contrast first:

User flow 1: Using the map option: Iteration 1

• I tested the map with grouped stations and changed the location of the railway line header to the top, as the users scanned the map from top to down.
• In the third step, arranging the stations in a vertical manner help reduce the scan time. Also, it feels like a zoomed-in version of the stations in the map, thus keeping the consistency.
• Choosing more than “3” no. of tickets increased taps and hence the time of user interacting with the machine.

This gave me confidence about the size of the elements used.

• Also, I wanted to see if the buttons were big enough for users so I decided to take touch heat-map by painting the finger and letting the user (my dad) test the wireframe.

User flow 1: Using the map option: Iteration 2

• Start screen could be grouped in terms of its functions.
• I removed the Recharge the smart card option as there was no cash input.
• In the second step, the grouped station could be enclosed in bold rectangles.
• Also, there’s a lot of space which could be used to increase the touch area of the grouped stations.
• Added train type in the fourth step.
• Redesigned “Review ticket” (fifth step) as users scanned in an F-shaped pattern.

User flow 1: Using the map option: Iteration 3

After testing this,

• I found out the bold rectangles increased the touch area also increasing anxiety as there were too many rectangles in front of the users.
• Making one column light and another dark could solve this issue. Also differentiating each column with colours can help too.

User flow 2: Quick booking

• Users were able to find stations easily due to the division of stations into 3 columns.
• No other issues found.

User flow 3: Search station

• Keeping touch accuracy in mind, I increased the size of the keyboard.
• This option was mainly used to buy the local tickets of Pune and Lonavala so, I kept them as suggested stations.
• To reduce memory load I greyed out the alphabets which are not the first letter of the station in the database, so users can only focus on the stations which are present in the database. (I got that idea from Delhi’s metro keyboard. )
• While testing the users were able to type and find the destination easily.

Prototyping

Adding colours to wireframes

• The start screen didn’t need any change.
• I used different colours on the map to differentiate different railway lines.
• Red was used on the Close button and to show Error.
• Green was used on for Next, Print, and to show the Successful transaction.

I used 700 range of colour intensity from the material palette. These colour had a good level of contrast.

After choosing a range, it was quite easy to just use the colours.

User flow 1: Using a map

Review ticket interface made by observing “What information was a priority to the users”

New success & error notification

User flow 2: Quick booking

Quick booking station’s list is based on the new map, hence keeping consistency and least learning curve.

User flow 3: Search stations.

You can also play with my prototype by clicking below (Keep in mind that I created this prototype for the screen size of ATVM was 30 cm x 27 cm so some elements like map will have small font as your screen size is smaller than ATVM’s):

👉 Click here to play with the my Railway ATVM👈👉 Click here to play with the my Railway ATVM👈👉 Click here to play with the my Railway ATVM👈👉 Click here to play with the my Railway ATVM👈👉 Click here to play with the my Railway ATVM👈👉 Click here to play with the my Railway ATVM👈👉 Click here to play with the my Railway ATVM👈👉 Click here to play with the my Railway ATVM👈

Results

• The addition of colours did help users to differentiate the elements more easily.
• I had to test the prototype by printing it, so the new time taken to print a ticket could not be exact. (taking in mind the changing pages after interaction)
• Here is my Prototype usability testing google sheet.
• When the users saw the prototype for the first time, they scanned the whole map and they understood the pattern. So when I asked them to find another station they were easily able to.
• While using the new map the users didn’t freeze.
• The quick booking was fastest with an average transaction time of 13 secs. User found the quick booking quite easy.
• This new interface follows all of the heuristics (except H5 Show instructional videos on the start page and H16 Reveal all the needed steps from the start.)
• One issue I observed was that the users were still clicking on pre-selected options while on “Change journey details” step. This was not an issue when users were interacting with the old ATVM’s interface.

Future improvements

• Use of icons and graphical cues could help reduce memory load.
• There’s a need to make disable friendly ATVMs.
• More aggressive pushing of buying tickets via mobile app (UTS)will reduce the queues once and for all. Also when I tried to buy the ticket via an app, I was greeted with “Server down error”.
• Buying a ticket via UTS’s GPS option is not reliable and often frustrating. (If you are nearby the station, you are not able to buy the ticket.)
• Installing ATVMs at all entry points of stations, instead of all 5–6 at one place. (The ticket counter area will be less crowded and users can buy tickets more easily.)
• There should be stalls near ATVMs for someone to buy the smart card. Reaching out to the users at ground zero will help them look at the queues(the triggers), compare the pros & cons and buy the smart card.
• One more way to make the user’s life easy is having an integrated ticketing system(One city, one card). It’s quite far-fetched but this gives users a good point to buy a smart card. This could be used to buy any ticket(bus, train, metro, monorail).Source here

Learnings

• I made sure that I involve users at every point of my process. Due to that, I’m quite confident about my designs.
• Due to the unconventional size of the ATVM’s screen, it was difficult to test the wireframe on a laptop. Also, it was a touchscreen so I started printing out wireframes which helped me to keep the font & button size usable and easily test them.
• Using material colours/flat design theme could be an issue as it doesn’t give a feel of a button right away (adding a shadow could be a solution but I’m not sure if the ATVM supports that). I added a border to a button to signify clickiness.
• I guerrilla tested the wireframes (i was lucky enough to exactly know who my users are, this made testing the right users easy.)
• Shattering my pre-conceived notion, most users were happy to test my designs and share their issues.
• For Usability tests, I needed one more person to share my tasks, that would have reduced the stressful job of doing everything (timing tests, asking questions, handling of wireframes & observing) at once.
• Many unknown error/issues were uncovered just by observing users interacting with the ATVM.

Finally, without these people & resources, this would not have been possible without their help.

Thank you for reading this case study. I would love to hear your suggestions on how this could be better.

Let me know in comments below or reach out to me over — Email me at sanketnja@gmail.com, Twitter or LinkedIn.