Auditors’ website gets a makeover: The story of a site redesign
November 10, 2011
Print This Post
Email This Post
RSS comments feed on this entry
A blog from the head of the Europa Webteam, Deirdre Hodson, on the re-design of the Internal Audit Service website. She takes you right from conception to the final product – essential reading for anyone planning their own revamp…
The challenge
The internal auditors wrote to DG Communication team last year looking for help with their website.
Their goal was to design an easy-to-maintain website which would help them better communicate the day-to-day work of their service in providing value for money for Europe’s tax payers. The problem was they had a web team of just one person and they really wanted the site launched in time for their 10th anniversary celebrations.
We happily got on board to help out (you’ve got to be nice to auditors after all!) This was a really good opportunity for us to try out our new templating tool that we’d developed as part of our corporate web content management system. This tool makes it easier to build sites by using ready-made blocks or components (think digital Lego bricks) and the IAS would be a good example to show other departments who might be interested in this service.
So where did we start?
As always we began with a usability review of the site to see what was working and not working and how we could improve the service for the user.
The site before the redesign
The IAS staff were not collecting feedback from users in any systematic way (they are not alone – we know from ourinventory of sites that many other Commission departments are in the same situation).
From time to time, IAS staff would look at their site traffic so they knew that many people were coming to register for their annual conference and to download their annual report.
We had a look at the statistics ourselves. Indeed, the site traffic showed two peaks a year, annual conference time and annual report time.
Although they thought many of their visitors would actually be from the Commission itself (the IAS being an internal service) this was not the case – only 12% of visitors were Commission staff. Traffic figures showed a lot of visitors from outside the EU, including India and China, which could be because the IAS has some partnership and outreach programmes.
Another thing that struck us looking at the stats was the relatively high bounce rate on the site. In other words people landing on the site and quickly leaving again. Was there some confusion about what this body did? Were people actually looking for the European Court of Auditors site? Or the EU’s anti-fraud agency OLAF? Maybe a better structured site with better SEO (search engine optimisation) would help them be found by people who really wanted to be there.
The information architecture of the IAS site had some weaknesses. It was not so clear from the labels what might be found in each section. What was the difference between ‘Mission’ and ‘Organisation’? Why was there a separate section called ‘activities’ which did not contain any information about conferences? Also the old commission template was being used on the site so it did not correspond to other DGs sites and it had a somewhat old-fashioned feel to it. One of the goals of the IAS as well as having clearer content was to project a more modern and open image. Anyway, a lot to do before we started on the design….
First structure
We started to make the first sketches of how the structure of the site could look. At this point we hadn’t even thought about colours, design or fonts or indeed how the homepage would look. We just worked with good old paper and pens:
Sketching out our plans
After a number of discussions with the auditors we decided on a structure based around five main sections:
- Conferences
- Documentation
- Working with partners (to cover training and internal cooperation).
- About us
We felt this site structure would reflect the main reasons why people came to the auditor’s site (registering for conference, finding the annual report). It would allow them to give their corporate information (mission, how we are structured, come work for us, history etc..) but this information would come below the main user tasks.
Creating the content
Once the site structure had been agreed upon, the IAS started their work of writing the content. It was a real joy to work with people who realised that good, clear content would be central to the website’s success.
They took full responsibility for this and beavered away at the texts until we had around 15 pages of a word document ready to send to our crack editing team in our translation department!
The English web editors in DGT worked their magic and made the text even more web-friendly – shorter sentences, better use of bullet lists, links etc..
Texts come back from the DGT stuffed full of great changes and suggestions
The IAS also wanted to put some of their content in video so they contacted the audiovisual team in DG Communication and with their help produced a series of short (really short) videos with the head auditor Brian Gray. These questions answered people’s main questions about the service, was it independent? Who exactly it answered to?
Stop – time for tests!
At this point in the project we stopped to run a small usability test on six typical users of the IAS site. Our aim was to test the structure of the site and some of the new content.
As always we came up with a series of common tasks people would want to do on the site and we worked out some scenarios to give the users. We created a clickable version of the new site.
Scenarios for user tests
As always it was a real eye-opener watching the tests.
On the plus side, the test showed us that the site was straightforward and easily navigable. There were still a few areas where we could improve. We needed to make some of the labels clearer and move some of the documents into different sections. Contact and work for us could also be clearer.
Notes I took while watching testing from the observation room
Once we had worked those changes in we then sent the texts off to our colleagues in the translation department to translate the texts into French and German.
Design
So three months since our first meeting with the IAS and only at this stage we started to move to the design phase.
Of course design is important but it’s impossible to retrofit a good structure onto a design mock-up which is why we always start with the bones of the site.
So design-wise we went obviously for the Commission banner and a simple look and feel for the site. Navigation menu would be on the left hand site and visible on every page except for homepage. On the homepage we would show all the sections and subsections so people would see the top tasks immediately.
It took us some time to come up with the icons and images for the site – and also to work out where to place the IAS logo.
- Launch in time for 10th anniversary
So six months after the IAS wrote to us we launched the site in 3 languages – the week of their 10th anniversary. It’s a small, straightforward site but we feel we have focused it more on the needs of the user.
The site is now more manageable for their small webteam and it projects a more modern and open image of the audit service.
Before
After
Check out the IAS site for yourself ! Big thanks to Deirdre for this insight into the re-design process. If you’ve got questions or comments, or have done something similar, let us know; we’d love to hear about your experiences.
Number of views: 3258
Print This Post
Email This Post
RSS comments feed on this entry
November 14th, 2011 at 11:13 pm
Like that you conducted usability tests throughout your process. That is crucial to good UI and often missed by designers.
November 19th, 2011 at 3:21 pm
I couldn’t agree more Sandra. Exactly what I was thinking. We spent so long conducting usability tests and while it is labour intensive I feel it is essential.
November 26th, 2011 at 3:20 pm
Hi, nice post, and glad to see some usability testing being used. A couple of questions, tho:
Firstly, the statistical analysis – were you able to look at user paths, or just the basic metrics like views, users and bounce rates?
Then, when you write “… we stopped to run a small usability test on six typical users of the IAS site”, how did you find six typical users? Were they all from Brussels, or did you ship some people in? Did you use personas to segment your users, and set out different scenarios for the different personas? Did you bring users into the taxonomical development, through e.g., card sorting?
Secondly, I guess this was a test on the existing site, as all you had was a word doc for the new one. So if you didn’t do wireframe- or mockup-based usability tests, how do you know if the new site is any better, from the users’ perspective? Any plans to do post-relaunch testing, for example, or do your systems not allow it?
Cheers,
Mathew
November 29th, 2011 at 5:28 pm
@ Mathew,
Thanks, we believe that user testing is the only way to make good quality websites. So far around 30 usability tests have been done on Commission websites but we would love to see systematic user testing on all our sites. In answer to your questions:
Firstly, the statistical analysis – were you able to look at user paths, or just the basic metrics like views, users and bounce rates?
Basic metrics from our analytics tool – we do not track user paths with this tool for privacy reasons.
Then, when you write “… we stopped to run a small usability test on six typical users of the IAS site”, how did you find six typical users? Were they all from Brussels, or did you ship some people in?
I’d love to have the budget to ship them in but this was done on a shoestring and the users came from Brussels. The users of the IAS site are EU professionals mainly as it’s an internal service, we had someone from the Belgian auditing body who wasn’t a user but could be a potential one. On the site, I look after europa.eu we do not test on EU professionals as tney don’t generally use this site.
Did you use personas to segment your users, and set out different scenarios for the different personas?
No to the first and second questions. We have used personas for some of our projects but I still have to be convinced of how useful this is. We gave the users all the same scenarios – it’s what we usually do in tests so we can measure and compare task completion rate.
Did you bring users into the taxonomical development, through e.g., card sorting?
No, the site isn’t complex enough to need this extra step. We have done card-sorting (one just a few months ago) when the architecture is more complex. We find it really useful to see how people sort our information when they think beyond our structure and vocab.
Secondly, I guess this was a test on the existing site, as all you had was a word doc for the new one.
No, we tested on a wireframe of the new site – just a plain wireframe with no design. That doesn’t seem to bother the testers. They understand it’s just a site in draft. What we were looking out for was whether the labels were clear, whether the content was digestible and whether they could navigate around the site.
So if you didn’t do wireframe- or mockup-based usability tests, how do you know if the new site is any better, from the users’ perspective? Any plans to do post-relaunch testing, for example, or do your systems not allow it?
It would be good to retest of course, but it’s one person looking after the site as well as doing many other things. On the site I look after europa.eu we test at least twice per year. We had tests last week in fact on 10 users – they are always a real eye-opener (our team of four watch from the observation room).
As always we came away with lots of quick-fix changes and longer term improvements. Ideally I’d like to test more often – test, change and retest as Jakob Nielson recommends. I’d also like to explore more remote testing, it has pluses and minuses but it would be good to have a more geographic spread. We know for example that one in 10 of our visitors on the EU site comes from outside the EU.
Thanks for your questions! //Deirdre
December 4th, 2011 at 5:40 pm
Thanks for the detailed answers! It’s really great to see some professional techniques be adopted by the Commission, and just a shame that you can’t always do everything properly for budgetary reasons – clearly, not being able to do A/B testing on a redesigned site is a real problem for continuous improvement, as is taking all of your testers from inside the Brussels Bubble.
I was at first taken aback by your attitude towards personas, but I guess personas for the auditors’ site wouldn’t be that useful, as it is so specialised, whereas building up a set of personas for many of the ‘wide public’ sites DG Comm does would be almost impossible, given the variety of audiences.
December 8th, 2011 at 3:58 pm
Thanks for sharing this information; it is interesting to following the projects of others!
Some remarks:
– Is it just an optical illusion, or have you used a watermarked image in the banner?
– You might want to correct the metadata on the site – now it says “Home – European Commission” in the title field of my browser, which is not very informative.
– Maybe also useful to review the titles of the videos – a title like “Does ECA influence the IAS?” is a bit mysterious for those of us who are not familiar with ECA.
Finally, the top text on the home page starts with a few questions. Not being very interested in having to click somewhere to find out the basis, I would suggest to instead start by giving real information, such as IAS’ elegantly phrased mission:
“The Internal Audit Service is a core part of the internal audit system for the European Commission and EU agencies. Our mission is to provide independent, objective assurance and consulting services designed to add value and improve the operations of the Commission. Director General Brian Gray e…