Parliament Week website. User experience design in action.

You know that a project is going to go well when the first paragraph of your client’s brief calls for ‘focusing on key user needs and using open source platforms and technologies to deliver improved value for money.’

I wrote a case study about the new Parliament Week website, on the Helpful Technology site. Please take a look at it for the main information about the project. On a more personal note, I wanted to write more about what went on behind the scenes during the rebuild of this website.

Parliament Week is an annual, week-long set of events around the UK that has taken place for the past few years. The team who organise the whole programme had to cope with an inflexible CMS for their website, in addition to all the administrative tasks of running such a site; liaising with partners, managing online submissions and updating manual spreadsheets of partners and events.

Here are some snapshots from the Wayback Machine for the past 3 years:

After our first meeting with the team, our interface designer drew up some wireframes to illustrate our proposed layout and functionality for the new website. After we discussed these with the PW team, we agreed appropriate changes and built a working prototype in WordPress, which we tested with members of the public. We made changes based on the results and then applied new visual designs to the prototype site, used for a second round of user tests.

Homepage

We designed the new homepage wireframes, copying the carousel from the old site, with space for a full-width image to highlight events. The team wanted partners to be able to submit their own events on the site. With hundreds of events anticipated, expecting partners to upload a high resolution image in large enough dimensions to fit a big desktop screen, was a little over-ambitious on our part. And we don’t like carousels, anyway. So we replaced this main section of the homepage with metro boxes, which we had used successfully on other websites. I think that using fixed boxes is better than a moving carousel. Boxes show everything at once. They don’t move without cause.

After the first round of user testing, the PW team wanted to make it easier for partners to get on board and so for the second round of user tests (with the visual design in place) we replaced the space for blog posts with an area for partners. There wouldn’t be many up to date blog posts on the site when the new site launched.

We also made a few usability tweaks. Some people didn’t scroll. They thought the top 6 boxes were the homepage. This didn’t happen in the prototype testing, but the boxes in the visual design appeared in a solid band of colour and on desktop monitors, it filled the screen nicely, but some people didn’t realise that there was more beneath. With a bit of resizing and some jaunty angles, this improved in subsequent tests.

Events

The wireframe of the events page contained a full-width, interactive Google map. We used this in the first rounds of user testing. It soon became clear that people had trouble scrolling. With a wheelie mouse, people got stuck while trying to scroll the page and ended up scrolling the map and making it zoom in and out. We rearranged the layout for the second round of user tests.

We also needed to come up with a way of showing events that didn’t last for a single day, but which straddled days, weeks or even months. But Parliament Week is only on for a week, I hear you say. However, some organisations have longer promotions that last for a month or two before the actual week. So we split the events listing page into 2 columns showing single day events on the left and longer events on the right. Single day events list in date order and as events pass they will drop off into the archive. Longer events list in order of those ending soonest.

The interface allows people to filter the events, down to a single day. In this case, the left hand column shows all the events on that day and the right hand columns shows all events which are taking place on that day but which might have started weeks earlier or finish days later.

And we had the same issue as the homepage with the “below the fold” problem. After filtering events on a location and getting the results, people thought that the map next to the filter criteria was all that was available. They didn’t scroll down the page to see the resulting list of filtered events. The positioning of the results area felt like an end of page boundary. Again, a bit of resizing and literal signposting improved this.

I thought “below the fold” had gone away. I thought we didn’t have to worry about that golden line any more, because people scroll. And of course, they do. But it just shows how design can either help or hinder the user flow depending on the cognitive aspects.

Event submission form

Prototype event submission form
Prototype event submission form
Final event sumb
Final event submission form

In the initial round of user testing, people needed a little more help with filling out the form. They made incorrect assumptions about the address, entering their organisation address instead of the event venue and they were confused about dates. The new form, while having more text, aims to be more helpful.

After launch

The Parliament Week 2014 website is now gathering momentum with under 2 months left until the week of events this year. We launched with a few events already in place and it has been satisfying to see new pins appearing on the events map as partners sign up and submit their events.

The online partner registration and event submission forms are streamlining the former administrative processes. The team now just have to tick a box and publish an event. They can export up to date spreadsheets of the data. And notification emails are handled automatically.

And the team will soon be reaping their value for money rewards again, as we work with them to reuse the custom WordPress theme for a similar website, saving substantial development time and having learned a few lessons along the way. This time the website is based around tea parties and commemorating 800 years since the Magna Carta – ‘The Great Charter of the Liberties of England.’  Hurrah!

 

Tags vs Keywords

Many of our clients use WordPress-driven websites and intranets. Tags are a core feature of WordPress. Keywords are not. But we do use them on intranets.

Keywords on the web

Keywords don’t really pack much punch on the web. They were initially designed to aid search engines in indexing content but due to abuse, search engines have long since ignored them.

Keywords on the intranet

Keywords on the intranet are a great way for the intranet search engine to index words that wouldn’t otherwise appear on a page. Employee restaurant, staff canteen, lunch menu, food and drink are all words that people might use to search for the lunch menu. Not all of these words will appear on that page. So we use keywords to help people that search using words that do not appear in the main content of a page. And although the search engine will read and index the keywords, these keywords will not appear on the front end pages.

You don’t need to repeat words that already exist in the page title or body content again in keywords. Keywords are not obligatory. It’s fine to leave them blank. And I stress this because some publishers will enter any words they can if they feel they have to and this can damage search results.

Don’t include your company name as a keyword. It’s really not necessary. Unless the page is specifically about your company and this is the page that should appear in search results if someone, on your company intranet, searches for your company name.

When you add a keyword, think of it as an instruction to the search engine to include the page as a possible entry in search results when anyone uses the word in a search query. Be very specific.

Keywords are also a good way of promoting internal campaigns. Include the message Search for “funderpants” in an offline poster and make sure that you have the obscure/unique word as a keyword in one intranet page only.  Then it will appear all alone at the top of the search results pages, if staff search.

Tags on the intranet

Tags are not an alternative to keywords. Tags are for grouping  content. They are not designed solely for the search engine to index. And they are visible in the front end.

Ideally, you should apply a single tag to more than one page. For example, you can apply the tag “meeting” to pages for booking a meeting room, ordering catering for a meeting, collecting guests for a meeting and how to operate the projector.

When adding tags to a page, check that a similar tag doesn’t already exist to avoid creating different variations. If you create a new tag, check which other pages might also benefit from the same tag.

Tags on the web

The only benefit of this shotgun approach of adding lots of tags is that the visible, front-end content will get indexed. On the web, this is a benefit as keywords are generally ignored.

Managing tags

I find, in practice, that publishers fall into two categories. Those who organise and manage their tags, and those who treat tags as keywords.

Those who manage their tags will build a controlled vocabulary of words and terms that can be used. On the DCMS intranet there are just 65 tags to cover all the content. You click a tag; you get a nice bunch of pages relating to that tag.

Those who treat tags as keywords add them in a less controlled manner. This can result in having hundreds of tags, which in itself is not necessarily a bad thing. It produces pages with lots of tags. But it also produces lots of single tags that apply to only one page. Groupings happen by chance.  Variations on words start to appear, on the frontend too.  Tag clouds become very flat, as all the singleton tags appear at the same size and colour.  You click a tag; you get one page, or a few if you’re lucky.

On the intranet, it’s best to use tags to group content, and keywords to aid the search engine.

GovIntranet beta release 3

This release is a result of development over the past few months for two government departments and includes new content types, taxonomies and an updated look and feel.

Bootstrap

We’ve rebuilt the WordPress theme in Bootstrap 3, so you can compile your own version of Bootstrap to get a custom look and feel. The core styling is inspired by recent changes to GOV.UK and you can customise in theme settings.

Bootstrap gives us 4 viewports and we’ve optimised for large desktop, small desktop/tablet landscape, tablet portrait and smartphone.

Events

A new content type allowing you to add dates, times and descriptions for forthcoming events. There are templates for future and archived events, with auto-expiry of past events and option to integrate online booking forms, with autocompletion if you allow staff to login.

There’s also a new widget to spotlight forthcoming events with featured images.

Document finder

Just an idea in the last release of GovIntranet, the document finder is a new feature allowing lookup by document type and category.

Jargon buster

Also known as the glossary, this new template allows you to spell out acronyms and complex terminology.

A to Z

Some staff search, some prefer to click menus, and lots still go for an alphabetic index. The A to Z taxonomy and templates allow you to add pages to the index easily and will display intelligently on the front end.

Page templates

New templates allow for “old-style” left-hand navigation. There are also variations of left and right columns and full-width layouts.

Updated widgets

There are new and updated widgets integrating pages and events.

Search

By switching on some options, tweaking Relevanssi settings and using our modified search autocomplete plugin, the search box gets better. Search suggestions based on live content give quick access to pages. A perfect match search goes direct to the page like an automated “I’m feeling lucky!” And contextual results help give a scent of what’s behind the click.

Guides

New layout for guides giving more room for content.

People finder

Sadly, a people finder section didn’t make it into the mix this time. I’ve started work on it and you may find remnants of code in the beta where I’ve been experimenting. Hopefully more on this soon.

GovIntranetters

For our clients and for the open source community, because we believe that making things open makes things better, we have started a help site for theme users.

Over at GovIntranetters we hope you will join in the online discussions and share your experiences with others using the theme.

It’s work in progress, but you’ll already find lots more information about the theme, tips for using it, setup and configuration guides and hopefully some friendly faces too.

Other sites

Relevanssi WordPress plugin: intranet search comparisons

As part of the forthcoming iteration of the GovIntranet WordPress theme, I’ve been testing search results. I compared search results on 2 client intranets, each using their own content, but different search implementations:

Both intranets use bespoke WordPress themes with the Relevanssi search plugin. Intranet A has some custom code to integrate documents into search results.

So, fasten your seatbelts for a bumper ride through 21 of my top intranet search queries, typical of any government departmental intranet. Screenshots show page 1 of the search results for the two different intranets. I’ve anonymised the results where appropriate.

1. Book a meeting room

Grab that room while it’s still vacant. The room booking facility is a top ranker for office-based staff. Or is it?

Intranet A: book a meeting room
Intranet A: book a meeting room
Intranet B: book a meeting room
Intranet B: book a meeting room
2. Eye test

One of my personal favourites. You fill out a form, send it to HR. They send you a voucher. You take it to the optician when you get your annual eye test. All paid for by Her Majesty’s ever-so generous Government.

Intranet A: eye test
Intranet A: eye test
Intranet B: eye test - goes direct to required page
Intranet B: eye test – goes direct to required page

3. Maternity leave

You’re pregnant. You’ve got a lot to think about and plan for. Wouldn’t it be nice if your intranet gave you the facts straight?

Intranet A: maternity leave
Intranet A: maternity leave
Intranet B: maternity leave
Intranet B: maternity leave

4. Guidelines on blogging

For review, before you boldy put finger to keyboard.
Intranet A: guidelines on blogging
Intranet A: guidelines on blogging
Intranet B: guidelines on blogging
Intranet B: guidelines on blogging

5. Replace my building pass

You went for that *just one drink* after work and you arrive at the office the next day knowing you’re in the shit.

Intranet A: replace my building pass
Intranet A: replace my building pass
Intranet B: replace my building pass
Intranet B: replace my building pass

6. Claim expenses

You’ve been for that glorious, 3-night stay in Sunningdale.
Intranet A: claim expenses
Intranet A: claim expenses
Intranet B: claim expenses
Intranet B: claim expenses

7. GPC

For those of you who don’t work in government or who don’t speak acronym, this is the Government Procurement Card. A credit card for the responsible people with a grand spending power. To be fair, it’s an acronym that is commonly used.
Intranet A: gpc
Intranet A: gpc
Intranet B: gpc
Intranet B: gpc

8. Rail tickets

Online booking please; it’s digital by default!
Intranet A: rail tickets
Intranet A: rail tickets
Intranet B: rail tickets
Intranet B: rail tickets

9. Induction for new staff

A must-have for every intranet. How do you welcome your new joiners?
Intranet A: induction for new staff
Intranet A: induction for new staff
Intranet B: induction for new staff
Intranet B: induction for new staff

10. Gifts and hospitality

Yup, even that bottle of Harvey’s Bristol Cream you got at Christmas from the agency you worked with, you gotta declare it.

Intranet A: gifts and hospitality
Intranet A: gifts and hospitality
Intranet B: gifts and hospitality
Intranet B: gifts and hospitality

11. Voicemail

How to setup your friendly recording to play to your beloved colleagues when you can’t be arsed to pick up.
Intranet A: voicemail
Intranet A: voicemail
Intranet B: voicemail
Intranet B: voicemail

12. Box times

Is this something to do with the diet coke advert? No, it’s the deadline for submitting something to a minister before they slope off for a nice Sancerre.
Intranet A: box times
Intranet A: box times
Intranet B: box times
Intranet B: box times

13. Wisleblowing

How good does your search engine deal with typos?
Intranet A: wisleblowing
Intranet A: wisleblowing
Intranet B: wisleblowing
Intranet B: wisleblowing

14. Written Ministerial Statements

Terribly exciting stuff, I know. Such is the life of a Civil Servant.
Intranet A: written ministerial statements
Intranet A: written ministerial statements
Intranet B: written ministerial statements
Intranet B: written ministerial statements

15. Risk register

For your Queen of Prince II or your agile scrum master, who’ll need to be armed with one of these.
Intranet A: risk register
Intranet A: risk register
Intranet B: risk register
Intranet B: risk register

16. Translate into Welsh

Intranet A: translate into welsh
Intranet A: translate into welsh
Intranet B: translate into welsh - goes direct to required page
Intranet B: translate into welsh – goes direct to required page

17. Whistleblowing

For those moments when you just have to do the right thing.
Intranet A: whistleblowing
Intranet A: whistleblowing
Intranet B: whisteblowing - goes direct to required page
Intranet B: whisteblowing – goes direct to required page

18. Payslip

The intranet, filled with topics closest to your heart.
Intranet A: payslip
Intranet A: payslip
Intranet B: payslip
Intranet B: payslip

19. Season ticket loan

Can’t stand queuing for your ticket at the station? Get an annual ticket and pay it off in 10 easy monthly payday deductions.
Intranet A: season ticket loan
Intranet A: season ticket loan
Intranet B: season ticket loan
Intranet B: season ticket loan

20. T&S

Because we all need a little T&S.
Intranet A: t&s
Intranet A: t&s
Intranet B: t&s
Intranet B: t&s

21. Lunch menu

A guy walks into a restaurant and says to the waiter, “Can I see what you had on your menu three weeks ago?”
Intranet A: lunch menu
Intranet A: lunch menu
Intranet B: lunch menu
Intranet B: lunch menu

Analysis

So which intranet performed best and why? And how could we make improvements?

Content quality

There is only so much that a search engine can do. The quality of search results largely depends on the quality of the content. Garbage in, garbage out. The quality of the content on intranet B shines through in the search results. Pages are written in plain English using active language. Page titles are concise.

Documents in search results

In Intranet A, we see a profusion of documents in the results, often containing hyphens and dot docs and brackets and dates. Staff will find these hard to sift through because the sheer number of documents returned tends to cloud the search results.

In 2002, I decided to turn off documents in search results on the London Underground intranet, subscribing to the belief that if a document is important enough then there will be an HTML page that mentions it. Search results improved dramatically.

The number of results returned

A basic usability rule is that less choice improves efficiency. So it follows that fewer entries in the search results page will make it easier and faster for staff to make a choice. Few people will go past page 1.

Intranet A: 548 total results, 6 out of 20 searches with just one page of results

Intranet B: 195 total results, 16 out of 20 searches with just one page of results

Direct hits

Even better than less choice is not having to make a choice at all. For those searches that produce a single result, Intranet B will take staff direct to the page in question, skipping the search results page. Skipping the time taken to scan a search results page, make a choice and click. Intranet A has 18 results for an eye test. Just how many pages do you need on your intranet about getting an eye test? Just one.

Social content

Intranet A includes social content generated by staff in forums and crowdsourcing areas.

Intranet B only includes core intranet pages by default. For social content, staff need to search from within the forums.

While there is no question that social, staff-generated content is good for all sorts of reasons, including it in search results by default can cloud the results. In the examples above, on Intranet A, it would appear that searching for any financial information returns a post about a sports day event, consistently in first position.

I still believe that there is a definite line between corporate, official content and social, staff-generated content. And that each has its uses.

Context and design

Intranet A uses breadcrumbs to give context to the search result title. While this can be useful, it becomes a problem when the page title refers to an item 9 levels down in the structured navigation.

Intranet A shows no clear date information telling you when the page was updated and there is no snippet text to help give you the scent of what you’ll get if you click.

Intranet B shows the type of content, category and contextual information where appropriate. Date information varies upon the type of content, so for example, we’ll show the last modified date for tasks but the first published date for news stories.

Content housekeeping

It’s really up to content publishers to make sure that old information isn’t left lying around. Regular housekeeping and clear procedures can help to keep search results free from useless information. So if you publish a lunch menu each week, why not keep the URL the same so that staff can bookmark the page and always return to it? Why publish multiple versions of the document with different URLs and include them all in search results when they become redundant?

Configuration

While I would say that content is the main area that you can use to improve search results, there is a fair bit that you can do behind the scenes to configure how the search engine works. Do you promote more recent content? Do you provide synonyms for words? What about search suggestions on typos or demoting old news stories? How does using an AND search compare to using an OR search?

Advanced search and filtering

Nice to note that neither intranet uses advanced search or filtering. In my experience of user testing, such options only add confusion. It is rare that you’ll get a member of staff wanting to do complex searches. The majority don’t need it, and including it only serves to provide yet more choice.

Conclusion

A budget search solution combined with tip-top content can produce very good search results, making it faster to find guidance and information and making staff more productive.

How do your top searches perform?

Related blogposts

Intranet CMS compare and contrast

I’ve been reminiscing over my time working on the Justice intranet and it got me thinking about the differences between the hoops and obstacles that I used to have to put up with compared to some of the standard issue features of using WordPress as a CMS today.

It’s been with great joy that I have witnessed government departments and other bodies choosing WordPress as the CMS for their websites and intranets. I am filled with glee when they pick a supplier from the Government Cloudstore for their hosting. Why? Because I spent years working on an intranet in a very restrictive framework, backed by very expensive IT contracts. My older blog posts are filled with gripes about not being able to use PHP or a database, and tales of 60K quotes from IT suppliers to flick a switch on our Google Search Appliance to allow it talk to another internal database.

Happily, I’m in a different world now, where people have more sense than money. This blog post is not a plug for WordPress, but rather a stroll down Memory Lane with a *compare and contrast* of how things used to (still do?) work at MoJ using a combination of manual Dreamweaver publishing and RedDot CMS, with the intranets that I am developing now. Aside from the main benefits of an open source CMS, here are some of the time-saving, money-saving differences that stick out for me…

New stories

BEFORE: We managed our news stories separately from the *static* intranet page content, in a clunky Red Dot CMS, which, like most things back then, pushed the developers to their limits in terms of dealing with the limited technology. We managed to build a system to allow editors to add news stories with featured images, thumbnails and galleries, featured on the homepage, with monthly archives.


We’d often source photos from press office shots from a flip camera or from various campaign graphics that had been developed in-house. Intranet editors would then have to prepare photos and images using a graphics package (Fireworks, which I still love), creating different sizes for use across the intranet as a feature photo or thumbnail, and getting the file format correct and the exact dimensions as required for each of the different image placements. The intranet was designed before *responsive* and *mobile first* were around, and also for a pretty standard desktop viewport across the organisation.

But it took effort and time to add an image and to create the page and make sure it was listed in the monthly archive. News stories with galleries of photos soon became few and far between because the effort required to resize and crop images for, let’s say, a 12 photo gallery, and upload them and attach them to a news story, would be considerable. And with less and less staff dedicated to do the job, the functionality that we spent days developing, didn’t get used.

Publishers had to rely on developers to manually update the monthly calendar listings at the change of every month, and year. 


And I never managed to get images to appear in search results.

AFTER: Title. Body copy. Featured image. Publish.

Working with images in WordPress is a doddle. In its simplest form, you just drag and drop from your local copy to the media library. Images are automatically resized for use across the intranet. You can crop, resize and rotate images directly within WordPress so there is no need for the expense of graphic packages, not to mention the appalling process of actually getting a bit of software installed on your PC. Bulk uploads are easy. As are creating a gallery or a carousel. It takes minutes. Thumbnail images appear wherever the page is listed across the site. 
 
Archive listings come as standard. As do images in search results 🙂

Broken link checker

BEFORE: The only way to do a comprehensive check for broken links was to run a manual scan of the whole local copy of the intranet in Dreamweaver. To do an absolute complete scan you’d have to download all the news stories (managed in a separate Red Dot CMS) locally too. And there could be 3 new news stories a day? The scan took hours on the super-fast laptops. As an alternative to this, we relied on reports that I had configured in Google Analytics to capture broken links, reporting the previous day.


AFTER: We use the Broken Links Checker plugin that runs behind the scenes and sends email alerts to individual publishers with details of their problem page. There’s no overhead in time wasted by the central team doing manual scans. The link checker also checks external links, so when you have to publish a link to the Cabinet Office website, which inevitably changes 10 minutes later, staff will see a greyed out link with a line through it until editors can get the *final final* link to the document with yet another version number.

Working with other editors

BEFORE: If you happened to be working on the same page as someone else, then it was pot luck who saved and overwrote the file. I myself was guilty of completely trashing a morning of developer’s work – sorry Matt! We did try to implement Dreamweaver file-locking for individual publishers, but it was such a palaver that we turned it off and I guess to this day, if you try to edit letter A of the A to Z, it will still be locked by Geoff.
 
AFTER:
WordPress multi-user locks

We have fancy locking for all editors so that two people can’t both work on the same page at the same time. And you can take control of a page if it’s still locked by someone who left the organisation. There is a revision history so you can go back in time to compare or restore previous versions. And if you delete a page, you don’t have to submit a request for change to restore from a backup and then wait; you restore from the trash.

Forms, surveys, polls

BEFORE: Adding a poll to the intranet was a major event. Someone had to code it up in confirmit, an external web survey service, and a developer would have to embed the poll into the news page. And then it had to be taken off again when voting was over.

Surveys always linked off to the external survey website and had to be created by the evaluation guy and only if we had enough credits available.

As far as online intranet forms go.. No PHP + No database = No online forms

AFTER: We use the GravityForms plugin for intranets that require forms. Editors can create their own forms using a simple visual interface, and add them to intranet pages. Or their own surveys or polls, for that matter. This is a premium plugin that we include as part of client projects, but would be covered by a GPC (government procurement card) purchase if you want to download your own. The plugin emails responses to a specified email recipient and also stores them in WordPress.

Workflow

BEFORE: I mentioned that we didn’t have file-locking on static content pages and there was certainly no workflow for static pages. But we did have workflow for the Red Dot news stories that required some editors to have their work approved before being published.

AFTER: Workflow isn’t a standard feature in WordPress, but we have used plugins for some of our clients to allow pages to be reviewed and approved before being published. To be honest, digital teams seem to be so small these days that CMS workflow is not something that we get asked for a lot. But for larger teams, or teams who need sign-off before publication, and especially for untrained, devolved intranet publishers, it’s a requirement.

Staff profiles

BEFORE: I don’t think we ever had a staff directory that was adequate. Staff always used to resort to looking up a phone number in their local Outlook email client. The online directory was never up to date. I don’t know what the official figures are, but I clocked at least a 6% staff turnover from our Google Analytics reports. That’s a lot of people to add and delete from the database, regularly. I think at most, at one point, we had 1 person responsible for this task. And then it fell into disrepair.

In fact, I don’t think I’ve ever worked on an intranet with a useful, functioning staff directory. I’ve seen them. I remember being wowed by Cheryl Lesser’s tour of the Thomson Reuters colleague finder a few years back. And it is my dream to create one for an intranet and to start playing around with social features.

AFTER: With the uptake of the GovIntranet WordPress theme it looks like I finally have the chance to work on a staff directory. With PHP and a database *raspberry*

It’s an intranet feature that is very close to my heart and one that I look forward to knuckling down with. Hmm, a GOV.UK-style people finder…