Intranet redesign, Phase 3: wireframe designs and user testing

The previous phase of the project gave me 4 main intranet sections with specific content functions and a detailed map of all the content that was cherry-picked to make the migration to the new intranet. There were going to be a fair few chunks of content left ashore, and no doubt a few stowaways.


The top-level, homepage, main navigation options, as voted for by the willing and much appreciated members of staff who took part in the online experiments were:

News & features

Containing 2 types of news; corporate *must read* announcements and feature articles, promoted as the online staff magazine. In addition, this section would be home to the corporate calendar, press and media coverage, the monthly staff magazine, and our holistic section (sports, social, weather, travel, photo galleries).

Guidance & support

Look-up, reference and guidance material, policy and procedures, forms and templates. All the stuff you need in your day to day job.

Ministers & parliament

Content relating to official ministerial business. (Cardsorting put any guidance of this nature into this section, rather than the general guidance and support section.)

Organisation & vision

Content about our structure, goals, ways of working, strategies and initiatives. Promoting internal campaigns.

Contextual navigation

For this next phase, I ran some time trials, using 2 sets of wireframe prototypes (created in Axure) to test the existing navigation against the proposed contextual method. I created a set of tasks for face-to-face user testing, designed to bounce the participant around different sections of the site. Contextual navigation came out way ahead, with task completion times significantly faster than the existing method. Decision made.

I was then able to document a complete intranet navigation structure based on the 4 main sections, plus a supporting section for global pages (A-Z, search, help.)

Wireframe and prototype user testing

The next step in the project was to work out how best to present all this information on the intranet, how the navigation menus would work and to start to implement some of the design ideas from the project brief.

I spent a month making heavy use of a trial version of Axure (are you getting how many cost-effective tools were used in this project??) to create protoypes using the full intranet IA, implemented with the proposed contextual method of navigation.

Having spent some time setting this up in Axure, the product really came into its own when I started the iterative testing. I’d do short bursts of tests with just a handful of people, individually at their desks. Glaring problems immediately came to light and with a few adjustments in Axure, a press of a button gave me a new prototype in seconds. Then more testing and adjustments, round and round, until I was confident in the navigation and layout, and just before the trial license ran out 😉

Early wireframe prototype page (before final cardsorting results.) Note the drippy *Corporate services* label which crashed and burned in cardsorting as a possible name.
Early wireframe prototype page (before final cardsorting results.)
Note the drippy *Corporate services* label which
crashed and burned in cardsorting as a possible name.

Benefits of contextual navigation

One of the most striking effects of using contextual navigation was that it made the intranet seem smaller. Because left hand navigation menus were shorter on every page. Because they didn’t include all the unnecessary baggage of same-level branch options. And I think this made the intranet seem less daunting to people during testing. Wherever they were in the structure, they didn’t feel lost. Golden usability rule; take away choice and you make it easier (therefore faster) for the user.

Bye bye breadcrumb

I also got the idea that the left hand menu could double-up as a breadcrumb, always leading back to the homepage and always showing you the path you have taken. An added benefit (later implemented with colour coding) was that the menu acted as a depth gauge. The less darker menu colours, the nearer you were to the homepage, the more darker colours, the deeper you were in the structure. Removing the traditional breadcrumb that spans across the top of body content saved some screen space and would also speed up migration time since developers would not have to manually code breadcrumb navigation.

Flexible menus

I was very optimistic about all the benefits of switching to this type of navigation It is flexible. It is not rigid. But I found this the hardest part to explain to the developers who were stuck in a rigid mindset of using up to 3 levels of navigation levels and no more. The intranet is not an evenly distributed field of content that falls neatly into ordered layers. Some sections go deep. Others are shallow. But, most are a combination of both. Sections consist of sub-layers of varying depth. So it is illogical to try to force the structure. To try to make it fit. Or to limit the structure to a finite number of levels.

Examples from two pages showing flexible, contextual menus made from the following building blocks: I can go back to this page/section (dark shade, one or more of these) I am in this section (medium shade, just one of these) I can go forward to this page/section (light shade, one or more of these) A bullet point marker to show *I am here*
Examples from two pages showing flexible, contextual menus
made from the following building blocks:
I can go back to this page/section (dark shade, one or more of these)
I am in this section (medium shade, just one of these)
I can go forward to this page/section (light shade, one or more of these)
A bullet point marker to show *I am here*

Information and navigation design completed, I then moved on to visual design, which I’ll cover in my next post.

In this series

  1. Research, surveys and brief
  2. Information architecture and content audit
  3. Wireframe designs and user testing
  4. Visual design, HTML and CMS build
  5. Migration, content freeze/dual publishing
  6. Communications, launch and evaluation

Intranet redesign, Phase 2: information architecture and content audit

Back in the good old days when the IT department allowed me to use DOS (the operating system that I was brought up on,) I managed to do some jiggery-pokery and get a complete intranet file-listing. And a few deft keystrokes later, I was spreadsheet-a-go-go.

dos

Content audit

My previous analysis already told me what was popular content on the intranet. The spreadsheet gave me the complete picture and what kind of state it was in, structurally.

Using our Google Search Appliance, I also generated a listing of all content that Google thought was on the intranet (having crawled from the homepage.) The resultant list contained 6416 entries (HTML, DOC, XLS, PDF) and was a fraction of the DOS listing, meaning that the webserver was filled with rubbish, albeit invisible to staff.

I then spent a long time sifting and sorting, grouping and batching, slicing and hacking. By the end, I had a good idea of what I was dealing with and what would make it into the final mix.

Top-level navigation

I decided that I could group the whole of the intranet into just 4 main sections. Big change. Big simplification. What I didn’t know for certain was what I was going to call these sections. So, with the core team, we came up with a good handful of ideas for the names of each of the 4 sections.

I started involving staff with an online, closed cardsort using all of our ideas for names. I invited staff from all over the organisation to take part. I tested a representative selection of all intranet content. The tests worked by showing the participant an intranet page or document and asking them which of 4 boxes they would put it in. Each question tested one section and the 4 boxes were labelled with a selection of names for that section.

I wanted to test a lot of content, against a lot of possible names with a lot of people, online. I had to find a way to distribute many smaller tests, testing different variations of sections with content while keeping the number of questions to a minimum, to encourage staff to complete the test. I was also working with a webserver with no coding capability (PHP or ASP). So I developed a simple set of HTML pages, which linked from question to question while passing the chosen answers to Google Analytics. I’d be able to filter the analytics for the test questions and answers.

For the intial test page which all participants landed on, I used Google Website Optimiser, setting up an A/B test which redirected participants to one of 12 different pages. Each of the 12 pages started an individual test containing 20 questions. The purpose of Website Optimiser is usually to find the best combination of elements or wording on a page to drive a particular outcome. In this instance, I just took advantage of Website Optimiser’s method of evenly distributing tests.

We advertised for participants across our family of intranets and got a really great response.

Cardsorting stats

Google Analytics report showing bursts of cardsorting activity during 2009
Google Analytics report showing bursts of cardsorting activity during 2009

I like looking back on these analytics. During the online cardsorting sessions I covered over 1000 content items and got nearly 36,000 individual responses. The first batch of tests was in February, designed to elicit our main navigation labels. Subsequent tests then checked that the chosen names would suit all the intranet content. It was a much larger set of tests, again using Website Optimiser for distribution and Google Analytics to capture results.

The Test Tube advert
The Test Tube advert

The “Test tube advert”

I attribute the success of the number of responses partially to the advert that I designed to entice staff to take the test. The advert lets people know what to expect: answer 20 questions. The text acknowledges that people would be supporting us in taking the test and also mentions that this is the second round of tests. There was no first round of tests; the line is there to give a sense of having missed out on something. I also chose *experiments* which I felt was slightly more sexy than *tests*. A bold, clear call to action encourages a click, and the test tubes are just dripping.

Cardsorting results

The stats from the cardsorting gave a clear visual indication of success or failure. Here is an example of results for a single card with the option of 4 placements (boxes). This card got 334 responses with nearly 80% concurrence of opinion. I tested iteratively until I was confident that everything fitted and would work well with staff.

Google Analytics results for a single card
Google Analytics results for a single card

Remaining information architecture

After the cardsorting exercises were finished I then got to work on creating the master IA for the intranet, creating the secondary and subsequent navigation levels. I could then map the initial intranet structure to the newly created structure, producing the content migration plan, ready for phase 5 of the project.

IA is such an important step in any web or intranet development project. And it is important that it is done early in the project, before any page layout or visual design.

In this series

  1. Research, surveys and brief
  2. Information architecture and content audit
  3. Wireframe designs and user testing
  4. Visual design, HTML and CMS build
  5. Migration, content freeze/dual publishing
  6. Communications, launch and evaluation