User-Centric Drupal 7 to Drupal 8 Migration

About the Client

The University of West London (UWL) has a reputation for high-quality education closely linked to employment. The university celebrates 98% of their graduates entering employment or further study within six months of graduating (HESA data, July 2018).

UWL is also ranked as a top 50 university in the UK, in the prestigious Guardian University Guide 2019. Most recently, the University jumped 31 places in the The Times and The Sunday Times Good University Guide 2020, to 52nd in the UK.

UWL strive to equip students with the academic knowledge and practical skills required to succeed in their chosen careers. Their successes are underpinned by dynamic growth following a major investment of £150m across three campus sites.

Business Challenge

Our in-depth Discovery phase informed UWL’s digital strategy and helped to define prospective students’ requirements. From here, we began the major migration and rebuild of UWL’s digital presence.

The existing site was built in Drupal 7, so site managers were restricted by a number of fundamental issues, including:

  • Poor information architecture, making it difficult to navigate.

  • Overly complicated and difficult-to-manage course pages.

  • Duplicate content damaging SEO and requiring double the effort.

  • Resource-intensive activities regarding legal compliance.

In partnership with the university’s internal team, our developers and designers set about migrating the UWL site to Drupal 8. Adopting the newest version of Drupal required the latest development techniques and design practices.

Component-Based Design: A Living Style Guide

When we began the redesign roadmap for UWL’s content-heavy website, we proposed a whole new way of working with Drupal. Our solution maintains consistency across all design updates, now and in the future, with as little friction as possible.

To achieve this streamlined way of working, we utilised a living style guide, known as Pattern Lab, for the redesign. We used the system to implement a component-based design, which defined everything from font size to grid layouts.

Our front-end experts assemble elements into blocks within the living style guide. We then connect Drupal to the components directly from Pattern Lab. This enables each block to automatically update and display wherever it is placed on the website, often across hundreds of pages.

The living style guide safeguards UWL’s image by collating all branding assets in one place. Whenever a design change is required, a front-end developer can apply the fix within Pattern Lab and it will be instantly applied throughout the UWL website.

De-duplication of content

We started the UWL build project with an in-depth Discovery process addressing stakeholder and user needs, and operational opportunities. During this phase, stakeholders identified a range of back-end inefficiencies, including duplication of effort when maintaining website content.

Similar to the living style guide, we decided to centralise certain types of content input. We designed a database to house any text that is found in hundreds of places across the website.

The resulting database, also known as a Content Library, significantly increased the efficiency of content management. We also removed duplicated course content, to mitigate SEO penalties.

CTI_UWL_Case-Study-1

UWL Content Library

 

Learn more about the website’s accessible UX design in the full Discovery and UX case study

Performance

The UWL website required high-speed performance and intuitive functionality. We wanted the new Drupal 8 system to empower UWL staff while providing a fast and enjoyable experience for users. The site also had to run concurrently alongside sections that remained in Drupal 7.

 

Mobile First

We built a mobile-first website for UWL, to provide the best possible experience across all devices. We followed best practice development techniques to create quick-loading pages that load user-facing content before any non-vital script. 

Lazy Loading

We also implemented lazy loading for long, image-heavy web pages. Only content that is immediately visible, or just below the fold, loads initially, which results in a faster experience.

Link Loading

To improve site performance, we enabled a feature that pre-loads links in the user's viewport. This feature allows a user’s next page to load instantly, even when linking to Drupal 7. The pre-load only occurs in the background when using a large screen and good connection, to avoid wasting users’ mobile bandwidth. 

The UWL website has a slick feel, loading quickly and without lag as users browse between pages.

Collaboration and Staff Empowerment

To manage a tight deadline, we worked on website development concurrently with the work streams of UWL’s strategists and content managers. As such, it was vital to form a close working relationship and to maintain a holistic view of different teams’ blockers.

We provided early access to the CMS, to enable UWL’s internal team to begin populating content alongside our development. To give them the best possible head start, we provided on-site training for UWL employees.

Early access to Drupal 8 allowed the client to start building up the backend and inputting content within the staging site. Our training allowed the UWL team to carry out their roles without disruption and provided a fast go-live once the solution was complete.

D7 to D8 Migration and Co-existing

The University of West London’s original website was built in Drupal 7. We chose to upgrade UWL to Drupal 8, which is designed to feed directly into Drupal 9 once it is released. This, in turn, will eliminate the need for a rebuild for the next 10 years.

When approaching the Drupal 8 rebuild, stakeholders identified that attempting to address the entire website at once would stunt the success of the project.

We adopted an Agile approach to replace the priority sections of the existing site with a Drupal 8 equivalent. We migrated UWL’s landing pages and course pages to the new platform, while simultaneously hosting the rest of the website on its existing Drupal 7 installation.

Our solution allows the two sites to live in harmony and communicate where necessary. As Drupal is an open source framework, UWL don’t have to pay for two licenses. To run two UWL websites, on Drupal 7 and Drupal 8, the only additional cost is hosting. This represents a negligible outlay in comparison to the delay and friction that a full rebuild could cause.

D7 and D8 Technical SEO

When conducting the migration, it was vital to ensure that there were no changes to content’s URL parameters. Retaining the same URLs allows UWL to maintain their search ranking and prevent any confusion for users who are familiar with the existing website.

To make this possible, we capitalised on the differences in Drupal 7 and Drupal 8’s directory structure and wrote a custom load balancer in AWS. The solution we applied circumvented the display of broken links or missing content, on all Drupal 7 or a Drupal 8 pages.

Quality Assurance (QA)Testing

All of our projects undergo rigorous testing, throughout the software development process. In order to deliver the utmost quality for clients and their respective users, our in-house QA team ensure that all end products perform accurately and reliably under normal and abnormal conditions. Testing is followed by continual monitoring of software performance, to prevent reoccurrence of any issues and to ensure efficient ongoing operation.

As such, we were able to confidently deliver a well-designed, scalable and technically stable result.

Results

The UWL website has benefitted from a major redesign and a host of new operational features. These changes place the site as an international leader in accessibility and user-centric design. 

See the results for yourself:

MockUp 2 White

After Vs Before

 

Working with the University of West London, as well as Manchester Metropolitan University, has strengthened our expertise regarding governance and technical requirements of Higher Education institutions. If you have your own project, please get in touch.