Rick Lecoat A Case study

Case study

  • The logo of the National Legal Services Framework, showing its initialism, the full name and a stylised map of the UK with England Wales and Northern Ireland highlighted

    Metropolitan Police Service Responsive website and associated promotional campaign

    A project to create a website for the National Legal Services Framework, along with campaign materials to promote the Framework website to other police services and public bodies who would be using it.

    • Art direction

    A project to create a website for the National Legal Services Framework, along with campaign materials to promote the Framework website to other police services and public bodies who would be using it.

  • branding details showing the font and colour choices for the National Legal Services Framework brand design.

    Metropolitan Police Service NLSF brand fonts & colours

    The National Legal Services Framework required a brand of its own. Brand elements — fonts and colours — were kept to a stripped-down minimum to simplify the implementation.

    • Graphic design
    • Brand identity

    The National Legal Services Framework required a brand of its own. Brand elements — fonts and colours — were kept to a stripped-down minimum to simplify the implementation.

  • Four versions of the NLSF logo, showing it against a white background and reversed out against purple, and with and without its tagline

    Metropolitan Police Service NLSF logo development

    The logo design showcased the areas of the UK where the NLSF operated and came with and without a tagline (“Your framework, your choice”).

    • Art direction
    • Graphic design
    • Brand identity

    The logo design showcased the areas of the UK where the NLSF operated and came with and without a tagline (“Your framework, your choice”).

  • The National Legal Services Framework website being displayed on a desktop computer screen, on a tablet, and on a mobile phone

    Metropolitan Police Service National Legal Services Framework
    Responsive website design

    The key element of the project was the National Legal Services Framework website itself. The design had to be responsive, accessible and engaging, with solid UX and high usability.

    • Web design
    • HTML/CSS
    • Javascript
    • ExpressionEngine
    • Accessibility
    • UX

    The key element of the project was the National Legal Services Framework website itself. The design had to be responsive, accessible and engaging, with solid UX and high usability.

  • A patchwork of interconnected hand-written flip chart pages mapping out the functionality requirements of the website

    Metropolitan Police Service National Legal Services Framework
    Original brief

    The original client brief was a little on the sketchy side, but I hammered out the website functionality requirements in a round-table meeting of all the stakeholders.

    • User research
    • UX

    The original client brief was a little on the sketchy side, but I hammered out the website functionality requirements in a round-table meeting of all the stakeholders.

  • A flow diagram showing the information architecture and functionality of the National Legal Services Framework website

    Metropolitan Police Service National Legal Services Framework
    Information Architecture

    From the original brief a more cohesive map of site functionality, information architecture and user flow was then developed.

    • Web design
    • UX

    From the original brief a more cohesive map of site functionality, information architecture and user flow was then developed.

  • Three separate diagrams showing the expanded information architecture and user journeys depending on whether the user is logged in or not

    Metropolitan Police Service National Legal Services Framework
    Information Architecture

    This information architecture was then expanded and evolved to accommodate separate user journeys depending upon whether the site visitor was logged into or out of the site’s membership system (and was later enhanced to accommodate multiple tiers of site membership).

    • Web design
    • UX

    This information architecture was then expanded and evolved to accommodate separate user journeys depending upon whether the site visitor was logged into or out of the site’s membership system (and was later enhanced to accommodate multiple tiers of site membership).

  • Diagram showing the interrelationships between the web site's different entry types within the content management system

    Metropolitan Police Service National Legal Services Framework
    Information Architecture

    Different entry types within the ExpressionEngine CMS needed to relate to, and interact with, each other in a variety of ways. These relationships had to be mapped and implemented.

    • Web design
    • ExpressionEngine

    Different entry types within the ExpressionEngine CMS needed to relate to, and interact with, each other in a variety of ways. These relationships had to be mapped and implemented.

  • A series of six UX wireframe designs for the National Legal Service Framework website

    Metropolitan Police Service National Legal Services Framework
    Wireframes and UX

    Functionality and usability requirements come together in wireframe designs that prioritise UX whilst retaining the ability to work as a responsive design.

    • Web design
    • UX

    Functionality and usability requirements come together in wireframe designs that prioritise UX whilst retaining the ability to work as a responsive design.

  • Four views of the National Legal Services Framework website; on a mobile phone, on a tablet (portrait and landscape) and on a desktop browser.

    Metropolitan Police Service National Legal Services Framework
    Responsive web site design

    The site was built to be fully responsive and ‘mobile-first’ — loading smaller assets first and only requesting larger, more bandwidth-heavy, assets if the screen size demanded it.

    • Graphic design
    • Web design
    • HTML/CSS
    • Accessibility
    • UX

    The site was built to be fully responsive and ‘mobile-first’ — loading smaller assets first and only requesting larger, more bandwidth-heavy, assets if the screen size demanded it.

  • Three views of the NLSF website showing the login form and two variants, Logged in and Guest, of the contact form

    Metropolitan Police Service National Legal Services Framework
    Responsive web site design

    Site member dialogue panels such as the Log-in and Contact forms slide down from the top and varied in content according to whether the visitor was logged in or not.

    • Brand identity
    • Web design
    • HTML/CSS
    • UX

    Site member dialogue panels such as the Log-in and Contact forms slide down from the top and varied in content according to whether the visitor was logged in or not.

  • Three screenshots showing different regions of the data entry back end of the NLSF website

    Metropolitan Police Service National Legal Services Framework
    Content Management

    Packet Tide’s ExpressionEngine was chosen as website’s the content management system on account of its reputation for excellent security (this was a site for legal professionals, after all), its ease of use, and the fact that it would not impose constraints upon the site’s design.

    • ExpressionEngine

    Packet Tide’s ExpressionEngine was chosen as website’s the content management system on account of its reputation for excellent security (this was a site for legal professionals, after all), its ease of use, and the fact that it would not impose constraints upon the site’s design.

  • Two views of data entry methods, front end and back end, on the NLSF website

    Metropolitan Police Service National Legal Services Framework
    Website data entry options

    Site users logged in via non-admin accounts would not have access to the site’s back end, so the facility to post Events, Feedback Reports, and general Updates to the site was made available to them on the front end.

    • Web design
    • HTML/CSS
    • Javascript
    • ExpressionEngine
    • Accessibility
    • UX

    Site users logged in via non-admin accounts would not have access to the site’s back end, so the facility to post Events, Feedback Reports, and general Updates to the site was made available to them on the front end.

  • Front cover and three inside spreads for a printed brochure to promote the National Legal Services Framework

    Metropolitan Police Service National Legal Services Framework
    Printed brochure

    A printed brochure promoting the benefits of the National Legal Services Framework was designed and mailed to police forces and other eligible bodies around the United Kingdom, along with accompanying posters.

    • Graphic design
    • Photo research
    • Brand identity
    • Promo materials
    • Print management

    A printed brochure promoting the benefits of the National Legal Services Framework was designed and mailed to police forces and other eligible bodies around the United Kingdom, along with accompanying posters.

  • A3 posters, in three variants, promoting the National Legal Services Framework

    Metropolitan Police Service National Legal Services Framework
    Printed Posters

    A set of three posters was designed and printed to accompany the brochure. These were modestly sized (A3) since they were intended to be placed on departmental notice boards within the various recipient police forces.

    • Graphic design
    • Photo research
    • Brand identity
    • Promo materials
    • Print management

    A set of three posters was designed and printed to accompany the brochure. These were modestly sized (A3) since they were intended to be placed on departmental notice boards within the various recipient police forces.

  • Two letterhead designs for NLSF

    Metropolitan Police Service National Legal Services Framework
    Letterhead designs

    NLSF letterheads were required for the Framework's official correspondence. Two on-brand options were designed: a purple-topped, offset litho version for physical distribution, and a simpler ‘Word template’ option for purely digital purposes.

    • Graphic design
    • Brand identity
    • Print management

    NLSF letterheads were required for the Framework's official correspondence. Two on-brand options were designed: a purple-topped, offset litho version for physical distribution, and a simpler ‘Word template’ option for purely digital purposes.

  • Two sets of three DL-sized promotional postcards. Two sets of messaging, three design variations within each set makes 6 designs in total

    Metropolitan Police Service National Legal Services Framework
    DL-sized mailshot postcards

    Two sets of postcards were created to assist in brand promotion. These were designed at DL size in order that they could be slipped in with any standard letter correspondence. Each set carried slightly different messaging, and each set came in three designs, to match with the three poster designs.

    • Graphic design
    • Photo research
    • Brand identity
    • Promo materials
    • Print management

    Two sets of postcards were created to assist in brand promotion. These were designed at DL size in order that they could be slipped in with any standard letter correspondence. Each set carried slightly different messaging, and each set came in three designs, to match with the three poster designs.

  • A promotional drinks coster for National Legal Services Framework, shown face on and at an angle.

    Metropolitan Police Service NLSF

    As an additional promo item, I designed drinks coasters that the client could send out to prospective users of the Framework. A little reminder about the service every time they picked up their coffee mug.

    • Graphic design
    • Promo materials
    • Print management

    As an additional promo item, I designed drinks coasters that the client could send out to prospective users of the Framework. A little reminder about the service every time they picked up their coffee mug.

  • Screenshot of NLSF-branded Mailchimp template alongside two other screenshots of internal CMS email coding and the resulting email as it appears in a mail client

    Metropolitan Police Service National Legal Services Framework
    Email newsletter and CMS notifications

    Electronic Direct Mailing (EDM) was carried out via a branded Mailchimp account, whilst auto-notifications from within the ExpressionEngine CMS itself (those triggered by member interactions with the website) carried as close to a matching design as the system made possible.

    • Graphic design
    • Brand identity
    • Web design
    • ExpressionEngine

    Electronic Direct Mailing (EDM) was carried out via a branded Mailchimp account, whilst auto-notifications from within the ExpressionEngine CMS itself (those triggered by member interactions with the website) carried as close to a matching design as the system made possible.

  • Eventbrite page branded with the National Legal Services Framework style.

    Metropolitan Police Service National Legal Services Framework
    Eventbrite branding

    Site users would post details of Events direct to the NLSF website, but the actual booking process would be handed off to Eventbrite. Hence, a branded presence was required there, also.

    • Graphic design
    • Brand identity
    • Web design

    Site users would post details of Events direct to the NLSF website, but the actual booking process would be handed off to Eventbrite. Hence, a branded presence was required there, also.

  • Branded Facebook and Twitter pages for the National Legal Services Framework

    Metropolitan Police Service National Legal Services Framework
    Social Media — Facebook and Twitter

    NLSF pages were set up on both Facebook and Twitter, the intention being to generate additional discussion amongst the registered NLSF members. However…

    • Graphic design
    • Brand identity

    NLSF pages were set up on both Facebook and Twitter, the intention being to generate additional discussion amongst the registered NLSF members. However…

  • A chart showing a fall-off of engagement during the time period in which NLSF social media pages were active.

    Metropolitan Police Service National Legal Services Framework
    Unintended consequences of social media

    Almost as soon as the social media pages on FB and Twitter had been established, it became clear from the site metrics that the level of user engagement on the main website was falling. Social Media was cannibalising discussions that the client would have preferred to have taken place on the site's discussion boards.

    • Graphic design
    • Brand identity

    Almost as soon as the social media pages on FB and Twitter had been established, it became clear from the site metrics that the level of user engagement on the main website was falling. Social Media was cannibalising discussions that the client would have preferred to have taken place on the site's discussion boards.

  • NLSF-branded Facebook and Twitter pages crossed out, indicating their cancellation.

    Metropolitan Police Service National Legal Services Framework
    Cancelling the FB and Twitter pages

    The client therefore chose to shut down the two social media pages in hope of driving NLSF user engagement back to the main website.

    • Graphic design
    • Brand identity

    The client therefore chose to shut down the two social media pages in hope of driving NLSF user engagement back to the main website.

  • A chart showing user engagement rising again after the social media pages were shut down. The chart shows that engagement had declined sharply during the period when they were active

    Metropolitan Police Service National Legal Services Framework
    Cancellation pays off

    The strategy of cancelling the two social media pages paid off and the trend reversed, with engagement returning to its previous levels. Whilst turning away from social media is not a policy that one would normally recommend, the overall goals with this client differed from normal; their objective was to maximise engagement on the website itself.

    • Graphic design
    • Brand identity

    The strategy of cancelling the two social media pages paid off and the trend reversed, with engagement returning to its previous levels. Whilst turning away from social media is not a policy that one would normally recommend, the overall goals with this client differed from normal; their objective was to maximise engagement on the website itself.

  • Chart showing the progressive uptake of NLSF membership across a period from 2014-2022

    Metropolitan Police Service National Legal Services Framework
    Service uptake chart

    The chart shown might look meagre in terms of numbers but the potential audience for NLSF membership was very small, consisting as it did only of procurement admins in the legal departments of UK police forces and 2 or 3 lawyers at each of the six tightly-vetted legal firms from which the Framework procured services.

    • Graphic design
    • Brand identity

    The chart shown might look meagre in terms of numbers but the potential audience for NLSF membership was very small, consisting as it did only of procurement admins in the legal departments of UK police forces and 2 or 3 lawyers at each of the six tightly-vetted legal firms from which the Framework procured services.

  • Chart showing the how the progressive uptake of NLSF membership across a period from 2014-2022 corresponded with a fall in expenditure in legal fees amongst the Frameworks participating police forces

    Metropolitan Police Service National Legal Services Framework
    Savings obtained from using the Framework

    As this chart shows, as Framework uptake rose, the expenditure on legal services by participating police forces fell. Less money from the public purse being given to lawyers. That's a good thing.

    • Graphic design
    • Brand identity

    As this chart shows, as Framework uptake rose, the expenditure on legal services by participating police forces fell. Less money from the public purse being given to lawyers. That's a good thing.

  • New NLSF marque. A purple square containing the letters N L S F in white, arrayed in a 2x2 grid formation

    Metropolitan Police Service National Legal Services Framework
    2022 website revamp

    In 2022 the client wished to update the site, both in terms of software and look-and-feel.

    • Art direction
    • Graphic design
    • Brand identity

    In 2022 the client wished to update the site, both in terms of software and look-and-feel.

  • branding details showing the font and colour choices for the updated National Legal Services Framework brand design.

    Metropolitan Police Service National Legal Services Framework
    2022 website revamp

    The update tweaked the original design, using a slightly cooler, more indigo purple and taking advantage of web fonts to select slightly more nuanced typefaces for the web site. DIN Black remained the main logo font, however.

    • Graphic design
    • Brand identity

    The update tweaked the original design, using a slightly cooler, more indigo purple and taking advantage of web fonts to select slightly more nuanced typefaces for the web site. DIN Black remained the main logo font, however.

  • Updated logo designs for the National Legal Services Framework. Two versions, one against a white background and one against a purple background

    Metropolitan Police Service National Legal Services Framework
    2022 logo revamp

    The logo needed revising because the map element was out of date (the NLSF no longer covered Northern Ireland). Rather than use a map including Northern Ireland but without a highlighted area, it was decided to drop the map entirely and to redesign the logo using a square device. The tagline was also dropped.

    • Graphic design
    • Brand identity

    The logo needed revising because the map element was out of date (the NLSF no longer covered Northern Ireland). Rather than use a map including Northern Ireland but without a highlighted area, it was decided to drop the map entirely and to redesign the logo using a square device. The tagline was also dropped.

  • Three page views of the updated NLSF website

    Metropolitan Police Service National Legal Services Framework
    2022 website revamp

    The website was given a cleaner, crisper, more modern feel, though much of the information architecture remained the same. Some sections from the older site — such as Events and Discussions — were dropped entirely, as they had been used less than anticipated.

    • Web design
    • HTML/CSS
    • Javascript
    • ExpressionEngine
    • Accessibility
    • UX

    The website was given a cleaner, crisper, more modern feel, though much of the information architecture remained the same. Some sections from the older site — such as Events and Discussions — were dropped entirely, as they had been used less than anticipated.

  • An array of 19 icons in shades of purple, depicting the sections of the National Legal Services Framework website

    Metropolitan Police Service National Legal Services Framework
    2022 website revamp

    An array of iconography was created to depict and characterise each of the new website’s content pages, utility sections and additional engagement points such as contact forms, password resets, and so on.

    • Graphic design
    • Illustration

    An array of iconography was created to depict and characterise each of the new website’s content pages, utility sections and additional engagement points such as contact forms, password resets, and so on.

  • The updated NLSF responsive website shown on three devices, a desktop computer, a tablet and a mobile phone.

    Metropolitan Police Service National Legal Services Framework
    2022 website revamp

    The completed update to the website.

    • Graphic design
    • Web design
    • HTML/CSS
    • Javascript
    • ExpressionEngine
    • Accessibility
    • UX

    The completed update to the website.