CLIENT
TRANSPORT FOR LONDON (TfL)
DATE
SPRING 2024
Making navigating stations easier at TfL with a new Spatial System
A collaboration between a small team of designers and TfL to improve navigation around stations, with a whole new spatial sound experience to guide customers, including those with vision impairments.
GRAPHIC DESIGN
ADVERTISING
VIEW PROJECT
Working with Transport for London on imagining the future of Stations in London was a really rewarding and engaging experience.

I led a team of four to work on our vision for the future of navigation and wayfinding in stations, with the Spatial System. After sharing our personal experiences with getting lost, having difficulty finding Top Up points, and trying to find the right platform, we all had first-hand pain points to draw from when prototyping a new experience.

I was also accutely aware that a largely untapped area of development in transport navigation was through the use of sound - and building and navigating environments purely through spatial sound and accompanying visuals, was something TfL had never done built before.
Ambient Interfaces
Our Spatial System started with detailed storyboarding of customer contexts, and how we could focus each part of the interface to aid customer journey, without providing room for complication or increased cognitive load, with awareness of its real-life application in busy spaces. I designed the visual system to be direct, but to remain connected to the customer's live environment at every stage.
To accompany the use of sound, I built a new Dot Architecture, and spatial-focused UI - where animations flowed and animated through dots, and real-life components like Oyster Cards or Payment Terminals remained connected to the digital space. This gave a sense of connectivity across interface contexts, with playful motions giving validation and connection between the customer and the response to their actions.

A relentless focus on humanity drove the visual direction of the product, and I considered how each context could be stripped back essentially, to hone in on the customer's intent, in what can be busy external environments.

We prototyped versions of these interfaces in light modes too, but the dark experience felt most appropriate to distinguish against the light real-life panels and new bright white Stations on the Elizabeth Line, so as to not add further mental complexity to navigation.
Seamless context transition
Designing with consistency between contexts, but with enough distinguishing features that experiences are clearly distinct was a real challenge when considering how to refine the interface.
To aid context switching, we worked on a Home section for the interface, where each action resided, and where customers could quickly take action, get help or share their location.

We brought interface elements (like the live view section at the top of this interface) across different contexts - for example, for both gate entry and top up, as they both used proximity-based functionality, but we also built bespoke elements to give character to areas like platform-navigation, and built new "Beacon Zones" and "Platform level" systems to aid with moving between platform levels in unfamiliar Stations.

We also considered how we could respect and celebrate the distinct character of each Station, and to highlight the beautiful individualism of each place as customers move from entry point to destination, and we designed different digital Oyster Card variants, and even stickers for this.
Live Demo
The final stage of our development resulted in putting together a real live demo, without having access to testing in a real station environment.
We custom built a contactless experience to demonstrate our new technology. Building laser-cut payment terminals and using NFC tags, coupled with cloud video hosting and Figma prototypes, we prototyped a seamless experience where customers could demo paying, topping up or navigating between platforms.

Using spatial sounds made in Logic, and with dynamic animations assembled in Figma, and then retimed in After Effects, we delivered a connected spatial experience where customers could simply tap their iPhone on the payment terminal, and try out the sequence.

We even gave out thirty NFC tags preprogrammed with permanent access to the demos, so individuals could take the experience home with them. The reception was fantastic, with delight from customers and strong support from the TfL Digital Design team.
All Rights Reserved.
Photography by Louis Harvey. Used with permission. A special thanks to the project contributors in my team: Louis Harvey and Ejae Kim.
Designed by Jackson Moran. Copyright 2024-25. All rights reserved.

“TfL”, “Transport for London”, the TfL “Roundel” mark, TfL station and iconography, “Oyster Card”, “Oyster Card” marks, logo and design are registered trademarks and properties of Transport for London. All Rights Reserved.

“iPhone”, “Apple Watch”, “Apple”, “Apple Pay”, “iOS”, the Apple logo and marks, and other Apple trademarks are registered trademarks and properties of Apple Inc. All Rights Reserved.