Metropolitan Police Service

National Legal Services Framework website

Skip down to:

Project notes

Project type

A membership-based site to enable a third-party procurement framework for the MPS’s Directorate of Legal Services.

Web address


This web site needed to have a multi-tiered membership system, catering both to service providers and service users, with site admins sitting above the rest. The different groups needed to have access to differing (but overlapping) areas of site content. Groups also needed to have differing content creation/editing priviliges.


The various interacting factors in this site made for an intricate information architecture. Services provided, subdivided by types of service. Service providers themselves, subdivided by the services that they offer. Events, subdivided by type of event and organiser. News posts. Framework update announcements. And more. The result was a complicated Venn diagram

In addition to the the features noted above, the site needed to include a ratings system, which all membership groups could see, but to which only one group of site members could post.


In a complex project such as this much of the effort is expended at the planning stage — more than some clients (not these ones, I hasten to add) might consider reasonable. Clients often want to quickly get to the stage where they can start seeing pretty things on the screen, and the danger comes when the designer skips vital preparatory work in order to grant the client’s wish.

One of the mottos that we at Shark Attack live by is ‘measure twice, cut once’. It holds true in most situations and never more so than in web site design. Sites should be built working from the content outward – so the visual niceties are the last thing to get done. Much of the design in web design is not visual design, it is information design.

Just as important as (and tied into) the way the information architecture would be structured was the choice of content management system. I knew that the client would not want the visual dsign of the site to be limited by the CMS; this, plus the need for multi-group management, made ExpressionEngine an obvious choice — it’s robust, it has the necessary membership features, and it allows absolute free reign when it comes to visual design. It also has solid support, both from the CMS’ own developers and from those of the many feature-extending plugins available.

This site has most of its pages secured behind a membership-only system. For this reason, any screenshots presented here were taken during the development process, not from the live site. Any specific information that might be readable in the screenshots (other than the ‘Welcome to NLSF’ and ‘FAQs’ pages, which is publicly accessible) is, in fact, merely dummy content and is in no way actual data from the site itself.



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

Public pages

Only two pages of the site are available without logging in as a member: the Home page and the FAQs. The choice of purple was pre-determined by the client — they’d already had a load of purple promotional ballpoint pens made up!

Member-only pages

In these pages you can maybe start to see the amount of complexity in the data structuring. News and Updates can be viewed according to which type of news entry is it, or they can al be viewed en-mass subdivided according to what type of legal service they relate to.

On the Lots page the feedback given to different teams is summarised dynamically in real time, so that users looking to commission services can see at a glance how specific teams have been rated for a given Lot (type of service).

NB. Let us restate here that the ratings shown here are fictitious. They in no way reflect the competencies of the legal firms involved, and are generated purely from dummy data used during the site’s development, before any actual feedback had been submitted.

Events can be viewed according to Type, Organiser, or related Legal service; within these restrictions further filtering is available.

Of course, providing this level of flexibility creates a need to complex conditional logic in the page templates. What does that mean? Well, it means that there are lots of branching if this, then do this-type instructions operating behind the scenes. Sometimes the client wonders why creating the code for something takes more than half an hour; they forget that their request of “can we have the option of viewing the data broken down by x, y and z” means that code has to be written to accommodate every combination and permutation of user choices, which, as any mathematician will tell you, quickly adds up.

case studies

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