london.gov.uk for The Mayor of London

City Hall’s primary digital engagement platform is london.gov.uk. Aside from a content management system (CMS) version upgrade in 2011/12, the site had largely remained static since 2010.

The then Mayor of London made london.gov.uk a central part of his digital strategy. Research was conducted to identify the core users of the website and their needs from it.

City Hall were inspired by the digital transformation of gov.uk and adopted the principles of The Digital by Default Service Standard. The project, which spanned 18 months, was a collaborative effort between 5 different organisations. The team used Agile project management methodology, which allowed them to continuously incorporate feedback and deliver results on-time, on-budget, and without major issues.

The team was composed of 5 different organisations, including CTI Digital, who built the website.

Why Drupal was chosen: 

The previous incarnation of london.gov.uk had been built with Drupal, so City Hall already had a passing familiarity with the system. Additionally, Drupal was chosen for the following business and strategic reasons:

  • Adaptable, flexible, extendable: This is a 5-year strategic investment. Drupal is ideally suited in situations where requirements may evolve.
  • Agile Methodology: A key tenet of the delivery model was short release cycles. Drupal’s modular architecture, extensible APIs, automated testing support iterative development practices.
  • Usability & Accessibility: Drupal’s flexible user interfaces and the community's investment in accessibility compliance made the CMS a stand out choice.
  • Value for money: As a government-funded body, not only does Drupal’s lack of licensing fees qualify as a responsible use of public money, but the lack of license arrangements removes costly barriers to innovation.
  • Open source: Open Source and Open Standards removes restrictions of license fees associated with proprietary software, and means that the organisation can easily switch suppliers or bring others in to deliver other aspects as needed.
  • Performance: The site receives large, sudden spikes of traffic, especially when tickets to events like London New Year’s Firework Celebration are released. City Hall demanded a CMS with proven track record in this regard.
  • Integration points: With extensive integrations, Drupal’s ability to interface with external systems via a multitude of protocols made it an ideal choice.
  • Community = Security: The Drupal community comprises over 1,000,000 developers all of whom contribute to making the platform one of the most secure and stable platforms on the market. Updates and security patches are rolled out frequently so any vulnerabilities identified within the Drupal architecture are patched quickly and efficiently.
  • Tried & Trusted: Drupal has high adoption levels in government and public sectors. City Hall were keen adopt open source practices promoting code sharing between projects, departments and outside their organisation.

Open source software like Drupal strips away barriers to innovative development. Previously, license arrangements prevented us from innovating, not to mention IT is traditionally a solitary endeavour. The new site couldn’t have happened without gathering together with great partners, and taking advantage of the many cloud and agile capabilities that Drupal has to offer. We've achieved big cultural change not only on our site, but also in our organisation. - David Munn, Head of Information Technology at Greater London Authority

Describe the project (goals, requirements and outcome): 

As part of preparation for the new site, the City Hall commissioned research in 2013. They found:

  • Londoners who felt informed about the work of the Mayor and the City Hall had dropped from 37% in 2007 to 20% in 2011.
  • Half of Londoners did not believe they can affect local decisions.
  • Visitor traffic and engagement levels were in decline.
  • The site was unengaging with a dated look and feel.
  • Whilst attracting high proportions of traffic from mobile and tablet devices, the site lacked a responsive design.

In order to simplify the challenge of connecting with a population of 8.63 million residents with diverse opinions, backgrounds, and needs, City Hall also conducted research to define 6 user personas representing the people of London:

  • Business users - those who wish to set up or further their commercial organisation in London.
  • Residential users - people who live in London and are impacted by government policies.
  • Professionals - who work in London and have a stake in the growth, development and government policies that affect them.
  • Delivery partners - primarily London local authorities and other organisations that implement policies and serve those who live and work in London.
  • Activists - including journalists, bloggers and others who comment on work and life in London.
  • Job seekers - those who are interested in working at the City Hall.

The Mayor’s strategic goals

User personas were an invaluable resource during the development of the new website. They were crucial in informing our approach, striving towards achieving the Mayor’s strategic goals.

Using the User Personas and based off of their findings, City Hall drew up the following goals for the new site:

  • London.gov.uk should be the first place to go for information about the London government
  • They wanted a modern, open and engaging site that listens to people’s concerns
  • The tool ought to help Londoners to get involved and improve their city

Technical Challenges

Because the site had been extant for a long while and supported a tremendous amount of content, there were a number of technical challenges in building the new site and migrating content. These included:

  • Needed to merge, migrate, and account for over 30 content types
  • Extremely specific permissions were required for each content authoring group on the site. Users of each group needed to be able to create and edit content only in their own section of the site
  • Use of a Global Taxonomy with data pulled in from an external service
  • Mayor's Question Time: video meta data needed to be pulled into the site and displayed to the end user in a dynamic way
  • In my area: Providing region-specific information to Londoners
  • Modern.gov Integration: We needed content served by a third party skinned to look like london.gov.uk
  • Jobs needed to be imported into the site using feeds

In addition, because there were a large number of stakeholders with different aspirations working on the project, all of whom were located in different places, communications were sometimes an issue and bottlenecks could occur.

Development

Implementing User-Centred Service Design

By using an Agile development process, new requirements were able to emerge and evolve and the scope and features for the site could change throughout development. This allowed City Hall to put their personas’ needs first, which increased end-user satisfaction with london.gov.uk.

A key result of this was the site functionality for “In my area” (below), which was born out of user feedback and is now one of the most popular sections of london.gov.uk.

In My Area

A totally new Information Architecture

One of the largest pain-points when it came to the site design was the content. The team aimed to reduce the site’s content by 75% and turn it into compelling, multimedia content, written in plain English. This was a big job, but content modelling with Drupal allowed the team to introduce a totally new Information Architecture. Migrate Module contributed to streamlining this onerous task. The team focused on merging content types, retiring fields to remove complexity and legacy debt, and increasing the long term viability of the site while reducing cost of ownership and maintenance.

Agile Development and Atomic Design

The team used Agile project management methodology, which allowed them to continuously incorporate feedback and deliver the 18-month project on-time, on-budget, and without major problems.

During the design process, CTI utilised Atomic Design principles, which are ideally suited to achieve consistent design patterns on large and complex web sites. We continually worked with the third-party agency in charge of visual design, collaborating together to refine the design and seeking their output. Using Drupal’s extensible architecture and comprehensive automated testing ensured we maintained quality, and we used Drupal’s mobile-first functionality to build a fully responsive website.

Outcome

The redevelopment of the london.gov.uk site shifted the focus of the site to Londoners. Previously, the site had been a repository of information, but lacked any kind of user-focus. With the redevelopment, Londoners were put first in almost all decisions made. The team built the site to be an interactive resource that was easily accessible and relevant to most, if not all, of the 8.63 million people living within the city of London. The new site has been hailed as a great success by the City Hall, the people of London, and Mayorwatch.

A vast improvement on its predecessor and the next Mayor and Assembly will have a robust, scaleable platform from which to shout about their work -Mayorwatch

We switched off the old site and replaced it with the new one on 27 November, confident in the knowledge that it would be a massive improvement - Greater London Authority

The newly redesigned site is a huge success for a number of reasons:

The systems are proudly found elsewhere

The magic of Drupal is in its flexibility and reusability. For many important features, CTI Digital used pre-existing modules to enable systems integrations to help with the site’s data migration, webcasts, taxonomy, assembly papers, planning decisions, jobs feed, and search sections.

The content makes sense

The new site distilled content down from 18,000 to 3,000 pages. Building a user-focused IA and addressing language simplified content while also making it more engaging. Videos, slides, and photographs are easy to integrate on the site, which is now much more easily managed by a team of 4 and a photographer. Drupal's flexible security model permits site administrators to issue granular access permissions. This, coupled with the ease of use, has reduced training overheads tremendously. This is good news: more staff than ever before are now able to contribute content to the platform, resulting in better and more engaging content for the people of London.

It led to increased engagement

Many clients across City Hall are thrilled with the new site. Engagement with businesses and Londoners has grown as more people visit and hear of the site, and the project has been lauded as excellent work to keep politicians happy and the people informed. ‘Show and Tells’ and blogs are especially popular ways for users to find the information they need.

Mayoral Webcasts site section

Mayoral Webcasts

Blogs site section

Blog

It’s user-tested

The site was tested over about 12 days in the GDS lab by real Londoners. Users were encouraged to play with the site on desktop, tablets, and mobile devices, while the project team observed their behaviour. The user testing and feedback directly led to one of the site’s most popular sections, “In my area,” and helped the team style the site so that it would be a functional, beautiful, and intuitive resource for one of the most famous cities on earth.

It’s scalable in every way that matters

New infrastructure has meant that the site can (and does) handle larger volumes of traffic than it previously did. With increased engagement and interest in the site, a cross-department digital team has been formed to maintain the content, and they’ve taken up Agile practices and use automated testing to ensure that the site remains secure.

It’s a total transformation

The new site is a complete transformation from what the old site looked like. In response to the new site, a digital board and digital working group have both been formed, and there are future plans and funding in place for making even more improvements to the site.

Embracing modern collaborative work practices has helped the transformation of City Hall's team itself. They've gone from a boom-and-bust development style to a strategic plan in which Drupal is a key tenet. The launch of London.gov.uk is just the beginning.

Promoting London

Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

Workbench Moderation

The team at the City Hall had very specific transition states and workflows they wanted to implement on the new site and Workbench Moderation allowed us to deliver this.

OG

Being a large political organisation it was important for City Hall that content could be siloed within the site and to accomplish this we used Organic Groups, which was ultimately used to separate users into dozens of groups.

Workbench OG

Workbench OG allowed us to link the Organic Groups and Workbench Moderation functionality together and was key in realising the client requirements.

Feeds

The rebuild of london.gov.uk integrated with many services and external APIs (the Jobs are all pulled into the site via feeds for example) and feeds allowed us to seamlessly configure this functionality.

Paragraphs

Paragraphs has been used on the site to give editors a higher level of control over editorial content. The module allows them to structure content on pages in a way that suits and makes the site less prescriptive, which has always been a pain point for users of the Drupal CMS.

File hash

On the old City Hall website there was no way of knowing if a file had been uploaded to the system, so oftentimes the same thing would get uploaded dozens even hundreds of times. To prevent this we installed the file hash module that would throw an error if the user attempted to upload an file that already existed on the system.

Media

The old City Hall site used the simple Drupal out of the box file upload interface, which is fine for simple brochure sites, but for a site on the scale of the City Hall website where they have dozens of editors all working at once we needed something a bit more sophisticated and ultimately ended up going with the media modules (specifically Media 2).

Community contributions: 

Because of the bespoke nature of a lot of the requirements, no code was committed back to the community during the initial engagement. However, the Mayor's team are keen to show that open source principles are being embraced by publicly funded organisations.

In the interest of setting a new standard for transparency and community engagement, City Hall and CTI Digital are now working to identify candidates for contributed modules. The listed modules found below are the start of this process, and others will follow.

Views Smart Sort

Provides a common sort property across node types the value of which can be node type specific, e.g. basic pages use the created timestamp, press releases use the published date field and events use the event start date field, which allows Views which list aggregated content to use a single sort.

Views Smart Sort Sandbox

Media Duplicate Detect

Extension to the Media browser file upload plugin which detects if a user is uploading a file which already exists on the file system and give them the option to select that image or upload a different image.

Media Duplicate Detect Sandbox