Metropolitan Police Service

Various website designs

Skip down to:

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 sites discussed here, therefore, cannot be viewed from outside.


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.


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.


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 (rather archaic) CMS improved.

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.



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

The Directorate Of Legal Services

site screenshot site screenshot site screenshot site screenshot 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 off their new look.

Every site on the MPS 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 feel more sophisticated than that, so we put together some ideas which evolved into the banner seen here. The muted colours were deliberately chosen to invite that classic image of green leather-topped desks without being too ‘on the nose’.

A Colour system was worked out to visually differentiate between the Directorate’s various sub-departments, 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.Lastly, cheaply-sourced black and white stock images of a suitably serious tone added a bit of extra gravitas.

Policing Diversity Online Resource

site screenshot site screenshot site screenshot site screenshot 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

site screenshot We were asked to produce designs for this site as a result of the success of the Policing Diversity Online intranet site (above). After going through numerous designs, we finally got to the truth of the matter: the client really just wanted the same design as the Policing Diversity site, just with some colour tweaks. An object lesson in how clearly communicating what you want to your designer saves everybody time and money.

case studies

Copyright © 1999-2017 Shark Attack. All rights reserved.