Case study: Transport for London modernises website with HTML5

Transport for London has re-engineered its website to move with the times. TfL's head of online, Phil Young, explains the design principles

Transport for London (TfL) has re-engineered its website to move with the times.

When the TfL site was last redeveloped in 2007, the iPhone had only just been announced and Android and tablets did not exist. As such, the site was not optimised for mobile use.

The mobile app developed by TfL for the London 2012 Olympics was regarded as a big success for the organisation, allowing people travelling to the games to identify travel hotspots and find alternative routes. Following this success, TfL is now addressing its website.

TfL's head of online, Phil Young, says its rationale was to modernise the site to work with the types of devices now being used by the travelling public and offer "multi-modal" transport options. 

So, should disruption occur, such as that caused by the recent incident of cement leaking into the Victoria line control room, it should be possible to find alternative travel options quickly and easily.

Technology crystal ball

It is impossible to predict how technology will change over the coming years, so TfL has made a few design decisions that it hopes will stand the test of time. 

These include building the new site using HTML5 and using responsive design techniques to adapt the site dynamically in response to the devices being used. 

The new site also uses Google Maps and StreetView to help people find out where they are in relation to a stop, plus a "nearby" function which identifies alternative stations and bus stops.

"We want to make it as easy as possible for customers to get the best out of London, travel to their jobs and get home," says Young.

The TfL website is a core site for London, and is used by 75% of Londoners. It gets eight million unique visitors a month. Last year, the site served 72 million unique users and counted 1.2 billion page views. 

Advanced Public Transport, the membership organisation for sustainable public transport, rates TfL’s website as "the best public transport site in the world". Given the traffic figures, redevelopment of the site is not a task that is being taken lightly.

"The way people want to use sites is changing. Mobility has changed everything," says Young. Not only are people using mobile devices to access the TfL website, he says they want to use geo-location and run the site seamlessly across mobile, tablet and desktop devices.

To build and test the site, Young and the TfL team created a cardboard smartphone to visualise how customers would interact with the mobile site. The cardboard smartphone had a cut-out for the display. The user interface comprised a long strip of paper with user interface elements annotated in pencil. "We got the customer to tell us what they liked, and we could rub things out," says Young.

Single API presents integrated travel data

Along with mobile access, Young says the design goals also included bringing multiple TfL sites under one umbrella site and integrating data services so customers can choose the most suitable public transport option to reach their destination. This has been one of the biggest areas of work in the project. 

"We are integrating all [our public transport] data beneath the site using one API [application programming interface], normalising the data to provide a great user experience," says Young.

People want to use geo-location and run the TfL site seamlessly across mobile, tablet and desktop devices

Phil Young, TfL

TfL runs multiple back-end operational systems, such as the countdown system for the buses, live status of cycle hire docking stations and tube status, all of which create data in slightly different formats, thereby making it difficult to develop front-end services. 

"It is quite hard because you have to code differently for each of the different data instances, which is not only a problem for us but also for third-party developers," he says.

TfL’s new site uses a single data model. As the data is normalised, with tube, bus, river and cycle data presented in the same format through a single API, Young says TfL is able to develop the site very quickly and present integrated information. The integration allows users to search across all modes of public transport – river, bus, tube or cycle. 

"We did a lot of user visual work, which is really exciting, but a lot of the work to enable the integrated experience is under the hood," says Young. 

With around 5,000 developers using TfL's open data, this single API and normalised data provides a simpler way for them to connect to TfL. "The developer community can be more efficient and develop services across all the modes of transport and we get more innovation through the [third-party] apps market," he says.

The user experience element

Unlike the old site, which used Flash, the new TfL website is based on HTML5, to provide interactivity across smartphones, tablets, laptops and desktops.

"Our strategy was to take a user-centric approach. We had 50 previous studies about what customers wanted from the website, we also asked our internal stakeholders and the third-party stakeholders like travel interest groups, and mashed all of this together into what we felt were the best requirements," says Young.

The requirements across these groups turned out to be fairly consistent. "People wanted to use the service across any device; they wanted localisation and personalisation; great mapping; and they wanted a considerable improvement to Journey Planner," he says. 

Customers would never have asked for a "nearby" function, but this feature meets some of the needs customers have articulated, he adds.

Future work

The site uses responsive design to optimise web pages for the device being used. On a smartphone, for example, the new TfL website renders in one column, while a tablet user will see two columns.

Going forward, Young says a future iteration of the site will include a personalisation feature, using a sign-on token. Once logged in, users will be able to recall favourite destinations, top up their Oyster cards and pay congestion charges across multiple devices.

TfL is also seeing interest from car manufacturers and Satnav suppliers interested in accessing the TfL data to provide driver aids. This data could be used to allow the driver to plan a journey involving parking the car and taking public transport. 

“This is not an approach vehicle manufacturers have looked at before,” says Young. “But they are beginning to look at it from a smart city point of view, and they are looking to do this in London and other major cities.”

Read more on Web development