Metropolitan Police multiple intranet site redesigns | Work

Skip down to:

Project notes
Images

Project notes

Project type

Actually several projects of a similar nature, and for the same client, which it seemed logical to group together. Each involved the design or redesign of a directorate- or project-specific sub site of the Metropolitan Police Service’s internal intranet.

Web address

The MPS intranet is, understandably, a secure internal network. The the sites discussed here, therefore, cannot be viewed from outside.

This is the MPS public home page.

Requirements

The requirements for each site varied; some were visual revamps of existing site templates; these only required ‘look and feel’ design and the front-end code (html and css) necessary to implement it. Some, such as the Policing Diversity intranet site, were brand new projects within the MPS and, having no pre-existing content, required the information architecture to be designed as well.

Challenges

The Metropolitan Police Service is a large and highly complex organisation and, as with any such organisation, the constantly changing internal dynamic played a big part in the project at hand. Changes in one department could means changes in the information architecture of a completely different department’s site, which in turn meant that the design project’s goal posts could move without warning.

This could occasionally be frustrating, but Shark Attack always managed to accommodate the changes. And although some of these changes (such as the request to add what we felt to be a superfluous ‘Welcome’ splash screen to one site) might be seen as compromising the original design vision, other such changes, eg. a restructuring of the directorate’s departments, in fact improved the design. So it was definitely a case of ‘swings and roundabouts’.

The other big challenge was to create designs that would fit within the MPS’ content management system (CMS) and its nested templates. Each site has its own template that is nested within the system-wide generic template. Editors can of course update the site through the CMS but their options when it comes to creating markup are, of course, limited.

Solution

The majority of sites on the MPS intranet are functional but they are not especially attractive. Shark Attack wanted to retain the simplicity but also to raise the bar a little where visual nicety was concerned. Things don’t need to be clunky to function, and there is no reason why, if handled correctly, improving the look of something should detract from its usability.

The solutions for each site varied, but they did all slot into the framework of MPS intranet’s CMS and its templates. In this regard we were indebted to the eComms team at the Directorate of Information who provided invaluable assistance in bringing us up to speed on what their CMS could and could not do.

As noted above, a major consideration when designing for any CMS-driven site is to limit the content styling to the HTML that the editing interface can create. There is no point using fancy CSS selectors to style the editor’s text content using html classes and less-than-common element tags if the editing interface does not give the editor the ability to create those classes and tags in the first place.

As a result, much of the design work went into finding innovative workaround solutions for some feature that we wanted to implement and felt would greatly enhance the overall user experience, but which the CMS did not support. What is undeniable is that the results improved with each successive project that we undertook for the client, because over time the depth of our understanding of the limitations and idiosyncrasies of the CMS improved.

Amusing trivia

One of the departments called us in because:

The wanted their site redesigned, and
We came highly recommended

They’d seen another site on the intranet that they really liked, they said, and wanted it to have the same sort of clean, elegant, usable feel to it. They didn’t know who had designed the site, but that look was what they were looking for.

The amusing part was that Shark Attack had designed the site that they wanted theirs to look like.

Back to tabs

The MPS intranet is a private internal network, and given the sensitive nature of the data it contains, security must necessarily be of of paramount importance. For this reason, care has been taken to sanitise any screenshots presented here; any specific information that might be readable in the screenshots is, in fact, merely dummy content and is in no way actual data from the sites concerned.

Images

Click an image to open a larger version in its own window.

Directorate of Legal Services

The Directorate of Legal Services (DLS) site was developed hard on the heels of Shark Attack’s design for their logo and departmental branding, and was the department’s flagship chance to show of their new look.

Every site on the intranet has a top banner, most being simply flat colours with the department’s name set in Arial. the client was very keen for their banner to be more eye-catching and feel more sophisticated than that. Once we had talked them out of the idea of having spinning logos and moving type, we put together some ideas which evolved into the banner seen here. The muted colours were deliberately chosen invite that classic image of green leather-topped desks without actually going as far as showing green leather. The gavel speaks for itself, of course.

The Directorate has numerous sub-departments and it was important to differentiate visually between them. A Colour system was worked out, linking the side navigation menu, the departmental ID strip at the top of each content section, and the site map page.

Other than that, design centred around information architecture and splitting information into sensible chunks. Keeping to a strict typographical system of legible body copy with strong headers and making positive use of white space with images regegated to the right-hand side column increased page scan-ability.

The Directorate had no images that they were anxious to use, so to lend the pages a bit of extra impact we sourced cheap black and white stock images of a suitably serious and business-y tone and employed them them.

Policing Diversity Online

This project was a major undertaking, not so much in terms of complex design, but in terms of scale of data entry. The site is an online reference source on all matters of Diversity that MPS staff can refer to in order to advise and support officers out on the beat. If an officer needs to know the correct protocols to abide by before entering Hindu temple, say, then he or she can radio in and know that the support staff have access to the information at the click of a mouse.

That’s a lot of information to code up and enter into the system.

It’s also a lot of information to navigate, but for the sake of simplicity we felt that it was important to keep the navigation menu to no more than three levels of hierarchy.

The results were very successful and attracted much favourable comment across the MPS as a whole.

Diversity & Citizen Focus Directorate

In this case it might be interesting to see a snapshot of the evolutionary process at work.

Page banners

For this site we pushed for a pretty clean and fuss-free banner. The Diversity and Citizen Focus Directorate of course deals to an enormous extent with the different ‘colours’ of society — whether that metaphor refers to race, religion, gender, sexuality, or whatever. For this very reason we wanted to avoid garish, colourful visuals and to concentrate on a largely monochrome interface. In so doing, the splashes of colour that we did include would have all the more impact.

The banner proved to be a good case in point; none of these banners made the cut with the client.

Page designs

The demands on the page layout were quite complex, with a substantial amount of information to place in a side menu (the CMS and templating system did not easily permit navigation to appear anywhere else than in this left hand column). All departments had to be listed, but the overall Directorate-specific information had to be placed at the top of the page.

Additionally, the client wanted certain ‘QuickLinks’ placed within easy reach of the top of the page. And some of these were more important than others.

In these screenshots you can see how we tried different ways to accommodate these various demand on the limited real estate. Some were more successful than others.

Final solution

Notice anything?

Yep, this layout bears very little resemblance to any of the designs that came before it.

After all the preliminary designs, the client announced that they wanted the site to look like a tweaked version of the Policing Diversity site (see above). Since that site fell under the umbrella of the Diversity & Citizen Focus Directorate, the visual similarities would make a certain sense but it still felt like the tail wagging the dog a little bit.

Never mind. We went back to our Policing Diversity layout, improved it slightly in ways that would not have worked for the earlier project, and the client was very happy.

Back to tabs