Tag: responsive design


How we make our website fly – Part 2

Part 2 – Auto-scaling and elastic load balancing in the cloud

In Part 1 I looked at the front-end (presentation layer) high availability cache (Varnish) that helps us deliver web pages quickly from a cache (memory). However, there are situations when there are a large number of queries also reaching our back-end, as Varnish hasn’t or can’t cache those queries – during adverse weather or industrial action, when our website traffic can spike at up to 20x usual volumes for example.

Events such as adverse weather or strikes can lead to huge spikes in web traffic

Events such as adverse weather or industrial action can lead to huge spikes in web traffic

Read More


How we make our website fly – Part 1

Part 1 – High availability cache

This is the first of a two-part blog, giving an introduction to the high availability cache at the front-end of the website.

The new responsive TfL Website is not just a mobile make-over, it has been re-developed from the ground up. The site is a fundamentally brand-new, structurally re-designed, responsive website for the modern needs of the travelling public in London.

High availability cache

Varnish is a web accelerator which allows our website to sustain very high traffic and load many times faster by caching static & dynamic content.

Read More


TfL Widgets – Latest Updates

This blog looks at TfL’s widgets and Open Data for developers, including our recent improvements. Get your website looking great with our redesigned Journey Planner widget!

What is a widget ?
A “widget” is a stand-alone application that can be embedded into third party sites by any user on a page where they have rights of authorship. Widgets can be considered as a downloadable small application which look and act like traditional apps, but are implemented using web technologies and our API.

What’s new ?
In October 2014, we re-designed our journey planner widget and banner to give them the same look and feel as our new website. The new widget also has email authentication built in so that we can get in touch with you quicker in future if we intend to change the widgets.

This is our brand new design for the TfL JP widget, which is now available for download.

This is our brand new design for the TfL JP widget, which is now available for download.

Read More


Blue/Green deployment strategy in the new TfL website

Hello Folks,

Thanks for popping by, I’m Tariq Khurshid and lead on the website (www.tfl.gov.uk), Service Desk, Change & Release Management. In this blog I’d like to share with you the success we have enjoyed using the “blue/green” approach for software release and deployment in the new website.

This is a summary of our experience doing blue/green software deployments and releases to tfl.gov.uk using Amazon Web Services (AWS) cloud infrastructure.

Blue/green deployment of software to the website is a process that we use to safely release new versions of (www.tfl.gov.uk) without any down time or outages for customers.

The key to success is to maintain two identical production environments to switch between. As (www.tfl.gov.uk) is now hosted on virtual servers in the cloud, this is relatively easy and cost effective.

Blue/green deployment allows us to develop software to a high standard, test independently of the live site and easily package and then deploy to live. This means we have the ability to rapidly, reliably and repeatedly push out enhancements and bug fixes to (www.tfl.gov.uk) at low risk, with minimal overheads, and best of all,….. no outages for customers.

blue-green schematic final

Read More


Statistics: How you are accessing our new site

Here are some simple statistics on the technology you have been using to access our new website in the first 16 days since its launch.

The big news is that mobile devices have officially overtaken desktop PCs and currently make up 52 per cent of all visits to our new site.

With 52% of visits, mobile devices have overtaken desktop in visits to our new site.

Read More


International DfE Awards: Another win for new site

Following on from last year’s double win at the User Experience UK Awards, our new website has enjoyed more success after picking up the award for best Mobile Solution or Application at the inaugural International Design for Experience Awards.

TfL, New Website, Award

The new TfL website has won best Mobile Solution or Application at the DfE Awards.

UX Magazine, sponsors of the awards, had this to say about our new mobile-friendly site scooping the prize:

Working in collaboration with TfL’s online marketing team and build partner Detica, we are experience set out to create a responsive site that would work on any device and provide a consistent experience—bringing together big data, live updates, and location-based services for the world’s most complex public transport network.

A clearly outlined design process that would be very easy to use as aresource for teaching, a solid roll-out strategy, a good system for collecting and synthesizing customer feedback, and analytics to support their story all made an impression on the judges.

See all the DfE award winners here.


Visual design strategy: part 3



Thinking forward – digital experience principles

As we began to move towards the beta and then a main site launch we had to start to think about a ‘toolkit.’ The principle behind this idea is allowing anyone to develop services to run on the TfL site. And we want to give people the tools to do this for themselves.

So, on the one hand this means some quite detailed content, guides and examples in the different specialist areas: user experience, design, and technical information.

Read More


Visual design strategy: part 2



Answering the brief we set ourselves

As mentioned in my last post, we were working both in a collaborative and ‘agile’ project. This basically means the designers, user experience experts, developers and the client all work together in parallel: continually iterating designs, wireframes and actual prototypes together, regularly testing with users and trying to gradually get the designs right by a process of trial and error. Weekly ‘show and tells’ with the whole team and wider presentations to key stakeholders might have seemed time consuming, but it kept the whole design process on track.
Read More


Taking an agile approach



How we deliver

In this post I’m going to outline the way in which we, as a team, have delivered this project to date as well as highlight some of the processes and tools we’ve utilised and hopefully give a bit more perspective on the scale of some of the tasks this project is trying to overcome.

Read More


Visual design strategy: part 1



Building solid foundations

First came the brief: Design a new look and feel for tfl.gov.uk: a site used by 75% of Londoners that already has a satisfaction score of 90% and working in an ‘agile’ project with the TfL team and two other agencies.

No problem, we’ll just go and fetch our thinking caps and get started.

However, what we hadn’t quite appreciated was the fact that when you’re in the pub in London and you mention you are working on the new TfL site – absolutely EVERYBODY has an opinion.

So no pressure then…

Where on earth to begin?

Read More