TfL

Challenge

We need to be in a world where data is helping us access information that makes decisions easier and allows us to effectively find a solution in a couple of seconds. Not a difficult challenge?

I joined the project half-way through when most of the research was complete. I was hired as an Experience Design Lead to help create a working concept of their digital screen experience that would then go into trials across multiple tube stations.

Transport for London

TfL operate many of the transport services including: the London Underground, London Buses, Docklands Light Railway, London Overground, TfL Rail, London Trams, London River Services, London Dial-a-Ride, Victoria Coach Station, Santander Cycles and the Emirates Air Line.

Almost 1.35 billion passenger journeys were made on the Tube last year. There were more than 31 million journeys made in London on an average day.

Product

Digital screens – they are literally everywhere now. TfL wanted to make using these screens easier to read and understand allowing customers to make vital decisions quickly.

Currently, the screens are showing too much information on a growing network that needs a scalable system. The system needs to be capable of handling the pressures of issues affecting the tube network in a useful, simple and intelligent manner.

British road signs

As soon as I was briefed about the TfL project, the British road signs project immediately came to mind. Both projects have a lot in common: the users need to be able to make decisions about direction of travel with only a couple of seconds to decide while travelling. I then undertook further research on Jock Kinneir and Margaret Calvert’s design philosophy.

Their design system was based on the concept of using clean and legible type with well-formed pictorgrams (part iconic, part alphabetic and part symbolic). They found that using sentence case was more legible than the conventional uppercase lettering. They also ran usability tests to determine which font sizes worked most effectively.

They used shapes for different types of identification signs.

Cognitive research

I looked through a lot of research papers and studies to gain an understanding as to how users grasp current design patterns.

Memory load

A user can generally compute four chunks of information at one time.

Distance

“At age 40, only half of the light gets through to the retina as it did at age 20. For 60-year-olds, it’s just 20%. “ The distance at which we can read letters is a common measure of both legibility and reading speed. The greater the distance, the higher the overall legibility and comprehension are considered to be. The biggest factor that determines how far this distance can increase is font size.

Contrast

There should be a contrast ratio of at least 7:1 between the text and the background.

Clarity

Studies showed that “concise, scannable and objective copywriting” improved usability by up to 124%. To find the right tone and language as just as important as getting the UX and UI to work properly.

UX

We gathered a lot of user research from previous studies conducted by TfL themselves to help us analyse former issues that could coincide with our own research. We decided to talk to staff and commuters in a couple of different tube stations – I find that talking to the users you gather the important problems and sometimes the users also know what the solution might be. Using empathy to get inside the minds of the users is important as it allows me to fully understand the real pitfalls. We found it useful to sketch all the pain points to help us figure out the potential solutions.

During the user research phrase, it was important to fully understand the ecosystem that we were designing for. This included time, location, scale, colour, and environment.

Timeline

The timeline helped us understand the different stress levels during a typical day on the Underground and how we could adapt the design to suit each phrase.

Problem chart

This chart gave us a scale to what would cause negative or positive feelings if a problem arose.

Physical technology

It was important to understand the physical and technological landscape, to better cope with any limitations both in hardware and software.

User Testing

We ran a couple of rounds of user testing focusing different concepts within a range of age groups, gender and commuter-type and location.

Design system

Base number

The base number is a starting point for practical usage within the visual language. I used the TfL’s viewing distance guidelines in their Design standards documents. This helped give me a starting point of 10mm font height at 3m viewing distance. I then correlated that into a digital size of 42pt.

Modular scale

A set of numbers that are derived from the base number using the ratios below as a scale. Those numbers then share an innate relationship with the subject matter.

Font sizes

Once I had a ratio of numbers I could start to experiment with different sizes to check the legibility of TfL’s font on a TV screen. Black text on a white background and white text on a black background was used, to see how the font rendered in various situations.

Card design

Football cards, flashcards, business cards, etc. These pieces of paper with purposeful content are tangible ways to quickly communicate information. Why is card design useful? I found them good for: chunking content, making data/information easy to digest, it becomes visually pleasing and they are good for varying screen sizes.

Concepts

Imagine you’re at Victoria station and you walk into the station and see this new digital screen interface appear as you walk near the ticket barriers.

Extending concepts

We wanted to extend other key concepts such as next train times, busy stations, quote of the day, weather, etc. We felt that these would add extra value when the network was in a good service.

Prototype

We wanted to build a working prototype but there weren’t any dev resources. So I decided to use my own technical skills. I created a basic HTML framework that pulled data from the TfL API using PHP. The prototype became highly popular, as it broke down the barriers during meetings to be able to see something that is alive and working with real data. I coded it to work across mobile and desktop browsers as well as our new TfL’s standard digital screens – to see the flexibility of the design system.

I also created a separate section called Timemachine that downloads disruption data to allow us to walkthrough each day and see how the prototype reacted to different issues.

I had to setup and install, Apache, PHP and MySQL on a Windows server, to ensure that we were able to trial the prototype across the IT department’s dev environment.

Trials

After building the prototype, we focused on finding four different types of tube stations that allowed us to run the trial with many kinds of commuters – from tourists to Londoners and even staff. We chose the following stations:

Final words

We designed by going above and beyond: we built the digital screen stand to replicate how it looked inside stations, we started afresh with a new digital design standard, we presented the solutions many times to different directors to allow us to get buy in, we developed the prototype, we created the server and implemented the correct tools to allow us to demonstrate the web application. All of the effort allowed us to push what the standard for digital was considered at TfL and this further allowed us to experiment with new ideas and designs. TfL had successful trials in four stations testing the prototype with staff and commuters.