European Corporate Governance Institute: Drupal 7 migration

Our approach

Technical documentation

Our approach to the project began with a comprehensive discovery stage, which placed a significant emphasis on technical documentation. We wanted to ensure that every aspect of the site was meticulously documented to streamline the development process and ensure a successful outcome. 

One key feature that sets ECGI apart from other websites is the extensive use of tagging and contextual views. This tagging functionality is essential for organising the large number of listings on the site and allows for information to be automatically pulled in where it is needed. Not only does this process work seamlessly, but it also guarantees that the information displayed is always fresh, relevant, and reduces editor overheads.

Design

In approaching the design phase of the project, we took a unique approach out of necessity. We created wireframes of the entire site to map out specific functionality requirements. While this resulted in a larger number of wireframes than usual, it enabled us to focus on the necessary functionality before delving into the visual aspects.

Screenshot showing just some of the wireframes created for the ECGI website.
 

Furthermore, we developed a detailed UX design showcasing all the functionalities to be included in the final product. The structure of the homepage was carefully designed to introduce users to the wealth of resources available on the site, emphasising the core values and international impact of ECGI.

The pathways to the vast amount of content and resources available on the site were organised into sections such as "Publications," "Projects," "Network," and "Events," with links to appropriate content at secondary and tertiary levels. Additionally, way-finding blocks were incorporated to help users navigate to different sections of the site.

Sample of the way-finding blocks introduced on the site.
 

Our approach to the user interface design aimed to maintain the established branding of ECGI while incorporating elements and colours to create bold and eye-catching components. We prioritised a minimal aesthetic with rich imagery and impactful typography to reflect the character of the organisation.

Accessibility was a top priority for the public-facing resource, and we conducted accessibility compliance checks on colours, typography, and focus states. Throughout the design phase, user-centred design methods guided our decisions to ensure an inclusive user experience.

Solutions to key challenges

Addressing the primary challenges of the project required a strategic approach:

1. Functionality

Over the years, ECGI had developed a number of custom features for members and for member management which would be important to retain and replicate in the new site. Through a thorough discovery process, we ensured that the functionality of the new website aligned with the technical capabilities of the previous website. This process also helped untangle project requirements, particularly concerning the code and configuration.

2. Content migration

The ECGI website held a lot of content that would need to be migrated over to the new website. This was comprised of more than 40,000 items, including 6,000 pages, 16,000 media items, and 3,800 people. There were also a number of orphaned items that needed to be removed or restructured in the new information architecture. To address this, we conducted workshops to determine the best content and structure for ECGI users from the ground up.

3. Information architecture

There a large volume of different types of content that needed to be migrated, which had been developed incrementally and approached in different ways. Agreeing on the new information architecture and standardising the technical approach was important to ensure scalability of the platform going forwards.

To further complicate the information architecture, the member profile pages contained thousands of links to other types of information, such as working papers or blog posts they had written, and videos or news articles about them. Management of these profiles, and ensuring they could be more easily updated, needed a more sustainable approach. For this, we leveraged contextual filters and an extensive tagging system to ensure that member content remains relevant and up to date.

Sample ECGI member profile page showing dynamically pulled in related content.
 

4. Registration process

Growing its membership is a key part of ECGI's business objectives. However, the previous process was confusing and cumbersome. To streamline the membership registration process, we implemented an easy-to-use online registration form and simplified payment process to eliminate barriers to membership.

Results

The project to revamp the ECGI.global website has yielded impressive results in terms of performance and user experience. With over 40,000 digital items migrated from the old website, the new site remains easy to navigate and find information on despite its size and complexity. Thanks to extensive tagging and filtering capabilities, much of the linking between different types of content and user categories is now automated, leading to a smoother user experience and reducing the workload on editors.

One of the most notable improvements is the website's search capability, tagging system, and new structure, making content more accessible to users. Additionally, the website's performance has seen a significant boost. Google's Lighthouse tool, which rates websites based on performance metrics, has scored ECGI.global at an impressive 99%, up from 63%. This improvement is reflected in the website's loading time as well, with the new site fully loading in just 1 second as opposed to the old website's 2.3 second load time. The enhanced performance and usability of the new ECGI.global website provides a much improved experience for users.