Engineering works: Transport for London’s responsive website redesign

75% of Londoners use tfl.gov.uk. The site gets around 8m unique users a month and each year receives 250m visits and growing (see the chart below).

So, a recently released beta version of their newly designed site is sure to generate a fair amount of user data.

I took a look around the site, to see what kind of user experience TfL (with BAE Detica and we are experience) have delivered.

The first thing to say is that a lot of the updates to the 'old' TfL site are plum in line with current best practice thinking in web design. The site works smoothly across devices, uses local data and is generally a joy to navigate.

On the TfL blog, Head of Online Phil Young details the new features:

• A new design, working across mobile, tablet and desktop.
• Redesigned Journey Planner, simpler and easier to use.
• Google Maps and Streetview integrated within Journey Planner.
• Service status with faster updates.
• New content and navigation.

Here are a few screen shots from the website on my mobile. You can see the sizeable buttons, and a journey planner that drops open.

As the site is responsive, you can resize it in your browser to see how nicely it rescales.

  

The Oyster top-up page is easy to use, and there are clear updates, advising of service delays and closures. The journey planner allows one to select 'current location', and will save details of past journeys and locations.

A 'Nearby' feature will be added later in the beta trial and will show transport links in the local radius, as well as live departure details.

One of the nice design features of the site is the customised egg timer when planning journeys by bicycle, foot or public transport. Here you can see the cyclist egg timer, as it crosses London during page load.

The home page is very clearly laid out, with key services rightfully taking prominence. The background images are colourful and there are three or four variants, based on iconic London transport.

Information for smaller segments of users e.g. coach drivers, schools, commercial partners is all as clearly and beautifully laid out as the main pages, but is kept tidily in the footer where it is simultaneously easy to find and unobtrusive.

The sub-pages are worthy of note e.g. the fares and payments page, which clearly gives call to actions based on some of TfL's main revenue streams, such as ticketing and fines.

The social media page gets top marks for clarity, too, and will help to ensure users get timely information about transport, and strain on the network is reduced day-to-day.

All in all this redesign is another gov.uk shining light of UX, and one which Londoners will be proud of. Go take a look for yourself, with further detail on the new features here.