Transport for London's Head of Online details challenging TfL website redesign

Phil Young, Head of Online at TfL, takes us through the process of redesigning the company's widely used website.

TfL's website has been given a big makeover, complete with a new, responsive design. With 250 million visitors per year, each looking for information tailored specifically to their journey, it was no easy task. We spoke with TfL's Head of Online, Phil Young, to find out more about the redesign process and its challenges.

Rather than commissioning a design studio to redesign the website, TfL used a team made up of several in-house designers and some framework suppliers. "We wanted the best blend of our own people and those who've worked on other sites to get the best possible outcome with the new site for customers," explains Phil. "In the end we'd pretty much forgotten what badges people were wearing and delivered it as one team."

That team worked together to bring a new look and feel to the website, introducing a different and hopefully better experience for users.

"The approach started with a number of digital experience principles, which come from what our customers want from us and from our business objectives," Phil says. "Choosing responsive design and approaching from a 'mobile-first' perspective were two defining decisions." 

"However, we can't forget that we have a rich design heritage which follows through in fonts and colours," Phil continues. "So the final design is a combination of form following function for simplicity, ease of use and touch optimisation, but overlaid with a London feel."

Use the slideshow controls above and right to find out more about how TfL's new website was designed and take a look back at TfL's previous website designs from as far back as 2002.

Overall, the flat design of the website seems to follow the minimalist trend that was sparked by Apple's iOS 7, but Phil notes that this was a decision made a long time ago when the design process for the new TfL website was in its early stages. "We're also trying to be a little more playful than we have in the past, reflecting TfL as a more personal and human organisation – you can see this in the animations, for example," he adds.

Creating a responsive site was important to TfL, and is common among website redesigns now. It eliminates the need for a separate mobile site and means anyone using any screen size (and let's face it, there are loads) will land on the same website that's been automatically adapted to suit that device.

"The way we've implemented [responsive design] allows us to create great experiences on all devices and gets over the problems of inconsistencies between sites," Phil says. "In the end, the decision to go responsive (or not) is an individual one for each organisation and site, depending on their business and customer needs."

Before fully launching the new site, TfL decided to introduce a beta version of the new site in June 2013, inviting customers to try it out and provide feedback on their experience to help Phil and his team improve it.

"The beta gave us a chance to try things and see how well they worked, without having to rely on them as a primary tool for customers," Phil says. "We've tried to be as open as possible about what we're doing and engage customers in conversation. This has resulted in a better site at the end of it all."

Advertisement. Article continues below

"Much of the feedback was really positive, so we knew we were on the right track – particularly with the Journey Planner,"Phil continues. "There were some examples where things did not work that well, such as the Journey Planner understanding what locations customers were looking for, or the way the 'use my location' feature worked. We were able to improve those things through the life of the beta."

Right: The new Journey Planner was a tough challenge, as it is used by four million people per month who are trying to figure out their personal travel plans. "We're really pleased with how it turned out," Phil told us, adding that there are plans to make it better still.

Among the biggest challenges for the rest of the TfL redesign were elements of the site that are behind the scenes. "Along the way we've built a completely new cloud infrastructure and consolidated much of TfL's transport data into a single, normalised API, which we use to power all the integrated services on the site," explains Phil.

"This was an immense challenge to integrate data which is quite different in many ways and also to deal with a high volume of data in a realtime context. We dealt with these through very careful consideration of the technical challenges we were going to face, from the very start of the project, and architected to overcome them," he says.

Right: TfL's website in 2002 (top) and in 2004 (bottom). 

Based on his experience redesigning TfL's website, we asked Phil to share his advice to those about to embark on their own website redesign. "Have a clear vision and know what the site is setting out to achieve," he said. "Be sure you know what your customers or users really need and find a way to check what you are doing with them."

"Iterating can be really handy, enabling you to deliver something basic and then work on making it better – an Agile approach can help with this. If the site is really transformative you'll need plenty of patience and persistence to see it through, it might prove harder than you think," he concludes.

Right: TfL's website in 2007 (top) and 2012 (bottom). Looking back over TfL's previous website iterations demonstrates just how much has changed with the new design.

Advertisement. Article continues below