Avanti expects 55% boost with Train Time Table redesign

03 min read | Last updated: 29 June 2024

My Role

UX designer

Timeline

3 months

Status

Shipped: Phase 1

What I delivered

User research | UI design | Prototyping | Usability testing
| Strategy sessions

Introduction

Avanti’s train times table is a place where people can see information about train times, delays, cancellation and disruptions.

Every year, train times table attracts over a million visitors, with 70% accessing the page via mobile devices. But these tables where out of date in terms of design. As part of revamping the website based on our new design system, our intention was to redesign the train times table so it aligns with Avanti’s updated design guidelines.

This is how the train times tables looked on mobile

User pain points

Following an in-depth two day research conducted on board with 10 travellers and 3 staff members, our objectives extended beyond merely updating the table’s aesthetics. We found out that,


  1. People want quick, clear and simple information.

  2. Times, dates and routes are most important.

  3. Sometimes information is wrong or is/feels out of date.

  4. A few people want to see how to get compensation or find an alternative route.


We decided to create a set of principles for creating & sharing travel updates and disruption info online.

Designing the listing

In order to prioritise, key disruption information was divided into three,

  1. Good service — On time

  2. Minor disruption — Delayed and all other service updates

  3. Major disruption — Cancelled

These categories were visually represented with colour coded icons: Green for good service, Amber for minor disruptions, and Red for major disruptions. Following are the decisions made to re design the train times listing

In order to prioritise, key disruption information was divided into three,

  1. Good service — On time

  2. Minor disruption — Delayed and all other service updates

  3. Major disruption — Cancelled

These categories were visually represented with colour coded icons: Green for good service, Amber for minor disruptions, and Red for major disruptions. Following are the decisions made to re design the train times listing

In order to prioritise, key disruption information was divided into three,

  1. Good service — On time

  2. Minor disruption — Delayed and all other service updates

  3. Major disruption — Cancelled

These categories were visually represented with colour coded icons: Green for good service, Amber for minor disruptions, and Red for major disruptions. Following are the decisions made to re design the train times listing

Designing the route map

More visual hierarchy was introduced giving importance to the departure and arrival stations, time, delays, calling points.

  1. “Last updated time” was added in order to make user understand that the data is up to date.

  2. “Travel information” section was added to inform the user why the train is delayed or cancelled.

  3. When the train is delayed more than 20 mins “Problems with your journey” will appear where user can find the link for delay repay.

  4. Modular design was selected inspired by train carriages.

More visual hierarchy was introduced giving importance to the departure and arrival stations, time, delays, calling points.

  1. “Last updated time” was added in order to make user understand that the data is up to date.

  2. “Travel information” section was added to inform the user why the train is delayed or cancelled.

  3. When the train is delayed more than 20 mins “Problems with your journey” will appear where user can find the link for delay repay.

  4. Modular design was selected inspired by train carriages.

More visual hierarchy was introduced giving importance to the departure and arrival stations, time, delays, calling points.

  1. “Last updated time” was added in order to make user understand that the data is up to date.

  2. “Travel information” section was added to inform the user why the train is delayed or cancelled.

  3. When the train is delayed more than 20 mins “Problems with your journey” will appear where user can find the link for delay repay.

  4. Modular design was selected inspired by train carriages.

Impact

We conducted an online usability test with 464 participants and the results showed:

  1. 91% found adequate delay information.

  2. 79% found enough cancellation information.

  3. 74% could find needed information.

  4. 55% were more likely to use the website.

Individuals within the sample performed tested two core functionalities (Quick Buy and All Destinations) of the TVM and through the administration of a questionnaire, insights and feedback were collected alongside their emotional, cognitive and behavioural responses.

By re-designing Quick buy feature in Avanti’s ticket vending machines across UK, Avanti achieved the following,

  1. Customer satisfaction of 9.1/10

  2. System Usability Scale 84/100

  3. Quick Buy feature is approximately 8.3% better in usability compared to the All Destination Search

  4. By commuters 83% rated AWC's TVMs as better or significantly better.

Individuals within the sample performed tested two core functionalities (Quick Buy and All Destinations) of the TVM and through the administration of a questionnaire, insights and feedback were collected alongside their emotional, cognitive and behavioural responses.

By re-designing Quick buy feature in Avanti’s ticket vending machines across UK, Avanti achieved the following,

  1. Customer satisfaction of 4.3/5

  2. System Usability Scale 84/100

  3. Quick Buy feature is approximately 8.3% better in usability compared to the All Destination Search

  4. By commuters 83% rated AWC's TVMs as better or significantly better.

More case studies

Quick buy redesign for ticket vending machines led to customer satisfaction of 4.3/5

The improvements focused on user control, detailed information, and a seamless experience, significantly enhancing usability and user trust

Reimagining disruption communication: The journey from Nexus Alpha to the Rainbow Board

Enhancing transparency and user experience with a colour-coded solution on the Avanti West Coast homepage.

More case studies

Quick buy redesign for ticket vending machines led to customer satisfaction of 4.3/5

The improvements focused on user control, detailed information, and a seamless experience, significantly enhancing usability and user trust

Reimagining disruption communication: The journey from Nexus Alpha to the Rainbow Board

Enhancing transparency and user experience with a colour-coded solution on the Avanti West Coast homepage.

Interested in working
with me?

nithin103@gmail.com

If you loved my work please feel free to contact me through my email. I usually respond within a day.

Made with music and loads of chai

Interested in working
with me?

If you loved my work please feel free to contact me through my email. I usually respond within a day.

nithin103@gmail.com

Made with music and loads of chai

Interested in working
with me?

If you loved my work please feel free to contact me through my email. I usually respond within a day.

nithin103@gmail.com

Made with music
and loads of chai