Drupal 8 migration & design standardization for the world’s top business school

case study
Project Focus
DRUPAL 8 MIGRATION
DESIGN SYSTEM
PATTERN LAB
AUTOMATED QA TEST SUITE
Image
Drupal 8 migration & design standardization for the world’s top business school

Client Overview

Our client is consistently ranked among the best business schools in the world and is widely regarded as the most selective business school in the world, admitting only about 6% of applicants.

Project Overview

With their existing website on Drupal 7, the client wanted to upgrade to Drupal 8 along with standardizing their design system. We migrated the client's website that consisted of various educational courses, programs, events, and more, from Drupal 7 to Drupal 8. We implemented Paragraphs with Drupal 8, giving content editors the flexibility to manage content effortlessly. 

To ensure seamless data migration, we implemented our Drupal data migration automated testing framework which expedited the QA process and eliminated the possibility of human errors. Design standardization was achieved via Pattern Lab implementation.

 

100%

SELF-SUFFICIENCY OF THE CONTENT TEAM

20K+

AUTOMATED NODES MIGRATION

5000+

nodes tested
in 10 secs

Before kick-starting the project we recommended:

Tech & Design Consulting
  • Design System for standardizing the visual components during the Migration
  • Migration automation test suite for seamless and error-free data migration
  • Our team was involved with the client’s design team, to review & provide recommendations, ensuring adherence to standard implementations
Why was Drupal Chosen?

The client's existing website was implemented on Drupal 7 and they wanted to upgrade to Drupal 8 for the following reasons:

  • Drupal 8’s content moderation and authoring capabilities
  • To adopt a component-based design, empowering site administrators to create content pages effortlessly 
Drupal 8 migration & design standardization for the world’s top business school
Drupal 8 migration & design standardization for the world’s top business school

The client wanted to upgrade its existing Drupal 7 website to Drupal 8 and standardize the design.

Client Requirements

The client wanted to Migrate/Upgrade its existing Drupal 7 website to Drupal 8 and standardize the design. 

  • Migrate content seamlessly - Migrating an enormous amount of data seamlessly, without any data loss 
  • Ensure zero downtime for the existing D7 site - With the site build changing, some section/pages on the site required work, we had to ensure zero downtime for the existing Drupal 7 website
  • Sync content changes - We had to sync content edits taking place on the legacy website without overwriting the content changes on the Drupal 8 site.  
  • Standardize visual styling - We had to standardize the visual styling of elements without deviating from the standard component style
  • Enable content editors to build pages effortlessly - We had to enable the site admins to build new pages by assembling different visual components

 

Image
Drupal 8 migration & design standardization for the world’s top business school

Our Approach

Discovery Phase

The discovery phase focussed on attaining a finalized content structure & a migration mapping document, which showed where a particular field from Drupal 7 should be migrated to in Drupal 8. 

  • A list of custom modules that needed to be ported to Drupal 8 and a list of things that can be delegated to site build and features provided by Drupal 8 core
  • Detailed discovery for contrib modules supported by Drupal 8 and identified an alternative for the contrib modules that were not supported by Drupal 8 
  • The frontend design was broken down into smaller components and documented w.r.t the Pattern Lab concept of atoms, molecules, components and pages.

Drupal 8 Migration

  • We started with the Drupal core upgrade approach from Drupal 7 to Drupal 8. Exported all migration config files and then made changes to adapt migrations to the new site build (using paragraphs). 
  • While multiple content types had a proper structure to them; the page content type was very unstructured. The page content type in Drupal 7 was built using a combination of panels and the panelizer module, allowing each page to have its own structure. 
  • Migrating these pages involved implementing a lot of custom processes along with a few source plugins. 
  • The approach taken was to migrate the low-level components built in Drupal 7 using ‘Field collection’ or ‘Fieldable panel panes’ to paragraphs with Drupal 8. 
  • While migrating the pages, the paragraphs were looked up by using the ‘fieldable panel panes’ entity ID’s and were then attached to the node pages in the same order.

Automated Drupal Data Migration Testing

  • With the large volumes of content and the design changes, implementing a visual regression test suite didn’t make sense.
  • Instead, we used the output from our discovery phase to map the fields as a source and built an automation framework for Migration testing. Our automated data migration suite took the field values by querying the legacy database, applied processing on (if required) and then compared the results with the data migrated to Drupal 8. 
  • It also generated a percentage match, showcasing the list of non matched records visually with the entity ids.
  • The automation suite helped the dev team identify generic issues/ migration data anomalies on the legacy site. These generic issues were handled using appropriate plugins, while data anomalies were recorded and shared with the client, allowing them to fix them on Drupal 7 and pick them up during the next migration run.

Delta Migration

  • Since the content structure changed drastically with Drupal 8, some manual content changes were needed on the site
  • Approximately 300+ nodes were identified
  • While the content changes had to happen on Drupal 8, new content was being created on the Drupal 7 site too
  • The requirement was to be able to migrate all new content being created on Drupal 7 along with changes done on the Drupal 8 site without any data loss
  • We implemented a highwater mark field with each migration, which would change with the content being updated on the legacy site

Design standardisation

  • While the design mockups were provided by the customer, we worked as an inherent part of the team where we provided inputs around component standardization during our grooming meetings. 
  • The components were developed on Pattern Lab and were then integrated with Drupal. 
  • Drupal theme’s TWIG templates were responsible for passing down data to the Pattern Lab components, which were responsible for actual markup generation and rendering.
  • This approach, not just supported the standardisation of visual components, but also prepared a component library that could be integrated with any other system(Non-Drupal) with minimal effort.

The above solutions:

  • Facilitated content moderation with governance on content creation
  • Standardized the visual component library
  • Automated import of papers & publications from Box
  • Automated import of events from Salesforce
  • Implemented single identity management system using SAML
  • Provided SOLR powered search and listing pages
  • Automated the migration test suite

 

Along with our automated migration and testing, we built a component library with Pattern lab for design standardization. This was a big leap towards standardizing the visual aspect of the client’s site. 

Business Benefits
  • Freedom for content editors to assemble pages using different individual components effortlessly
  • Catalogue of all visual components allowing content editors to visually see how low-level components were used to create high-level components
  • An accessible site complying with AA web accessibility standards
  • Governance over content creation being done in different sections of the site by different schools/section owners via a fully-fledged content moderation solution

With Drupal 7 end of life approaching, we upgraded the client's website to Drupal 8 along with implementing a component-based approach for standardising their design.

 

Technology Stack

Image
Technology Stack

Image
cta

How can we help you?

Reshape your business with our Drupal Development Services.