Archived: Visual design strategy: part 2

stuartneale_100x100

early-responsive-tests_800x

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.

Early-homepage-design

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.

new-images

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.’

1 Comment

  1. I love the beta on mobile. My favourite feature is that it auto-completes the station names – such a simple idea, but on a mobile it makes a huge difference.

Leave a Reply

Your email address will not be published. Required fields are marked *