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.
The problems with the old design were evident across all areas of the site. The old site had rapidly lost pace with modern digital standards, and didn’t integrate well with the ongoing modernisation of the transport network.
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.
The new design needed to be truly digital which meant designing for mobile and web in parallel. By doing this the design language could focus on key processes, tools and options. Research and testing showed how users really wanted to interact with the service.
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.
With more users accessing TfL pages via mobile and touch devices there was a strong emphasis on thinking ‘Mobile First’. Rather than reproducing the fixed web, design needed to think around context and device capabilities. Cross-channel consistency was key to the visual language. Strong design foundations were created through a global framework with a responsive design.
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.
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.
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
Following the Olympics, TfL’s new architecture had become more airport-like, there is a real impression of uncluttered space that you could move through. Colours are white, silver and brushed-metal. They then fade into the background to let strong, bright colours pick out the details needed; seats, stairs, signage etc.
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.
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.
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.
Simple and Intuitive
The old page templates were tight with everything squeezed in, which made them overwhelming and hard to find things. The design of the new interface needed to not be too fussy. It was kept clean, flat and bold with large target-areas. The design also reduced some design flourishes such as gradients, shadows, double borders and tiny calls to action. Instead space, strong colour and typography were used to guide the user.
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.
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.
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.
Bold, strong and clear type is used in order to make an impact, be more personable and give users a clear call to action.
The new look and feel was designed with people’s emotions in mind to try and generate an emotional response. A more personal experience that generates a natural response was created through use of language, social tools and two-way interaction.
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.
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.
With the new visual language we wanted to create a new set of design standards optimised for touch devices and to help clear up cross-media inconsistencies. The design system was structured to have a clear identity and a well thought out and intuitive branding hierarchy.
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.
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.
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.
- Multiple screens — Creating a responsive website requires a responsive design approach. With so many screen sizes to consider our designs had to move beyond creating static visuals. It was important to develop and maintain a close working relationship with developers to test and prototype live designs. It was equally important to learn and understand the limitations of the technology used.
- 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.