Building a new website for Transport for West Midlands
Where we began
We launched our old website, West Midlands Network, in 2016. Since then, user needs changed and lots of web technologies grew but our website didn’t keep up with them.
We also found our website was not accessible. This is important because everyone should be able to use transport. There are also new laws about web accessibility which mean we must provide accessible content.
Mobile first
In 2019, our website gets 22.2 million hits from 2.2 million users. 70% of our online traffic is from mobile devices. These statistics increase every year.
The number of mobile and tablet users encouraged us to build a mobile-first website. This means we create designs for small screens first, so we know our website are usable if you visit it on a smaller device like a phone.
Content overload
The content on our old website was overwhelming. It used complicated language and lacked a consistent style. There was also lots of extra information you did not need to know. Services often had frequently asked question pages.
We knew we had to be inclusive when building a new public transport website for the West Midlands. We want to improve the usability of our digital services. We want users to find the right information as quickly as possible and understand what to do next.
How we built our new website
Cataloguing our services
We went through the existing sitemap and checked with stakeholders to see what digital services we provide.
This helped us to identify the biggest pain points and prioritise which services needed redesigning first. Before this, we didn’t know which digital services were available because they were developed in siloes.
Card sorting
Content needs to be organised in a way that makes sense to users. This is called information architecture. Creating our navigation with users was important to us so that we do not build a website from our organisation’s point of view.
The old website used information architecture from several years ago. It did not match user expectations and had grown organically. This means it lost its structure and there were pieces of content in places that did not make sense, for example low-traffic, specialist content in the header menu.
We ran a user research activity called card sorting. During card sorting, users sort topics into categories that make sense to them. We used Optimal Workshop to run our card sort as it is a powerful tool that also helps to analyse the results.
214 participants took part in the card sorting session for the new website. You only need 30 participants for this type of research to be valid.
We showed users 60 topics. We decided not to brand them as ‘Swift’ or ‘West Midlands Network’ to see how users grouped content. We wanted to see whether users naturally grouped pieces of content into a category called Swift.
From the card sorting activity, we found that users group content into five main categories:
- Plan a journey
- Tickets and Swift
- Get help
- Engagement
- About us
We decided to structure our new information architecture based on this. This included merging our Swift subsite into the overall content structure.
This revamped site map included better section and related content navigation. We also used action-oriented links. This means we use ‘Get a refund’ instead of ‘Refund application process’. It helps users to get to content and services quickly because we’re using their language, rather than the name of our organisational process.
Rewriting content
At West Midlands Combined Authority, we follow the Government Design Service (GDS) principles. This helps us design accessible services which meet user needs for a government website.
We often used the same components and guidance from the GOV.UK Design System to save time when building the new website.
GOV.UK has strict requirements on how content is be written. Text should be formatted in a way that it is large enough to read for users of all ages. You need to use short sentences to get your point across quickly and use plain English.
We met these requirements by designing the language of our new website and services to be specific, informative, clear and to the point. We worked with a content designer to help us do this.
We also wrote an A-to-Z style guide to apply to our digital services. It helps people who are writing content to be consistent. The guide covers:
- style
- spelling
- grammar
Before the style guide, people would describe things in different ways. We now have one source of the truth.
Conforming to GOV.UK and GDS standards helped us to build a more accessible and usable website.
Design System
We built a new Design System from scratch specifically for our new website. We did lots of user research to make sure we used accessible text and colours, while still meeting our corporate brand guidelines.
Each component we designed was tested with users. We used their feedback to improve our components and to make sure they were accessible.
Our components are like building blocks. They save us time because we use a consistent set of components. This helped us to create consistent pages of content.
We maintain our design system all the time. We review and add new styles and components when we find a need. If we update something in the design system, it is updated everywhere without the need for updating lots of code.
User research
We did lots of user research and testing to identify our user needs, wants and pain points. We also used user research to make sure our website was accessible and usable.
We measured usability through moderated and unmoderated user testing sessions. Moderated user testing is like an interview and unmoderated user testing means the user does it by themselves without anybody there. This helped us to understand how people interacted with our designs and components.
We changed our designs based on the user feedback. This is called iterating. Iterating our designs based on user feedback made sure our website is usable and accessible.
Content testing
We want our content to be simple and in plain English. We tested the old copy with users to see what users understood and what needed to be rewritten. We work in the transport industry and our content writers are experts. Users are not experts.
We performed highlighter testing with users using sentences from old content. Highlighter tests help us to evaluate web content in a Word document. We removed most formatting to help users focus on the words. Users highlighted content to show if they understood it.
This test helped us to identify words and phrases which are unfamiliar or confusing. The insights showed that we needed to rewrite lots of content into plain English. We continued to test and iterate content that users found confusing.
Rebranding from West Midlands Network (WMN) to Transport for West Midlands (TfWM)
Over the last two years, we found that users are confused by the number of transport brands in the West Midlands. We’ve been through many changes ourselves in the last 10 years.
Sometimes this is because of the number of private companies — called operators — we have running buses in the region. Sometimes it is because the user has experienced many brand changes and only remember one name.
We gave this feedback to our marketing and communications team. The team attends our fortnightly presentations about what we’re working on and what we have found out through user research.
We have retired the West Midlands Network brand to merge it into Transport for West Midlands. This reduces the number of brands and creates a simple and clear approach to public transport. Our team members are big fans of this change!
What’s next?
There are feedback links across the website to help you tell us about issues or bugs. We will check the feedback and make changes.
It will take time to fully implement the Transport for West Midlands brand changes across all of our digital services. Thank you for your patience while we get through this.
There are also lots of other services which we need to redesign. For example, the journey planner, ticket finder and timetables. We will work on these over the next year to make even better and accessible digital services for public transport.
You might sometimes be transferred to our old website. Specifically, if you need to fill in a form or use an app like ticket finder or timetables. We have tried to make sure you will not notice this. We will add redesigned services to the website as we make progress.
We also need to do even more to make our website accessible. We will do more testing to make sure everyone can use our website. If you have a disability or impairment and want to help us, get in touch by emailing UserTesting@wmca.org.uk.
You can also join our User Testing Group to give us feedback and participate in user testing.
This blog is a collaboration between:
- Jacob Mincher — Interaction and content designer
- Katerina.Kirpa — Senior designer
- Martin Price — Senior designer
- Tom Smee — User researcher
You can read more blogs from our team on the WMCA Digital and Data Medium publication.
P.S. We’re hiring! We have vacancies on our project team for:
