TfL

No other city is as recognised by its transport system as London. Its red buses, black cabs and Tube trains are known the world over.

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.

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 gudielines 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.

Current interface

The current interface has issues with legibility, scalability and information hierarchy as well as localisation.

Good Service

Localised lines provide commuters with line information that is relevant to their journey whether it is initial or on going.

Delays

Using graphics to highlight issues on the local lines – providing the commuters with visual hierarchy through position, typography and iconography.

Entire network delays

The interface is inverted during major disruptions, showing what is working and a brief message.

Non-local delays

Delays to non-local lines are degraded to keep the visual hierarchy localised.

Night Tube

Localised Night Tube information is shown while other Night Tube lines remain on the screen to allow for a learning phase.

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

To allow us to build an agile prototype, we decided to use our own technical skills. We created a basic HTML framework that we then pushed data into from the TfL API using PHP. The prototype became highly popular as it was responsive working on mobile and desktop browsers as well as TfL’s standard digital screens.

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

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:

  • King’s Cross
  • Leicester Sqaure
  • St James’s Park
  • West Hampstead

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.

Credits

Company

  • TfL
  • Transport

Devices

  • Television

Roles

Visual Design Lead
Front-end Developer
PHP Developer