Designing an accessible find my rail zone service
Here at the West Midlands Combined Authority, we instil inclusive design principles into our everyday work. We ensure that our services are usable by everyone, anywhere and anytime.
Over the past year, we’ve been rebuilding the Transport for West Midlands (TfWM) website from the ground up. We redesigned pages and wrote new content to make the website easy to use and accessible. One of the biggest challenges was turning the existing train zone map page into an accessible service. We needed to overhaul the current map and create a service where any user can find their rail zones.
During the discovery phase, we found out that many users did not understand rail zones. However, users need to know which train zones they’ll travel between before they buy a train ticket. Imagine buying the wrong ticket and having to pay extra on your journey because the zone map was hard to use.
The old rail zone map
On the old TfWM website, if you were a train user you had to zoom in and pan across the interactive map to find your rail zones. This doesn’t sound very accessible, and it wasn’t. By restricting zone information to a map, we were blocking users with visual impairments. It also wasn’t intuitive to use, having to press the big purple buttons each time you wanted to zoom, move and refresh the map.
During the redesign of the website, we had the opportunity to turn this map into a functional service that is easy to use by everyone.
What users want
During the discovery phase of the ticket finder for our new website, we found that many users don’t understand a lot of the information around zones. Experience of zones tended to come from visiting London or other cities, or from regular rail passengers. Many participants weren’t aware that zones existed.
We discussed the terminology around zones with users. We discovered that users don’t understand what rail zones are or what rail zone ticket is best for their needs.
When someone completely new to ticketing searches for tickets, this can be confusing. Our ticket names include the zones in which the ticket is valid. Users must know the rail zones they want to travel between before they buy their ticket.
During the discovery phase, we identified four ‘must have’ user needs when building the new service. From the user stories, we clarified the goals of the new rail zone service. We would refer to these during design and development. They were:
To provide a clear, plain English description of what rail zones are in the West Midlands Network
As users didn’t understand rail zones, we needed to write new content so that it’s free from jargon and uses plain English.
To be able to tell users what rail zones two or more stations are in
We must provide an easier way for users to find what rail zones their chosen train stations are in without the map. This would make it quicker for users to find the zones they need by calculating it for them.
To provide a text alternative to the map for people who can’t use maps
Maps are visual by default and hide information for users with visual and motor impairments. We already performed research into accessible maps with our transport disruptions service. The solution was to present the information on the map as a list. A list in logical order so users with screens readers can get the information they need at the right time.
Designing the new service around these user goals will help users to understand the rail zones in the West Midlands network.
Designing the new service
First, we needed to see if we could reuse an existing train schematic map that was up to date. We were happy to use the existing train map schematic from West Midlands Trains. This map included the Metro tram line and bus interchange routes. This information was not necessary to complete the main task which is to find out which rail zones you need for your travel, so we removed it.
Throughout the design phase, we checked that the colours on the map met colour contrast requirements. We knew that individual train lines did not need to have their own colour as train lines and zones aren’t related. So, we used the same colour for all the train lines to simplify the map. This made it easier for us when choosing the zonal area colours.
For the concentric zone areas, they needed enough contrast to differentiate from each other. In the old map, each zone has its own colour. As these different colours didn’t add any value, we could use two alternating colours instead. These colours were light and dark beige. We tested these two colours as they had enough contrast next to each other and with the orange train lines on top.
When users choose their train station from the autocomplete field on the left, the map highlights the train station name. This helps users to refer to the location of the train station on the map. The styling of the train station changes to a purple box to highlight this change.
Along with train station zone data, we also had data for train station facilities. This includes part and full step-free access, as well as parking. Selecting or deselecting these options in the key shows or hides matching train stations. This helps users with motor disabilities filter the train stations that they can and cannot use.
The map view is the default view, but users can switch to the list view at the top of the page. Stations already entered in the fields will carry over from either view. The user doesn’t have to re-enter their stations if they prefer one view over the other.
For the accessible text alternative to the map, we categorised the list of stations by zone. We split the rail zones across accordions, rather than one long list. Screen readers will read the rail zone accordion names first. This is easier to navigate rather than list all stations together. Users also have the option to show or hide all the accordions through the open or close action buttons.
The ‘Find my bus area’ service can also be accessed when a user is buying a ticket. This is so users can refer to the map or list when they confirm the zones for their train ticket. We added a function where we recommend the best zone ticket for the user based on their stations. This will reduce cognitive load on the user as we provide the best zone ticket recommendation for them.
Remember, not all maps are accessible for users with visual and motor impairments. If you need to use a map to display information, then look for an alternative way of providing the same information in an accessible format. The format you use may depend on the information you are providing and your user base. Remember to test this format with your users to make sure it’s right and iterate if necessary.
If you don’t provide an accessible alternative to a map, this will damage the usability of your website. You’ll be restricting important information to users who cannot use maps. If users can’t find the information they need, then they’ll likely abandon your website.
As this service is still in beta, we are monitoring the performance of this service through feedback. Take a look at the new service for yourself and let us know what you think by leaving us feedback.
You can also join our User Testing Group to give us feedback and participate in user testing.
You can read more blogs from our team on the WMCA Digital and Data Medium publication.
