Transport for London - digital transformation programme: 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.

However, we also wanted the very first part of this toolkit to be a quick explanation of our approach – our values – if you like – that anyone, not only specialists, can understand and explains what we are trying to achieve. These are our Digital Experience Principles and they underpin everything we do. They start with a general statement of intent:

‘We help people get the best out of travelling in London’

Then, to back this up, we work to eight principles, written as calls to action, rather than ‘fluffy’ mission statements. They inform all the decisions we, or others working on TfL online take: whether preparing content, designing an interface or developing an entire service, people should start by reading these.

1. Anticipate users’ needs

Our transport services are for everyone – our digital services should be no different. Start with users – research, use personas, test often. Make accessibility a priority and don’t create anything they don’t really want. Instead, think about localised, personal solutions and only include features, functionality and content that’s genuinely helpful.

2. Make things easy

Customers expect our transport services to be quick, efficient and easy to use. Their online journeys should be no different. Work hard to make things effortless and obvious, and keep the visual language and patterns consistent – this helps people become familiarised with our services and takes the guesswork out of using them.

3. Keep it clear & simple

People expect our staff to be friendly and approachable. Our digital services should reflect this. Use plain English, get to the point and remember that, even online, we’re talking to people – real people who are more likely to view us in a positive way if we are human, engaging and easy to understand.

4. Design for on-the-move

Our customers are always on the go – and we need to be right there with them. Think about when and where they’re using our services. Are they checking their phone in a rush, at their desk planning a night out or on the sofa visiting Facebook? Consider context to keep things relevant, and ensure everything is as fast and lightweight as possible.

5. Build trust

We want everyone to get the most out of London, so giving them accurate, consistent information is key. Built on central APIs (application programming interfaces), our digital services should be integrated and up-to-date, reflecting what people are hearing from staff, seeing on screens and reading on Twitter. This builds trust and makes us London’s best source of travel information.

6. Continually improve

Everything we do is essentially a work in progress, rather than an end in itself. Start small, test early and keep refining. Be receptive to feedback and learn from what others are saying or doing. Iteration encourages innovation, reduces the risk of failure and helps us build for future needs.

7. Think beyond functional

We’re passionate about London and want our enthusiasm to rub off on our users. Our staff do this when they share local knowledge, smile hello or surprise someone with a joke. Digital doesn’t have to mean dry or merely functional. Look for opportunities to make our services engaging, fun and friendly to use.

8. Do more with less

Ultimately, we’re building services with our customers’ money and they, quite rightly, expect the best value. Be lean and efficient – focus on users’ core concerns, use modular patterns and develop with APIs. This doesn’t mean you shouldn’t think creatively, it just means you should use your creativity to help deliver value for money.

So, as number six states: we are in the middle of a journey – trying to gradually improve TfL’s online offering, but nothing is finished. Over the next months and even years we are continuing to refine the experience of using the site on all devices, and we hope you will continue to see a real improvement, grounded firmly in these principles.

Transport for London - digital transformation programme: 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.
It can be painful, and it’s a long, slow process, especially with a site and organisation as complex as TfL’s. However, we started to see real positive responses to the design directions we were creating. To get to the point where we now have the site in beta, we’ve been through several design iterations and we hope the new page designs reflect all the hard work.

We have tried to make TfL online simpler to use and intuitive, while also making real use of the larger screen real estate. A key design change is the use of much larger image sizes and we’ve even begun to shoot our own, to give the site a more human feel. The new imagery will ensure consistency and will anchor TfL online’s brand direction; better reflecting their role in helping to promote London and contribute to making life in the Capital that much better.

All of this is wrapped in a site that uses new, flexible ‘responsive’ templates that adapt, giving consistency across all devices. Responsive, content-managed websites as big as TfL’s are fairly new, so here’s the science part:

We start with a simple three-column layout at the largest size and we drop a column at certain key screen sizes. In between these ‘breakpoints’ the content in the columns themselves is also fluid. This means that in theory we can display the content perfectly on literally any device’s screen size using the same templates and some simple rules on how modules re-flow.

We’ve also been much freer with TfL’s amazing colours and font, developing a new dark grey online palette that smartens up the site design, without aligning itself to any of the actual modes of transport. The ‘scaffolding’ of the site recedes more than previously, and is only there when you need it. Instead the tools people actually use and common calls to action come to the foreground to help guide users.

So the site is responsive and so works in the context of the largest TV screens right down to mobiles. Things like larger touch areas and buttons, screen-reader friendly code and extremely small file-size downloads mean it should work seamlessly for anyone in any context and on any device.

In the final part of this introduction to the visual design of the new TfL site, I’ll be talking about how we finally thought about how we built  a ‘toolkit’ on which any further changes in the site could be based, as well as talking about our eight ‘Digital Experience Principles.’

Transport for London - digital transformation programme: Visual design strategy: part 1

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?

At Detica we have our passions – these include great, user-centered design and giving a digital brand a human face. We try to design lovely looking products, but ones that are usable, first and foremost. And to help us we have our tried and tested user-centered methodologies.

Yet this project was a new challenge that took us well outside our comfort zone. We found ourselves on a real journey (clever, eh?) with the brand. We came from a position which I think a lot of people in London share: of not really knowing exactly what TfL does – of relating it to safety posters and that page in the Metro. From this point we gradually learned of its sheer scope and scale, its importance to this city and how much it really affects everybody’s experience of the ‘Best City In The World’ (copyright Boris).

We needed a foundation, something everyone could buy into. A ‘manifesto,’ if you will, that we could relate our design decisions back to. So we started by setting out our design direction in our words. This document would support TfL’s vision for online and set out all the early design challenges as we saw them. Things such as:

• A lack of consistency and a real mobile/desktop design disconnect.
• A dated digital look and feel that doesn’t really reflect TfL’s new design and architecture following the Olympics.
• A slightly impersonal and non customer-centric experience that can seem too business/corporate-focused.

However, our ‘manifesto’ also had to recognise the need to make the new site ‘Triple A’ accessible wherever possible.

I really can’t emphasize this enough; it was the most thorough project I’ve ever worked on accessibility-wise – every user’s journey is considered as important as each others’ and this drove all our design decisions. It kept us anchored and kept a real balance between modern and interactive versus accessibility requirements and ease of use.

So we had a starting point, and could anchor design decisions in something everyone had bought into. The next step was to try and refine the designs across all device sizes and gradually move these forward to something we could build.

In my next post I’ll talk about the second part of the design process: answering the brief that we had set ourselves!

Hooray we won a BIMA! For the Vodafone retail application.

Hooray we won a BIMA! For the Vodafone retail application.

Filming bananas in the office… a write up of my organising and running of the Detica ‘Creative Hackathon’ afternoon.
…continue reading on Detica’s digital media blog.

Filming bananas in the office… a write up of my organising and running of the Detica ‘Creative Hackathon’ afternoon.

…continue reading on Detica’s digital media blog.

Giving ‘mobile first’ the thumbs down.

“Regarding pace of change, we believe more users will likely connect to the Internet via mobile devices than desktop PCs within 5 years”

- Morgan Stanley ‘Internet Trends’, April 12, 2012

Listen up. Your users are changing. On buses, in queues, down the pub or in the street, you may not like it but mobile is becoming the primary method of engaging with your brand. This new engagement is quick, hurried, purposeful and consumers are driving it. It cares about its specific location, it wants to be spoken to in a consistent manner and it’s performed with one thumb…

…continue reading on Detica’s digital media blog.

A simple idea, beautifully executed, is there anything better? As a bona-fide Londoner who thinks this is the best city on earth, I say no. TfL are a client, now try and persuade them to replace their homepage with this.

On the importance of content strategy.
Like all offices ours encourages recycling. Very laudable, but their labelling doesn’t make it very easy. Here in the kitchen one finds a set of normal and recycling bins.
I have in my hand something to throw away. So…
What is ‘general’? Is it general non-recyclable? In which case what makes it different to the bin to the left that is ‘general rubbish’? If it is general recycling then what can go in it? Cans? Foil? Cardboard? What? Why have I got to figure it out? I end up basically never using that one. So on to the others, what is paper? what counts as paper? How thick? Can you put card in? A sandwich wrapper? And plastic, all plastic including bags?
Aaargh. I want to do the right thing, I’m no Jeremy Clarkson really I’m not, but why have I got to figure out what to do. Sod it, I’ll just save it all up and have a bonfire.

On the importance of content strategy.


Like all offices ours encourages recycling. Very laudable, but their labelling doesn’t make it very easy. Here in the kitchen one finds a set of normal and recycling bins.


I have in my hand something to throw away. So…


What is ‘general’? Is it general non-recyclable? In which case what makes it different to the bin to the left that is ‘general rubbish’? If it is general recycling then what can go in it? Cans? Foil? Cardboard? What? Why have I got to figure it out? I end up basically never using that one. So on to the others, what is paper? what counts as paper? How thick? Can you put card in? A sandwich wrapper? And plastic, all plastic including bags?


Aaargh. I want to do the right thing, I’m no Jeremy Clarkson really I’m not, but why have I got to figure out what to do. Sod it, I’ll just save it all up and have a bonfire.