A first class service

We have all witnessed seismic shifts in the web and digital over the last few years (any consultant worth his salt will open with that mind-blowing insight). However the most switched-on of us are seeing there is a fundamental change in how we think about what we do as UX practitioners.

The jeans and trainers brigade are venturing out from their headphones, leaving behind their impenetrable language and starting to learn to speak ‘suit’. We have begun to recognise we are designing services. Services for real people, for multiple channels, multiple devices, multiple contexts, that have to interact with the physical world and also other systems. To get this right requires new thinking for us plus organisational and business change for our clients. Only if we understand and influence this change can we deliver the kind of experiences users are now demanding.

A good term for this wider thinking is ‘digital transformation’, and it takes its methods not only from UX design, but also from business consulting and most importantly service design. To illustrate this, a great example is the past couple of years at Transport for London.

Don’t obstruct the doors, it causes delays.

TfL is one of the most high profile transport services in the world but, here comes the history bit, until the new millennium it didn’t exist. We all moved around London on a multitude of separate transport ‘modes’. These, like some uniformed version of West Side Story, mostly hated or didn’t speak to each other. Then in 2000 they were all brought together under a single organization - a massive change in culture that is (to be diplomatic) still in progress. To underline this, in 2007 a first digital step was made with a new website that reflected the users’ needs, rather than the old ‘modal’ structure of the business.

Then, and we’re back to consultant speak, the digital world completely shifted under their feet. It became ubiquitous, cheaper and mainstream. Smartphones arrived, then tablets and now TfL’s users interact with the organisation in fundamentally different ways.

They might pre-plan their journey, checking future service disruptions and signing up for travel alerts. They could then take their results with them, on their personal device, all the while checking live boards and asking staff or checking social media for updates, information and service disruptions. They could use apps built on TfL data and plan in-journey, or use social media to suggest or influence others behaviour (or just moan). They can sign up for services, pay, top-up and manage their accounts online and pay contactless.

They even see where their taxi is, live and pay and tip on their mobile without taking it out of their pocket.

Station, customer service and support staff need the same information as the users see online. This needs to be mobile, accurate and always-on. Engineers need to view and input information into the same systems, location-aware and sometimes in inhospitable places. Analytics on people’s movement, habits and behaviours can help with planning, traffic management and reduce costs. Plus third parties and developers want to experiment and build new services on top of TfL’s data.

This next train departs in…

To drive the transformation we leveraged the new website project, in collaborative, multi-disciplinary teams we engaging with users in the field, plus people all across the actual organisation. We developed a clear and compelling vision of the overall service, and made prototypes for multichannel experiences. Then we refined by designing, iterating and continually testing with users, staff and management.

In parallel we rebuilt the back-end data from scratch to provide speed to market, flexibility, social integration and analytics.

This all started to embed an agile methodology in an organisation not used to such speed of change. We also developed new digital experience principles, bolder and more modern responsive web templates and a design toolkit for building new sites and services. All the while communicating what we were doing both to the public and the organization.

To keep momentum and help our clients manage their stakeholders, we consulted with the leadership team and developed a new overall digital strategy and business transformation roadmap. Helping them move towards a more digitally integrated organisation and to build up their own capabilities.

Keeping London moving.

The new mobile-first website launched last year and was a huge hit with users, the organization and partners. Mobile device usage soon overtook desktop and laptop for the first time early 2014.

It’s an ongoing programme of improvement and change. As I moved on they were starting Oyster integration and single sign-on, enterprise apps for staff and partners and the developer community is beginning to develop the next generation of apps and services on the new API.

I’m immensely proud to be part of the team that improved the way in which millions of Londoners and visitors move around the capital. This was all possible because we got the basics right, understood the users and the organization, appreciated the change needed and that we were designing a service not a website.

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

There’s no hiding from it; if you are too fixed-web focussed and treat mobile as an afterthought you simply have to change.

It’s not complex. It’s not about technical arguments around apps or mobile web, style sheets or responsive design. It’s simply a mindset change in the face of overwhelming evidence. It’s about context, about device capabilities and expectations, about understanding the mobile experience. It’s about finally taking the web for granted and understanding the real needs people have of the medium. Fundamentally, it’s about understanding your users, about understanding people. 

They’re different now. They’re moving - fast. They don’t want the same content presented in the same way anymore. If you keep getting it wrong they will turn off completely. Believe me, this stuff is important - you can lose your audience forever.

Only two of the five UK Network Operators currently have mobile web sites.

- Detica’s own research in the field, November 2011.

Brands are starting to understand mobile users though, right? Well no, not really. We’ve been working with many brands on mobile strategy, mobile design and build and innovation. We have been embedded in web and UX teams for years now, leading mobile thinking. And at times it has felt like trying to change the course of an oil tanker by hanging over the side with an egg whisk.

However, here’s a question: are we to blame? There’s a thought, and not a pretty one. I think ‘yes’, at least partially.

Why? Have we been slow ourselves to truly understand this change? Possibly. Though I think there’s other factors at work. Have we have been following industry trends, naval gazing and thinking this stuff is easy? Again, possibly.

However, I think there’s something else. I think we haven’t been explaining ourselves well enough. More to the point have we focussed too much on ‘mobile first’?

It takes 26 hours for the average person to report a lost wallet. It takes 68 minutes for them to report a lost phone.

- Unisys, 2012

Now don’t get me wrong, the sentiment is right. Our heart is in the right place; we want it to communicate the importance of the changing consumer landscape, but does it have the tendency to scare clients? The problem possibly lies with the terms themselves, with ‘mobile first’.

‘Mobile’ what does that mean? Well, if you’re lucky a client will take it to mean ‘smartphone’. If you’re unlucky (as I was with one senior client-side technical architect I talked to) it simply means ‘phone’ (actually it meant the make of phone in his pocket and nothing more). That’s then a big leap to make; to change his way of thinking simply to provide for this one small device.

This is a problem when we actually mean something much wider by ‘mobile’. We mean a whole class of devices, really a whole class of device functions like location awareness, portability, touchscreen etc. but not necessarily all at any one time. I regularly have meetings with a colleague in coffee shops; he is always there with a MacBook with a 3G dongle. Now I believe this is a mobile device. It is location aware and location based services will be useful to it, but it’s not a phone or a touchscreen (yet).

Then there is ‘first’. Many take it to mean ‘before all other considerations’ or ‘primary’. This is too much; it scares clients as they‘ve implemented whole web teams who have only just started to get that stuff right. Many projects will benefit from thinking about the smartphone experience first then building up to the fixed web; it sharpens the requirements and designs. In other circumstances, sometimes it is best to treat all devices equally at the outset.

There are 7 billion people on Earth. 5.1 billion own a cell phone. 4.2 billion own a toothbrush.

- Mobile Marketing Association Asia, 2011.

So what does that leave us with? It’s really all about content and context, about being disinterested about the devices at the outset and instead really understanding what services (content) your users need, what device(s) your users will be using and the situation they using them in (context). It is about refocusing on user centred design and understanding how their situation and needs have changed.

Mobile devices are myriad and are continuing to grow. This is a mind-set change: it is not easy, it costs money and needs expertise. 

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.