Chatham House, home of the Royal Institute of International Affairs, is an independent policy institute and world-leading source of independent analysis, informed debate and influential ideas on how to build a prosperous and secure world for all.
They decided to rebuild their website to better promote their independent analysis and new research on international affairs, engaging with their audiences and disseminating their output as widely as possible in the interests of ultimately influencing all international decision-makers and -shapers.
They wanted a modern, responsive website with a clean design that would provide a better user experience and increased traffic. Additionally, one of the requirements was to integrate the website with their events and membership management software.
Chatham House have used Drupal as their CMS of choice since summer 2011. Their previous Drupal 6 based website was suffering from intermittent performance issues, a dated, non-responsive design and did not integrate with Chatham House’s internal membership management software.
Chatham House worked with Torchbox to produce a new, modern and responsive design on a new Drupal 7 instance. A lot of previous custom code was replaced with tried and tested combinations of contrib modules and a large, rolling content migration (more than 10,000 items) was required to move content from the old Drupal 6 site to the new Drupal 7 site.
Chatham House’s membership management software was also integrated with their new Drupal 7 website for user authentication and events content.
After extensive research, Drupal proved to be the most powerful and customisable platforms that would cope well with their complex content structure and processes.
The previous Chatham House website was powered by Drupal 6. In January 2013, Chatham House commissioned a discovery phase with an external agency for the rebuild and relaunch of the site in Drupal 7.
Chatham House and Torchbox built on this work and undertook the development of a brand new Drupal 7 website to help Chatham House meet their objectives to:
- Promote new policy ideas – publications and research projects – to our target audiences
- Measure and be seen as a primary resource for international affairs analysis, including being regarded as a source of thoughtful, insightful commentary on relevant external events
- Operate as an effective and efficient e-commerce site (for servicing conferences and membership in particular)
- Provide an engaging and valued portal for members.
The work for the project could be split into several distinct phases:
The discovery and design phase
An initial discovery phase was conducted to reaffirm the information from Chatham House’s initial discovery work and agree the objectives, scope and budget ranges of the project.
Chatham House held regular steering group meetings with internal stakeholders to confirm the requirements and ensure transparency.
The outcome was a series of requirements documentation that later fed into the design of preliminary wireframes. The requirements documentation and the wireframes were then handed over to Torchbox who used these to produce a project scoping document.
The development phase
Starting in January 2014, the development of the new website was broken into 94 individual features. The development of these features was managed using Kanban. Each feature and ad-hoc request was managed with a matching ticket in Codebase, and the overall development schedule, budget and progress managed and tracked using a Google spreadsheet as the project dashboard. This dashboard was intentionally made available to all members of the project team and could be accessed at any time. Kanban provided a means to visualise the development process by showing work in progress, limiting it to focus attention on open features and making the processes of each feature explicit and easy to follow.
Working with an agile, feature-driven approach allowed both Chatham House and Torchbox to quickly and easily amend the development schedule when necessary. This flexible approach meant any changes to the priority (or even necessity) of features could be managed without throwing the project schedule into disarray.
In conjunction with the standard project features, a concurrent series of Drupal to Drupal content migration features were scheduled to run from the very beginning of the project and intended to compliment other ongoing features in the main development stream. This approach was intended to to add immediate value and content from the start of the project. Given the content heavy nature of some of the research topics on the new website, having real content available made both prototyping new features and final acceptance testing far easier than relying on placeholder content. This content focussed process also highlighted difficulties early in the project and avoided adding unnecessary pressures towards the launch date. The migrate and migrate_d2d modules were used to drive this process.
Building the responsive, mixed-content menu
Chatham House’s main navigation menu mixed both traditional navigation items and content. A standard Drupal 7 menu system would not permit this, focussing instead on rendering a pre-defined hierarchy of menu link items.
The proposed navigation menu was not just a mixture of menu links combined with dynamic content and a membership login form, but was also a sub-set of the underlying Drupal menu structure. Fortunately, both the links to research departments and other parts of the site were relatively static - only requiring a few minor changes throughout the year. This made the process of building it a little more straight forward.
This highly unusual, but visually appealing navigation menu was built with a relatively low-tech approach. A theme region was defined to provide a container for content blocks. Most are static and can be managed by HTML literate content editors at Chatham House and the other blocks are dynamic content blocks exposed by views. All of these blocks are specifically arranged, styled with a mixture of CSS3 with media queries, custom JS and jQuery.UI tabs (part of D7 core). It is true that the links in the menu do occasionally require manual maintenance by a content editor, but where possible links to system paths (eg:
node/123) are resolved to their aliased versions when rendered which does help matters.
Integration with membership system
Chatham House's membership system is the backbone of the organisation for it's members online experience and in the past version of the site integration between the two systems was incredibly limited. The new website sought to improve the member experience by:
- Providing a logged in member dashboard to showcase featured content, events and profile management. This was provided by a custom content type for the dashboard with lots of views, all underpinned by profile2 to power the user entity's profile data.
- Providing authentication support against the membership system. This was built using entirely custom code, but heavily inspired by the existing ldap module.
- Providing a feed of events to pre-populate website content based on known, approved events data from the membership system. This was built using feeds, feeds_tamper, feeds_tamper_php.
- Use the membership system as the authoritative datasource for member data, asynchronously pulling in changes from an API on the membership system every 15 minutes. This data was added to profile2 profiles, which are fieldable and readily available via other Drupal components such as display suite and views. The functionality for this 'feed' was entirely custom code, as a drush plugin, invoked on system cron instead of Drupal cron to avoid congesting the main cron process.
At no point were the website and backend membership system synchronously linked to ensure redundancy/resilience of the website. The website will not go down or become unresponsive if the back end data store becomes unavailable. At worst, if the membership system goes offline members cannot authenticate but they are notified via a message on the login form and their profile data is simple re-synced with Drupal once it does come back online. Website staff (eg: editors/admins) still authenticate using Drupal's own users table and so can still use the site in the event of the two systems being decoupled at any point.
Chatham House required integration with a number of multimedia content providers. embed.ly was used as a common interface to connect Drupal 7 file entities to multimedia assets hosted on Youtube, Brightcove and Soundcloud.
After 5 months of intensive development, rolling content migrations, testing and final content entry the new Chatham House website was launched on 2 June 2014. The adoption of Drupal as a CMS platform provides yet another example of the capability of this Open Source platform as a highly capable solution for other similarly sized and high profile organisations throughout the world.
- Ben Enright: Designer
- Edward Kay: Discovery process
- Ged Barker: Project management
- Johan Gant: Technical lead
- J-P Stacey: Content migration and development
- Justine Pocock: Front end lead
- Olly Willans: Design/user experience direction
- Paul Gill: User experience/discovery process
- Simon Minter: Front end development
Chatham House team
- Agnieszka Grychowska
- Jason Naselli
- Josie Hock
- Lee Tickett
- Marcus Cummings
- Mark Horrell
- Michael Farrell