Remember that migration plan from phase 2? Having decided to publish back-issues of news stories to the start of 2009, I could quantify how much content we would need to migrate. I managed to cut the original content from 6416 entries down to 3000 entries. Some of this was by losing older news stories. The remainder I did by reorganising content into simplified chunks. Where a section had dozens of one-paragraph pages, I grouped and combined them into fewer pages. I removed out of date content. Cut out duplicated content. Barred the *what’s this doing on the intranet?* content.
So it was at this point in the project, around September 2009, that we agreed on an unofficial launch date of 1st January 2010. We reckoned we could populate the new intranet in that time. We would divert all our attention to the migration and bat off any new development work.
We pulled a few extra resources from the web team to help out with migration. We had hands-on training for the CMS publishing and strict rules on page titles, metadata and file names.
I shared the master migration plan with the team through Google Docs which worked wonders for collaborating on our progress, showing up to the minute changes and no document check-out and check-in. Meh!
We announced a moratorium on intranet updates with the exception of corporate news and features and urgent ministerial and board messages.
Curious to note that having announced a content freeze, intranet content owners who had not done anything with their content for months and months suddenly wanted to update their pages. Don’t you love human nature?
Because we had agreed to continue to publish news stories, I divided the migration work amongst the team with one person responsible for publishing ongoing news onto the existing intranet and also entering into the CMS for the new intranet. We had a few people working on news story back-issues. And a few working from the existing Dreamweaver content, manually building the green, blue and purple sections of the site.
Migration production line
Cut and paste. Cut and paste. Robot-like for weeks. The migration team laboured on. The traffic lights on our Google Docs spreadsheet slowly changed from red to green. We took this chance to do a little editorial work on pages as we moved them across, rewriting in plain English and reformatting pages to improve readability. I was also keeping an eye on our Google Search Appliance as it indexed the migrated content. Up and up went the page count. Perfect page titles all round!
A URL was leaked at some point and from studying Google Analytics I could see that there were about 60 people around the organisation looking at the new site before it was officially launched. I’m glad they were that interested!
Communications and launch
In my next post I’ll cover how we worked with our internal communications colleagues to prepare staff for the new intranet and how we have evaluated and evolved the intranet since launch.
In this series
With several stakeholders interested in news delivery across the intranet, this was an important part of the redesign.
In the existing intranet, a news story would appear on the homepage with a URL from the latest news section and then drop into an archive, with a different URL. So the same story had 2 different URLs in its lifetime travelling from homepage to archive. A nightmare for analytics and evaluation and back-linking. The news archive itself was just a bulleted list of text headlines, grouped by month, buried in a structure that was difficult to navigate and, to my mind, did not encourage anyone to browse through back-issues.
I wanted to turn this on its head and bring the news stories alive. I wanted stories to link to each other forming a thread. I wanted to eliminate the idea of an *archive* which reeks of a dark, locked away place, underground, filled with cobwebs. I saw news being displayed as a stream of thumbnails. And wouldn’t it be nice if staff could *Like* stories?
Devolved news publishing
Also on the cards was a plan to devolve news story publishing to the internal editorial team. Up until this point, the central intranet team handled all intranet content, coding up and publishing manually in Dreamweaver. To get the news stories flowing through the new intranet via the editorial team, we needed a CMS (content management system). And because news would appear on the intranet homepage, it meant that the CMS would have to publish the intranet homepage. Scary, because we’d always had manual control of the homepage.
Technical development starts
Armed with my wireframes and a visual design prototype (built with Fireworks – great for WEB graphics) it was time for the core team to come together ready for the build. Up until this point I had been working very closely with the intranet development manager. Nobody had seen any visual design work or prototypes. This was the point when I presented all my findings to the team and we got our heads together working on the interface.
Team meetings were more scrum than SCRUM and I was probably seen as a tiresome pain in the neck during development. Constantly tweeking parts of the interface. Trying to defend usability design choices. Causing hell for the CMS developers whose inbuilt navigation system would not bend to my contextual designs and pushing them to the limits of programming creativity. Trying to turn their mindsets to new ways of thinking. I still remember roaring at the team during the news section development “THERE IS NO ARCHIVE!” and fighting for pixelspace on the width of the search box. Such is the life of the user experience designer.
Compromises, battles won and lost, we came up with the following main design elements.
Page layout, consistent design & colour coding
We decided that the header bar should stay the same throughout the intranet. This contained the logo, strapline and search box (including people search). Plus a global navigation bar containing the top-tasks and A-Z lookup pages. I was quietly pleased that it would leave no possibility of having any spam banner ads forced upon us from overly keen stakeholders.
The left-hand menu on the homepage displayed the top 4 sections.
I added an A-Z box to the homepage to give quick access to any letter plus a scrollable billboard space for internal advertising. The billboard gave the user 10 seconds to do what they came to do from the homepage and then started slowly scrolling the adverts for those who hung around. We managed to get RSS feeds from our public site and the BBC into the homepage and the only bit of personalisation on the intranet; a graphical bookmark link back to a choice of local intranets (implemented with cookies).
We changed the default typeface, increased the font size and line-spacing and improved text flow on the page. We used a three-column approach, left-hand menu, body content, right-hand for document downloads, related pages and external sites, adverts and contact information.
On individual news story pages the developers came up trumps allowing us to display popup images, scrolling photo galleries and video. A big plus for engagement. And we managed to get voting on stories into the mix through a convoluted use of jQuery, cookies and Google Analytics to store the votes. We added *next* and *prev* on each story to encourage paging back and forth between stories. Back issues were still organised by month but we now had a visual display of stories using thumbnails. And there was no mention of archive 🙂
Instead of using a typical datestamp on the footer of each page, I took the decision to move to user-centric dates in the style of Facebook. Yes I did sit and watch in wonder as a freshly published page changed its status on the footer bar in real-time from Published just now, to a few minutes ago to 10 minutes ago. Much more human to see, than to read a date and have to remember what day it is now and work out how long ago it was. Little shortcuts in the brain’s workings help the user experience.
Here are some example thumbnail images of each section template, showing the homepage, a help page and then each section landing page paired with a themed detail page. Not counting news & features, each section landing page acted as a partial sitemap giving quick access to popular content within sub-sections.
It was at this stage when the first drafts of the site had been built that I tested the intranet template on staff using assistive technology. I sat with people using JAWS and SuperNova screenreaders and Dragon voice recognition. Always a good experience watching (and hearing) the intranet being used from this side of the fence. And great when all the hidden code in the back of the pages works. However, I sat with one blind lady and I was pretty gob-smacked to find out that she was not aware of access keys and how to jump around the site. She’d been relying on her own method of jumping to the H1 tag on a page but was unaware of all the other shortcuts. It was also interesting to sit with another lady using a headset to easily browse the intranet through spoken commands.
After building the templates and CMS system we were then ready to haul over the content, which I’ll cover in my next post.
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.
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 😉
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.
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.
Information and navigation design completed, I then moved on to visual design, which I’ll cover in my next post.
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.
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.
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.
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”
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.
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.
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.
I have been meaning to write up the phases of our intranet redesign project for a long time. I’m going to blog the 6 phases of the project leading up to launch on New Year’s Day 2010. The project took around a year and a half to complete, with a core team of 4 people, working in addition to our day to day jobs of intranet publishing, website builds and the usual internal comms intranet panics. This was a major overhaul project, aiming at a big-bang relaunch.
This initial phase of the project produced a brief containing the aims, scope and deliverables for the project plus a detailed research analysis.
Alongside my own usability review, I looked at our existing IBF usability benchmarking reports to feed the expert evaluations into the brief.
There was very little imagery throughout the site and pages appeared bland and cumbersome. Design wise, there was little trace of the corporate brand.
Behind the scenes, the folder structure was haphazard, as was filenaming.
Analytics reports and search logs
I analysed the analytics and search logs to find out which content was popular, unpopular, surplus or missing. I looked at page views, time on pages and search phrases. This analysis gave me a good idea of what the staff were browsing and searching for. No prizes for guessing the top pages: job vacancies, forms, people search, pay information. At that time we didn’t have a restaurant menu; missing content!
Gerry McGovern, Customer Carewords and contextual navigation
We used Gerry McGovern’s Customer Carewords methodology to survey staff with the objective of finding out what they wanted to do on the intranet in terms of top tasks.
Around the same time, I tuned into a webinar that Gerry was hosting in which he talked about contextual navigation. The practice of only showing menu options relative to the page content. He talked about how the BBC website used this technique and demonstrated how menus adapt, for example, from sports, to football, to first division football without still showing cricket or tennis. I made a note to experiment with this.
We spoke with stakeholders from across the organisation with particular emphasis on internal communications. There were lots of detailed discussions about news and how we were going to present news articles. The current 4 categories of news needed simplifying.
Having looked at all the evaluations, research, stats and surveys, we developed a basic brief, summarised below:
Improve the overall site design and layout (modern look and feel, improved readability and ease of use)
Use the internal brand
Redesign the information architecture by auditing and recategorising content
Implement a simplified navigation system (test contextual navigation)
Simplify the news categories and improve delivery
Rectify the flow of stories from the homepage to news archives
Redesign the search results interface
Overhaul intranet content metadata to give a solid search experience
Standardise folder structure and filenames
No end date! Project Manager nightmare! But we knew that we would have to work on the project alongside our day jobs (where anything can happen!) and only decided on a launch date as we prepared for content migration (phase 5).