Delightful UX insights from the Trainline’s website

Today’s traveller is very different from previous generations. They are typically much more tech savvy, expect quality service and are less tolerant of poor user experiences. As such, the travel industry is continually challenged to create more intuitive customer experiences that are convenient for the modern traveller.

We’ve taken a look at the online booking checkout experience of The Trainline to discover what works really well and what could be potential barriers to an immersive checkout experience.

Making progress, every step of the way

Breaking up the Trainline’s booking process into smaller chunks allows travellers to tackle each step at a time.

Capture - trainline 1

The Trainline’s progress indicator visually guides a traveller through the process by breaking it up into logical steps in order to complete a specified task in each step. The progress indicator sits in a logical place, not crowding or distracting from the overall booking experience. Also, keeping the progress steps to a logical minimum creates a perception of ordered simplicity. 

I’m a guest

The Trainline booking process also offers a Guest Checkout option. Registration requires a level of psychological commitment that some travellers may not be prepared to make instantly. 

Capture trainline2

Forcing a traveller to register can have serious consequences to the cart abandonment rate, but allowing them to checkout as a guest offers a swifter, slicker customer experience.  

Action buttons

The Trainline site offers great visual instruction via action buttons. The shape and the colour stand out, giving the appearance of a button, and it is clear from the messaging what the user must do next. The button design communicates affordance and puts emphasis on the primary and most important action ‘Continue’, supported by a ghost button ‘Quick buy ticket’ for a secondary action.

Capture trainline3

Keeping up the dialog

While not every dialog warrants interruption, The Trainline’s session timeout modal cleverly relates it’s message to a traveller’s journey intent – rather than popping up a generic window. The modal simplifies three basic elements: title, personalised content and actions in a manner customised to the traveller’s intentions. Personalisation in the right context can deliver an amazing experience. 

Capture trainline4

In addition to extending a session which is about to expire, consider giving a user the ability to confirm the booking later, i.e. save their journey plan for added convenience (e.g. “Would you like to save your journey details for next time?”) – should they need or wish to interrupt their booking process; this highlights a hassle-free and immersive customer experience. Users don’t want to fill in their details again after a session expired. 

Capture trainline5

Address validation, error handling and assistance

The Trainline offers a simple postcode finder address validation experience. This means that when the customer comes to the point in the checkout where they need to enter their address, they enter their postcode, click ‘find address’ and scroll through the list of options until they spot their address and then select it. Once they have selected their address, the form is then autocompleted.

Capture trainline7

While this address validation works, it is not as sleek as it could be. This is due to the fact that it still requires time and effort from the customer. The necessity to go through the manual steps of typing a postcode and then having to search for an address can be remedied by a single line type-ahead address validation. This would mean that the customer could begin typing the first few characters of any part of their address, options would appear and the entire address could be autocompleted in one click. Not only would this give The Trainline a great customer experience, but would also ensure they received accurate address data.

Capture trainline8

Capture trainline9

Our most recent research on this subject suggests that the single field approach is far more intuitive when using type-ahead solutions than putting the search on the ‘Address line 1’ and/or ‘Address line 2, etc.’ fields of a complete field set. [link to UX research report]

Error messages are placed in the context of the action and are highlighted in red.

However, taking it one step further, the error messages could explain to a user what went wrong (e.g. “The email address that you entered is not valid”) and what is the next step the user should take to fix the error.

Capture trainline10

Furthermore, while disappearing placeholder text as form labels reduces clutter on the page and reduces the length of a form, it can have some negative connotations in terms of form fill usability. For example, when an error occurs, users may not know how to fix the error; they may be forced to manually select and delete the text input to reveal what information is required in the respective field. Disappearing form labels can also be a challenge on a user’s short term memory and may increase cognitive load as they increase the interaction cost of a user filling in the form (see The Trainline’s example below). 

Capture trainline11

In a nutshell

Overall, the Trainline checkout offers a good user experience that is generally easy to use. To create a frictionless booking experience, it is important to focus UX on: reducing the interaction cost a user has as part of the booking process (i.e. form filling, typing, clicking, etc.), and creating value in terms of making the overall customer experience amazing (e.g. reducing cognitive load, reducing distractions or confusion). A/B testing is another factor that can greatly improve UX, and the addition of a type-ahead address validation tool helps to create a seamless checkout that will keep customers coming back.  

Find out more about how PCA Predict’s address validation can help improve your user experience.