Using the latest approaches to building Higher Education sites with Drupal 9, we introduced modules and technologies that significantly enhanced Bond University’s user and editorial experience.
This project won Runner-Up in the Education category of the DrupalSouth Splash Awards.
Deliverables
- Conducted a Drupal 9 CMS upgrade
- Implemented an interactive component library
- Supported content migration using Migrate API
- Improved content editor tools, such as Layout Builder
- Redesigned the program content journey
- Provided industry-standard hosting
- Integrated OpenSearch
- Consolidated several Drupal sites into a single Drupal instance
Context
Bond University is a premium Australian academic institution. They wanted to transform their website into a user experience that reflected their outstanding reputation for experience and quality.
Evolving their website and providing an exceptional, seamless and immersive experience would help them maintain their premium brand position whilst delivering against their business goals.
Their new Study, Life at Bond, Our University and Program Pages were the springboard from which a fresh, new look would be applied across the site.
About the Client
Number one for student experience in Australia, Bond University is also the country’s first non-profit private university. Located on the Gold Coast of Queensland, Bond is an internationally recognised, leading university.
Solutions
Working closely with Bond University, we helped them to prioritise their feature and functionality requirements. Despite some complexity, particularly in the Program Pages and Federated Search features, smart planning upfront and collaborative project management throughout enabled us to stay on target, on time and on budget.
Drupal 9 upgrade and comprehensive test suite
Bond’s previous site was on a Drupal 7 instance. This version of Drupal is fast approaching end-of-life (on 01/11/23), presenting a security risk for the university.
As well as addressing this risk, upgrading to Drupal 9 added many editorial and administrative features that weren’t previously available, including Layout Builder.
We developed a comprehensive test suite so that new features could be launched in total confidence, knowing they wouldn’t break anything or have unexpected consequences. We had > 500 tests at launch, using PHPUnit for the Backend and Jest for the Frontend.
Upgrading the core system to Drupal 9 and employing thorough test coverage meant that Bond University could rest assured their site was secure, stable and monitored.
Flexible and performant frontend
We took Bond’s existing agency designs and HTML prototype, built with a third-party frontend framework, and adapted them into a library of flexible and accessible components.
The partially decoupled Vue components handle most interactive elements. However, these components aren’t loaded until the user scrolls down, thanks to Lazy Loading. Lazy Loading defers HTTP requests, improving page load times. CSS, when it’s not critical, is also deferred. This delay applies to anything below the fold and dramatically improves performance.
We safeguard high performance by conducting Lighthouse testing on Continuous Integration throughout development and beyond, ensuring accessibility, SEO and best practices are all scrutinised. Builds will fail if they cause our Lighthouse scores to drop below the benchmarks we have set for the project, which allows us to address issues before they reach production.
Content migration, management and personalisation
The Bond University website contains vast amounts of content that needs regular oversight and management.
Content migration
Our first step was to conduct audits of the existing content. We then supported several content migrations using Migrate API. We migrated articles, blog posts, landing pages, basic pages, staff profiles, supporting documents and file assets.
A vital feature of the content migration was the ability to map legacy field-collection components into Inline Blocks to integrate with Layout Builder. File and image assets were migrated into Media entities, ensuring they worked smoothly with Drupal 9's Media Library.
With the help of the File Hash module and custom migrate source, process and destination plugins, we were able to identify duplicate versions of files from the Drupal 7 site and consolidate them into unique Media entities, updating references at the same time.
We created audit views and added the following fields to each available node type as filters on the audit views, making it easier for the Bond team to review their migrated content:
- Content status: A taxonomy that allows editors to tag content with its current status. Migrated content was automatically tagged with “Migrated content, needs review”.
- Notes: A generic text field where editors can add notes to a piece of content.
- Assignee: A user reference field that allows editors to assign content to themselves or another user for review before publishing.
Content management
Bond University’s primary content methodology is now ‘Create Once Publish Everywhere’ (COPE). This approach allows content, such as testimonials, to be reused and easily managed across the site, with any changes made once and automatically applied wherever that content appears.
We significantly improved the editorial experience for the university’s content editors, empowering them with greater ownership of the platform.
Teams now follow specific permissions and editorial workflows that support each department to be responsible for their content, with more senior editorial staff able to override standard templates.
Content configuration is powered by the Drupal core Layout Builder module, allowing the editorial team to edit and review content and pages in real-time. We made enhancements to the Layout Builder module through several custom configurations.
Content personalisation
Content editors can flag components intended for a domestic or international student, ensuring a user-centred experience matched to each audience's need. This content is swapped in the browser rather than at the server, ensuring optimal performance.
The new Program Page experience
The transformed program pages include task-based search and options for personalised content, offering a much richer experience that enables users to easily explore Bond’s programs. This new design was created by Bond University’s design agency prior to the start of the project and is supported by extensive user testing and market research.
Managing Bond’s wide variety of programs requires substantial flexibility and editorial customisation. This adaptability considers the specific content created for International and Domestic, Undergraduate and Postgraduate students.
Bond’s Packaged Programs and Joint Degrees required additional customisation to support these offerings. These degrees comprise two or more courses using several components to display content from their diverse programs and study levels.
Bond University’s Medical Program - Bachelor of Medical Studies, Doctor of Medicine
Microsites
The university runs several sub-sites, including Library, Rugby, and Sport. These are now included in and managed on one centralised Drupal CMS.
Our Entity Hierarchy microsites submodule powers these sites. Content administrators can nominate a landing page in the hierarchy as the homepage of a new microsite. Utilities in the module allow custom development and theme code to provide alternative presentation and treatment of the site, such as the Library microsite, which has a unique menu and IA.
Through custom code, we presented the Bond University overseas student marketing site (which only works for non-Australian IP addresses) at its top-level domain instead of from a path.
Hosting
We provided industry-standard hosting with Skpr during the development phases and in production.
Skpr is an Australian-based, managed-AWS hosting platform specialising in large-scale Drupal sites. This option was perfect for Bond as it ensured they could scale with student demand and meet their internal SSO and security requirements, and maintain data sovereignty within Australia.
The added advantage of using Skpr was that it seamlessly integrated with Bond’s existing CDN solution, Cloudflare. This compatibility is critical to ensure the site is accessible internationally.
OpenSearch
Using Skpr also allowed us to integrate OpenSearch into the university website experience. This provides a highly powerful, configurable and fast search solution, which includes auto-complete.
We built most user-facing listing components on the site with Vue.js querying via a direct connection to OpenSearch. This choice means the user sees the changes to their search and filtering in real-time, without the page making a round trip back to Drupal or refreshing the whole page, as is traditionally the case with listings powered by the Views module. Some examples include
The Results
Bond University has created a stand-out, transformational digital experience for every “Bondy”. It’s a personal yet inclusive site with clean navigation and a vibrant visual appeal.
“PreviousNext have been an exceptional partner for Bond University in every way. They did an outstanding job with our website, were a delight to work with and we very much look forward to working with them on the evolution of our website moving forward.”
Shannon Tricklebank - Director, Marketing and Brand
We’re excited about the future of the Bond site. Higher education websites continuously evolve to meet their markets, especially in light of the increasing numbers of international students coming to Australia, so we will keep offering our insights and expertise to ensure Bond can match pace with these advancements.
This project won Runner-Up in the Education category at the DrupalSouth Splash Awards.