YHA (Youth Hostels Association) Groups and School Trips, Drupal 8

Posted by rickdonohoe on November 15, 2016 at 5:35pm

YHA Groups and School Trips website on desktop, tablet and phone

https://groups.yha.org.uk

YHA (Youth Hostels Association) is a charity which has provided Hostel accommodation to people of all ages and backgrounds for over 85 years. The majority of YHA's online business is split between two websites: the main yha.org.uk site, which allows families and individuals to book accommodation, and YHA Groups and School Trips, which is aimed at groups looking to book accommodation for 16 or more people.

This project covered YHA Groups and School Trips: a brand new Drupal 8 design-and-build to replace the existing site.

Why Drupal was chosen:

The existing yha.org.uk and its sub-sites all used Drupal 6, and the catalyst for the whole project was the lack of support for Drupal 6, with YHA understanding that their website(s) would only be supported for a limited time.

YHA were happy with Drupal, and were excited about the possibility of using Drupal 8. After initial requirements discussions it was decided that Drupal 8 was a great option, as although the YHA team understood it was still quite new, everybody understood its potential and there were no requirements that Drupal 8 could not handle.

Describe the project (goals, requirements and outcome):

Overview

YHA Groups and Schools had previously been a mix of content served over a number of different sub-folders on the main yha.org.uk website. Information was hard to find, and the pages weren't converting groups business as well as the main website was for families and individuals. In addition to this the business was aware that their Drupal 6 sites had a finite lifespan, and the team knew a rebuild was necessary.

Working with Microserve, YHA was eager to use this opportunity to showcase what the groups side of the business can offer. The result of the project is a beautiful website which has made the hostel booking and enquiry process much simpler and enjoyable for groups and schools users.

By using Drupal 8 the team has benefited from a range of new features and an admin interface which now makes content management much more intuitive. The project is a great example of the power and capabilities of Drupal 8, at a time when most D8 websites are currently brochure and agency websites.

Project Process

An Agile process was used to deliver the YHA Groups website, which worked perfectly since the project had a set deadline which could not be missed. The project was delivered from start to finish over seven sprints lasting two weeks each.

JIRA and Slack were used as the main communication tools, and Invision App was used during the design stages to allow collaboration from multiple team members on the designs.

All content on the site was completely re-written as part of the project, with no migration done from the old site to the new site. Due to the tight deadlines, the first challenge was to deliver a working Drupal 8 site with a complete admin interface ready for content population, as content addition on the website was carried out in parallel to development work.

The site is hosted on Acquia Enterprise.

Engagement Statistics

One of the key goals of the new site was to improve upon the current user engagement metrics by providing a much better website that worked seamlessly across multiple devices. The YHA team have been delighted with the improvements made to this area and have provided the following insights:

Our new Groups and School Trips site launched successfully in time for the new 2016/17 season and has already proven to be a hit with new and returning visitors alike.

We have seen traffic steadily increase to all sections of the new site which has benefited from the move from Drupal 6 to Drupal 8. In the first 20 days since launch, we have seen traffic increase 19% as the new platform allows for a much cleaner, and faster experience, not only for the end-user, but also the team working behind the site. Users now find it easier to find the information they are looking for, so are taking less steps from entering the site to enquiring about their chosen location with our contact centre.

Mobile optimising the site has also increased engagement, especially with Groups, as they can now digest and share information much easier – Groups specific mobile users have increased from 15% to 25% over the last 20 days, and the bounce rate among these users has dropped by a good 15%.

Modules/Themes/Distributions

Key modules/theme/distribution used:

Contact Storage Export

Stage File Proxy

Shield

Pathologic

Why these modules/theme/distribution were chosen:

Bootstrap - YHA had a great understanding of Bootstrap already, so by using Bootstrap as our base theme all team members were able to re-use common elements and layout classes.

DraggableViews - Microserve use DraggableViews for all content which doesn't have a typical sort such as A-Z or Most Recent. An admin interface is created for each sortable content type, and this allows content editors to easily order content however they please using native drag and drop handles.

Stage File Proxy / Shield / Pathologic - These modules are part of Microserve's standard development practice. SFP and Shield are automatically enabled on QA branches and Dev/UAT sites. This prevents crawlers and unwanted visitors viewing non-production environments, and also allows us to spin up feature branches for QA without needing to copy images and other files to these areas. Pathologic is also great for preventing URL issues when content editors begin adding content to the non-production environment during the earlier stages of a project.

What development challenges did we face using D8 rather than using D7

The use of D8 was overall an extremely positive experience and using the Twig and Symfony frameworks were a refreshing change for the development team.

The most typical challenges however were in the form of commonly used modules which were either not up to scratch or simply not ready yet for Drupal 8. The most notable difference was the lack of the Webforms module, which Drupal 8 has tried to replace with the Core Contact Form module.

Configuring form fields and displays using Contact Forms was no problem, but trying to customise these in any way was impossible out of the box. To achievable functionality similar to D7 Webforms, the team had to use the Contact Storage, Contact Storage Export, and Contact Block contrib modules, along with a number of other smaller modules to get something closely representing Webfoms. It felt quite apparent that Contact Forms was lagging in Core, as throughout the project new functionality was clearly being added with every Core release, such as the ability to add a submission redirect URL, change the submit button text, add a page alias, and configure the successful submission message.

Other modules which were noticeably absent were an Image Optimisation service such as Kraken.io, an easy PDF generation module, and Path Redirect Import to bulk upload all redirects ready for launch (big thanks to Chris @ YHA for taking that task on manually!).

Modules aside the only other key issue was this D.org Core issue which caused issues with empty theme regions to be outputted, causing a variety of problems for our front-end team.

Organizations involved:

Team members:

Community contributions:

Numerous contrib module issues were raised from bugs found during the build, and patches were submitted to the Geolocation module which was heavily relied on for the Hostel search map and a lot of other proximity based functionality around the site.

A new Drupal 8 sandbox module was also created from a use case found during the project, Contextual Comparison, which allows site-builders to use mathematical comparisons as a views filter based on the contextual filter.

Project team: