Designing a New Look and Feel for Transport for London

Will Sicat
Sep 16, 2017 · 9 min read

Originally posted in 2015 on www.willsicat.com

Image for post
Image for post

The Brief was simple — design a new look and feel for tfl.gov.uk. Sounds pretty straightforward but no small task considering the site being used by 75% of Londoners and already having a satisfaction score of 90%. At the time the site received 8 million unique visitors a month, Journey Planner alone getting over 3 million of those visitors.

I’d be working on an ‘agile’ project with the TfL team and two other agencies. Design would be part of a full digital upgrade that would also see an overhaul to hosting, architecture, API and data. Going forward I gradually learned of the projects sheer scope, scale and its importance to the city.

In this case study I’ll be going through how the new visual design language was defined and the thinking behind design decisions and direction.

Design Challenges

Image for post
Image for post

TfL has been changing beyond recognition, with many new projects underway and the ways people travel over the next few years becoming very different. Above-ground projects like Overground, Cable Car, Crossrail and Routemaster are all becoming more new, modern, and vibrant.

With these considerations in mind the main design challenges were:

  • Not customer-centric — Without a focus on users the site provided an impersonal experience. A changing consumer landscape meant the site could no longer adapt to users needs.
  • Mobile to desktop disconnect — Developing a less advanced mobile site in silo had led to a disjointed experience. What was designed for computers was ported to mobile without optimising content for the context of use.
  • Ageing look and feel — The site was designed in 2007; in digital terms that’s a very long time. It had quickly lost touch with today’s user and modern digital standards.
  • Seemed business and corporate focused — The site looked uninspiring and lacked creativity. There was no real sense of the iconic TfL brand.
  • Lack of consistency — With so much content and so many services the site had become fragmented and confusing to use. It had grown to approximately 70 inconsistent microsites.
  • Inflexible structure — The brand has a lot of guidelines but none digital and so things get re-purposed. Restrictive templates and rules had caused people to simply break or bend the templates which created confusion and inconsistency.
Image for post
Image for post

Design Direction

By recognising the changing consumer landscape, the aim was to create a totally consistent visual language for all of TfL digital. The design solution needed to be:

  • Truly mobile — The thinking needs to be ‘mobile first’. How is content best served and how does a user interact with it given any possible device and situation?
  • Modern and exciting — A fresh design that inspires the user and acknowledges both TfL’s heritage and 21st Century London.
  • Simple and intuitive — The new site should be clean, clear and usable.
  • Accessible — The design must be compliant, lean and fast loading.
  • Personal — A welcoming, more customer-centric and human look, right through to the use of language and integration of any social tools.
  • Consistent — A well thought out and intuitive visual language across all devices, with a clear brand identity.
Image for post
Image for post

Truly Mobile

Image for post
Image for post

To avoid losing primary features when going down from desktop to mobile, designs were adapted through a responsive strategy that automatically restructured both content and functionality. A flexible framework was designed with customisable dynamic content modules that lets users access content and information with one cohesive framework.

Image for post
Image for post

The homepage would be the starting point in developing new site templates, guidelines and patterns across web and mobile. By looking at the most commonly used devices and viewports, responsive breakpoints were defined. Designs would need to provide direction for three major device groups — desktop, tablet and mobile.

Image for post
Image for post

Through the calculated use of grids, a system of templates and components were crafted that could be repurposed around the site, translating to mobile or tablet devices with a heightened interest of design integrity degradation.

Modern and Exciting

Inspired by this, elements from the transport network were used to reinforce the sites new look and feel. The interactive visual language was designed to emulate the new TfL network and London as a whole. It would be modern, fresh and dynamic.

Bright and spacious — The site gives a real impression of space and movement through. This was achieved by simply using more space and wider page areas.

Image for post
Image for post

Bold, modern feel — There is less use of design devices like icons, arrows, shadows, double borders etc. Simple panel design is used, to be clearer like the newer signage. The new look is flatter, cleaner and bolder.

Image for post
Image for post

Details in colour — With more space the page stands back allowing strong, bright colours to pick out the details users need. Strong typography is also used for a clear, clean and consistent visual language.

Image for post
Image for post

Simple and Intuitive

Image for post
Image for post

With new interactions the engagement layer was explored using methods from both desktop and touchscreen. It was important to understand user’s mindset and create focused short goals and micro-tasking. Interactions were given some movement to help and guide users. The design also wanted to provide some excitement and encourage exploration without making it difficult to learn and use.

Image for post
Image for post

Mobile considerations mean interaction patterns are continually developing and evolving. A number of factors needed to be juggled in understanding how users interact with their mobile devices right down to them often only using one hand. These factors came together in directing the visual design language.

Accessible

Image for post
Image for post

TfL’s colour palette was brought online and a new colour system explored. By moving away from colours being just modal identifiers they were used to excite and inspire. It was very important to be careful with the use of colour and ensure colour combinations were triple A rated. Although the design tried to be creative, the aim was to always develop a consistent palette for navigation and the visual language.

Image for post
Image for post

Bold, strong and clear type is used in order to make an impact, be more personable and give users a clear call to action.

Personal

Image for post
Image for post

Newly commissioned photography was used to enhance content and show a love for modern London travel. The aim was to make an impact, be human and connect with the audience more. In places images are big and bold often displayed full width sometimes even full screen.

Image for post
Image for post

TfL has a huge number of properties so it was important to look at all guidelines and not just the web to take inspiration. To help tie the digital experience in, a new, familiar and coherent set of iconography was created and optimised for digital use.

Consistent

Simple documentation, design principles and style guides were created to make it easier to brief new projects. By thoroughly exploring and testing the designs we could provide more re-use, less work and faster to market designs.

Image for post
Image for post

By designing key pages we could improve templates to make them flexible, modular and reactive. We then identified templates, layouts and patterns so that clients could focus on building exciting individual pages.

Image for post
Image for post

We provided guidance on patterns and UI elements to help fix basic inconsistencies. A new set of rules and designs for the masthead, logo(s) and space for other elements like breadcrumbs etc.

Image for post
Image for post
Image for post
Image for post

Lessons Learned

  • Design for everyone — As a born and bred Londoner, it’s hard to not have an affinity for the TfL brand. This was an exciting and new opportunity where we could taken the brand anywhere. However we needed to be calculated in our approach, balancing user needs and aesthitics. Our designs were limited by the lower end devices so we really needed to get creative and make the most of their capabilities.
  • Documentation — This project was the start of the TfL online upgrade. With so more sections and microsites to come, the design needed to be robust and documentation thorough. With tight timelines and limited capacity the next step would have been to build an online pattern library.
  • Design systems — By designing for so many touchpoints it’s no longer effective to use a structured approach. Styleguides are great but at times rigid. To be successful we needed to go beyond by establishing principles, creating extensive toolkits and being agile in our approach. Also important was developing a strong relationship between design and development in order to bring our vision to life.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store