Differing screen composed together from the TfL interface we designed
INTERFACE DESIGN

Improving the daily lives of millions of people with TfL

We designed TfL’s self-serve ticketing portal. These machines are integral to keeping London moving and receive hundreds of millions of interactions per annum. Failing to deliver was not an option.

The challenge
  • Redesign the digital touch screen experience across a varying range of machines.
  • Better understand the needs and requirements of non-native users, which the legacy interface failed to do.
  • To design in such a way that encouraged more passengers to self-serve, allowing TfL to put box office staff into ticket halls to better meet the needs of a greater number of passengers.
The approach
  • Understanding what was achievable with the current ergonomics of the machines.
  • Upfront sketching which aligned TfL’s and Foolproof’s expectations and vision for the desired customer experience.
  • Immersion into the customer’s world and investment in understanding and mapping the needs of representative user groups.
Client

London’s transportation provider

Project type

Interface design

impact
0
Million +

uses per annum since launch

0
Million

Increase in sales in the year after launch from Passenger Operated Machines

The problem space

TfL asked us to help improve the user experience of their self-service ticket machines. While the hardware itself would stay the same, we were tasked with improving the user interface, with the aim of helping more people serve themselves at ticket machines in every station in the capital’s transport catchment.

TfL’s network is used by millions of Londoners every day, from schoolchildren to commuters to pensioners. Almost everyone from outside of London, nationally, or internationally interacts with these machines during their visit. To complicate things, buying tickets can often happen under stress: the noise and bustle of the station, unfamiliarity with the ticketing and payment options, and the impatience of the person behind you in the line.

TfL Oyster payment platform in use

Evidence driven creativity which delivers

Designing for an audience of this breadth and diversity meant consistency was key. It was essential to devise a set of patterns which users could quickly understand. The vast range of user flows, options, and interactions available meant that nothing less than meticulous attention to detail would deliver a consistent experience which lowered the barriers to use by removing unnecessary friction.

We conducted research in the field at the TfL testing centre with people from across London and beyond who represented the full spectrum of use cases. To capture the diversity of TfL’s customers we recruited a wide range of demographics, taking into consideration varying levels of literacy as well as people with physical and cognitive impairments.

Statistics
0

depth interviews

0
Hours

Spent with customers and representative stakeholders

TfL information architecture

Keeping London moving

The ticketing interface we created shows TfL’s commitment to improving customer experience. Millions more people now have a successful ticketing experience with the interface saving them immeasurable amounts of time and stress. The experience we created helps TfL keep London moving, with wider benefits for the city and the national economy.

Reacting to design constraints and iterating on design

The technical and ergonomic limitations of the machines had an impact on our design thinking. We realised we needed to provide stronger directional cues to help make for a more intuitive user experience when using the machines. We validated our low-fidelity prototypes through user research, using the insights gained to iterate on early screen designs.

 

TfL design sketches

We conducted further research in the field with an interactive prototype. The prototype was presented on a touchscreen display and housed within a mocked-up ticket machine. We then handed off these design specifications to TfL’s team.

Providing ongoing support to TfL to integrate the detailed visual and interaction design specifications we defined made for the best possible outcome, we achieved this by closely working alongside their development team.

TfL ticketing interface prototype

Keeping London moving

The ticketing interface we created shows TfL’s commitment to improving customer experience. Millions more people now have a successful ticketing experience with the interface saving them immeasurable amounts of time and stress. The experience we created helps TfL keep London moving, with wider benefits for the city and the national economy.  

 

  • Activities

    Qualitative research, sketching, prototyping, information architecture, product design, visual design, interaction design.

  • Delivery

    Two-weekly research and iterative design sprints.

Related case studies

View All
Cydar
Wireframes and the user interface of Cydar Medical
INTERFACE DESIGN

Cydar

We went into the operating theatre with Cydar Medical in the extraordinary context of live surgery. Our work covered sketches, wireframes and the interface design of the platform for use by surgical practitioners.

AXA XL
An illustration of an autonomous vehicle on the street
EXPERIENCE STRATEGY

AXA XL

AXA XL launched the world’s first insurance cover for autonomous vehicles. Design thinking and collaboration right across their business moved the product from whiteboard to launch in three months.

Sony PlayStation
PlayStation video streaming service entry point
DESIGN

Sony PlayStation

We helped get more customers to use Sony PlayStation for content-on-demand services. Diary study research informed the prototype of a new user experience.