Design at Transport for London 



Transport for London (TfL) has been seen as a leader in the world of public transport for decades. Although the digital presence of the brand needed working to bring it to the standards of todays digital world.

As part of TfL’s in-house design team, I have been a pivotal part in the creation of the design system for which all future products in our digital environment will evolve around.





Our design language serves as a living, ever-changing system that evolve around key principles and foundations


All our products are designed to help people make decisions, have choice, resolve issues and explore new ways of navigating and exploring London. Not only do our products need to be inclusive so that everyone is able to use them, the way we implement our design language throughout these products need to be designed for the moment, future proof and ultimately anchored within our brand, and the long history of design and cultural heritage for which TfL holds both within London and globally.










Each element, component and rule introduced in our language has been carefully crafted to feel actionable, thoughtful, timely and universally accessibleJourney planner serves as the spine to the new web experience. As the most engaged with tool, we wanted to transform how users are able to plan their travels through London in an ever more personalised way

We wanted our language to evolve around a set of clear rules that allow for us to develop digital experiences that are easy to use. Interactions shouldn’t be over complicated or hard to understand, actionable elements should be concise and direct, and our general look and feel should be clean, open and timeless, without the need to follow passing trends or styles. Everything from the use of white space and iconography, down to the way components load onto a users screen are considered and tested with real users of differing levels of understanding and capabilities.








Redefining the way we collaborate with developers to create a infrastructure that holds the same clarity on the back-end as it does on the front


We worked extensively alongside our developers to create a growing library of components and elements that would allow us to easily and efficiently update and tweak the design system throughout all future products. This has been in contrast to the old digital infrastructure which often met complexities when changes were to be made.








Previous