Case study: Anonymous

A journey to the heart of usuability

“So, when do we install the usability?” the Marketing Director asked. I and my team sat stunned. How to explain? Where to start?
Luckily, we were at the scoping stage of our website redevelopment and had time to answer. After brainstorming, we convened another meeting of the sales and marketing team, and asked the Marketing Director two questions:

What is our website for?
How are our visitors going to use it?

To me, these are the two essential aspects of any website, the heart and the guts, the yin and the yang, the Haagen and the Dazs. If you get these right, you won’t make a bad website.
The first question focuses on why you have the site at all (for example, to make money, to inform, to help customer self-service, to deliver specialist services, or whatever). The second is how you hope your visitors will think of your website (for example, it’s easy to use, informative, fun, helpful).
After much discussion, the Marketing Director came up with answers. For our site (at Nameless Organisation – I’ve since moved on to EDF Energy), the website was ‘for direct sales’, and our users were going to use it ‘easily and with confidence’.
From there, we were able to develop a successful strategy for usability.
My team at Nameless came up with a number of headings that put flesh on the strategy. We focused on:

Understanding our users’ needs and expectations;
Optimising our digital information in the light of our key usability targets;
Assessing our current content, including charts, graphs, downloads and images, for usability;
Training on internal content providers on how they would be meeting our usability standards;
Integrating usability into the content management system (CMS) workflow as we developed the CMS we had purchased.

So how did we do that? And how can other companies achieve a successful strategy for usability?
First, it’s important to remember that usability isn’t a mystery. Usability isn’t a trick you apply, like clever rendering, once the website is built. Usability is making your site easy to use. That’s it.
But what does ‘easy to use’ mean? It wasn’t going to be just simplifying our navigation, or keeping our new site shallow, or making lovely red buttons to say ‘buy now’. We agreed that it meant our whole approach to our visitors. Usability covered everything: the site’s layout and navigation, the design, the way it worked, and its content. All these affect how our visitors used our site.
Our web visitor was not some mythical, obedient person who would make the ‘user journey’ our creative agency so lovingly outlined. Our user was someone who had a purpose and wanted to achieve it fast, without effort.
We developed a one-sentence ‘touchstone statement’: Usability is seeking to understand your visitors’ purpose and delivering to them a tip-top experience meeting that purpose.
Our users had needs and expectations that we had to meet. We knew they would be coming to our site to buy one of our products. We knew that the easier we made this process, and the more confidence we could instil in them as they went through this process, the more likely they would be to complete that purchase. We hoped the experience would be so fantastic that they’d come back again and again.
We developed what we called our Ten Key Usability Targets (TKUTs, as they became known).

Make the purpose of each page obvious
As we developed our strategy, we asked the owner of every single page, ‘what is this page for?’
It was frightening how many owners had no answer. Replies such as, ‘well, we think someone will find it useful’ or, ‘the CIO wants his personal vision statement and photo on the website’ or, ‘we always have this there’ were not accepted. We had developed personae, and if the owner could not tell us what even one persona would want that page for, we cut it – or rather (ahem) we ‘put it to one side to re-evaluate’.
Once we knew what each page was for, we wrote that purpose into all the site structure maps and content plans we made. The content was then written or re-written to hit that target.
Put things in their usual places
Our purpose was to build a usable website. We didn’t want our users to have a challenge. We decided that we were not going to do neat, novel things with standard elements of a web page.
When our designers moved the shopping basket icon down to the lower left, we moved it back to the upper right, because this is where people expect the shopping cart icon to be. ‘Contact Us’ information was put both in the header links and the footer links, because that’s where it usually is.
Boring? Stodgy? Yes, as stodgy as always having the accelerator under your right foot and the steering wheel in front of you. We wanted confident users who instantly understood all the items on the page – a simple goal, perhaps, yet we fighting for it every inch of the way.
Make things work in the usual way
Our designers were lovely, creative people, but for them the design came first, and they wanted to something fabulous and different. The fact that our users wanted ‘same as usual’ was a mere pebble on the road. Luckily, we had our ‘TKUTs’ and these had to be respected. We asked them not to make the cursor change into that fun new shape. We asked them to discard that cool new way the menu could open. We wanted our links to work in the usual way. We wanted the purchase process to work in the usual way.
Our users weren’t there to learn a new way of doing things online. They were there to buy new things online. Why would we make that hard for them to do?
Tell me where I am and where I’m going
One variation on ‘make things work the usual way’ was so important that our site architect asked it to be a separate TKUT. It summed up his requests:
Give me a breadcrumb trail, so I know where I am in your site;
Don’t let your menus close up once my mouse moves off them: I still might need to look at them and I don’t want to have to keep my mouse-hand hovering;
Tell me how many steps I’ll be going through when entering a long form, and name those steps;
Let me understand the structure of the site by looking at the main menu.

We insisted that the graphic collateral had to be part of the navigation; that is, when a user was on a page, the colours, layout and images would all be visual clues saying, ‘You are here, on this page, in this section, and we think you’ll want to go here or here — but over here is the menu in case you want to go somewhere else’.
We made our graphical information (charts and diagrams) big, clear and simple.
Our purchase process showed the steps a user would be taking and told her where she was in that process by highlighting that step: goods selected, total cost, shipping options and costs, shipping address, credit card details, review, purchase.
We re-used images, with elegant variations, on all the pages of a section to say ‘You are still in this section’. That saved us a lot of money on photo libraries.

Tell me what to do.
One of the team read a number of usability reports (from the website usability specialists Nielsen Norman Group, among others) and studied a range of our competitors and similar niche business websites. We distilled this to best practice: Tell them what to do. If you want your users to read more about a product, have a link that says ‘read more about the product’. If you want them to buy it, have a bright button that said ‘buy now’.
The designers thought their own, subtler approach was better. Rather than arguing, we booked some user testing. The users said, “Why isn’t there a link right here that says ‘find out more?” They said, “Why not put BUY NOW right here where I can see it?”
Web team: 1. Designers: 0.
An easy site that can be used with confidence is one that gives users clear calls to action. That’s what we did.
Offer easy-to-read and understandable content
A spooky concept to most of our content providers! We told them that all the content on the current site would have to be edited or re-written. Most of them assured us that their content was perfect just the way it was. How we laughed.
Then we wrote a one-page guide on how to write content. We gave them a maximum word could of 260 words per page and set the CMS content editor so that no more than 2,000 characters could be typed in.
From the screams, you would have thought we were sawing off fingers.
We brought in a professional web copy writer, who showed them how to make it short and snappy. She taught them the joy of bullet points, the necessity of making each paragraph stand on its own (because users don’t read a page, they skim for target words), the usefulness of side boxes for supplemental information and the dynamics of call-outs.
Over time, our content became fun and easy to read. Pages started falling into consistent patterns, because the best way of saying things turned out to be the same way across the site. That, in turn, made fewer templates necessary and simplified the design work and the CMS build. When you do something right, it gives you gains across the board.
Put the content on the screen
So obvious, and yet... Content must be there on the screen to be read. You can also offer it in a print-friendly version. Lastly – and only lastly – you can offer it in a downloadable format, a PDF.
A PDF if not web text. It’s a downloadable file. When I see a PDF where on-screen content should be, I know the website owner thought it would be cool if I helped him save time — his or her time. A PDF is easy to upload, but hard to read on screen, and difficult for disabled users and older users to read. When I see a PDF where a page of words should be, I know that I, the user, wasn’t put first.
Use relevant graphics
Our team sat through user testing with the main designer and some representatives of our marketing department. The designer was a young man. Every single image was of a hot babe, looking out a window, being decorative on a balcony, doing anything but interact with our products. The users testing the site asked, “Why can’t we just see the products?”
Out went the lifestyle shots. Down went our costs, as we could photograph our products in a day with one photographer. Some of the team missed the hot babes, naturally. Maybe a few photos were kept; I didn’t ask.
Make it work on my browser
Our IT team became very excited when they found out we were redeveloping the site. They had been looked at a lot of cool technologies and they really, really wanted to use them. Our designers had an extremely talented Flash graphic artist on their staff and they really wanted us to use him.
We had our touchstone statement. What part of a tip-top user experience were these?
‘You’ll need Flash 9 to use this site.’
‘This site is best viewed in IE 6!’
‘To view this page, you’ll need to download Adobe Reader.’
Answer: no part at all. So we made sure our site would work as far back into browser history as was feasible, and that it needed nothing more than what the user had in front of her: the computer.
Put your user’s ego first
Not your designer’s ego. Not your boss’s ego. Not your IT infrastructure guys’ egos. Not yours.
The best way to achieve this is to have a touchstone statement and to use it firmly. Anything good for the user wouldn’t be dented, but anything good for the owner (that 2,000 word personal mission statement of the CIO) got very badly trashed under the touchstone statement’s firm hand.
Make it clear on every page that you have thought about your user: what they might want; where they might look; what doubts they might have; and demonstrate that you have done your best to anticipate what they want by the choices you give them (‘Haven’t found what you’re looking for? Try this!’). They will feel loved and cherished. They will feel confident that the next page they click to will also give them the same tender love, right through to the page that says ‘thank you for buying’.
Make your site so easy that your user will feel enhanced by the care you’ve taken to remove care from them.
Those were our TKUTs, our Ten Key Usability Targets. Some were easy to achieve, some much harder. They worked to help us get a clean, clear, easier to use website that our users could use with confidence.
But we weren’t going to be running the website. Our content admins were. We were going to deliver our beautiful baby into their hands and they had no idea how to care for it! Why should they? They were marketing writers and secretaries and PAs and office juniors.

The adoptive parents
How were we going to keep our website usable when non-web people were going to be running it? How were we going to stop usability from evaporating? How were we going to make these people effective web content admins? Prayer was only part of the answer.

The Powers That Be
One part of the answer was getting buy-in from Very Senior Managers (VSMs). They were going to spend a lot of money on a new website, we explained, and they might as well toss it in the bin if they did not take steps to ensure that our focus on usability was kept sharp. Before they could start thinking about how to do that, we told them.

Give their web manager the power to say no, even to them. If a Chief Officer submitted a 2,000 word essay, the web manager had to be able to refuse it, under TKUTs 6 and 10, and to get it re-written to the set standard.
Give the content admins themselves the power to say no, with the confidence that they will be backed up by a VSM if a middle manager decided that his ego or the crush of deadlines requires the breach of any TKUT.
Give the website mission statement to the whole company and make it clear that it’s to be respected.

The worker bees
The most important part of ensuring that the usability strategy was sustained was through training. I’ve personally been involved in a number of web redevelopment projects and I find that a day, a few days, or one big workshop, was the most time invested in training. Millions of pounds spend, yet they skimped on the one thing that will ensure future success.
We asked the content administrators what their ideal training would be. In the end, we did the two biggest vote-catchers: first, small groups for initial training, then one-to-one sessions. We invested a lot of time in training and we have never regretted it.
We began with small groups, selecting a range of content admins from across the business.
First, we explained how the CMS worked and made sure they were confident in using it. If people are uncertain, they won’t do the work.
Second, we placed our personae, including their photos, around the room and talked about them, so that they became real people. We explained to our admins why our usability standards were important for Kevin, Susie, Fred, Natalie, Akim, Robin. They understood instantly what usability meant when they understood who it was for.
Then we went through examples of good pages and explained the purpose of the word-count limit, the image rules, the calls to action. We gave them a one-page checklist of elements to look out for or to consider. A training manual scares people. A one-side, A4 laminated checklist makes the job seem easy. On the back were all the personae.
At the end of the two days, the admins returned to their departments, as in love with our users as we were, and happy and charged with energy.

Eternal Flame
A month later, we started going out to the admins for one-to-one training. By then the glow had faded and the website was starting to be either a chore or a distant memory. Those who had done no admin work were rusty on using the CMS, and all but a few had lost the faith.
We went through the training again, this time armed with a short, four-sided A5 ‘web copy writing’ how-to guide to supplement their checklist. We prepared for these session by looking at what each admin had done (or not done) and we worked on real content, again with the personae close up and personal.
We found out what was frustrating them, what was hindering them (no time? unsupportive manager? technophobia?) and suggested solutions to these. We reminded them that they had the power to insist on standards and to say no, and that the VSMs would back them up.
We reminded them that a website is for life, not just for Christmas. And we committed ourselves to them by agreeing to further training, by being on the end of the phone, by asking them their advice (and taking it). In short, they were part of the team.
You have to love your content admins as much as your users. They are your heroes.
And, well, yes, we did a little ‘mystery shopping’, carrying out random checks on new and updated pages to see if everyone was living up to the mission, the touchstone, and the checklist. We weren’t happy doing this, but we were even less happy with the idea that our website might slip from our high standards and cease to meet our users’ needs.
Because our website exists to make our users happy to do business with us. That’s what usability delivers.

Carolyn Clarke is Corporate Webmaster at EDF Energy, with responsibility for the corporate website and also for the company’s intranet, both on the strategic and day-to-day levels, liaising with the web administrators within the company’s four main divisions. She can be contacted at Carolyn.Clarke@edfenergy.com