Archived: Visual design strategy: part 1

stuartneale_100x100

early-responsive-tests_800x

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?

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.

Screenreader-test

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!

Leave a Reply

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