Microserve and Youth Hostel Association (YHA)

Non-profit

Summary

A unique and technically-challenging project, delivering a Drupal 8 website and Content Hub supporting YHA’s continued online revenue growth and inspirational charity activities.

Case description

As its primary income stream, the performance of YHA’s website is crucial to the ambitions of its charity operations. Online revenues grew strongly between 2014-18, so when YHA appointed Bristol-based digital agency Microserve to deliver a new website, the stakes were understandably high.

In 2018, Microserve delivered a Drupal 8 website and Content Hub which has not only continued the online revenue growth, but also provides a future-proof foundation for YHA’s future digital roadmap. Set against a backdrop of fierce competition from online travel agents, the new site has delivered increases in conversion rates, revenue, memberships, donations, logged-in users, page speeds and organic sessions. All of which generates more opportunity for YHA to continue its inspirational charity activities.

YHA also wanted to deliver a site that better represented the YHA brand and enhanced its charitable credentials, with the best user experience that would translate into increased revenue. Significant user experience work went into increasing uptake of YHA membership. In addition, they needed a solution that would work hard behind-the-scenes to improve efficiency for content editors and admins.

Finally, the site would need to be closely integrated with existing key business systems. After several rounds of prototyping and user testing, the team arrived at a solution that simplified and increased the visibility of the membership offering.

Case goals and results

YHA operates in an increasingly competitive sector, with online travel agents (OTAs) also re-selling YHA hostel accommodation and introducing more people to the brand. Direct bookings through the YHA website are the most cost-effective way to generate sales, so its new site needed to stimulate customer loyalty and increase direct bookings.

As a primary income stream, the performance of YHA’s website is vital to the ambitions of its charity operations and its users. Driving membership engagement on the site is key to this, since members receive preferential booking rates unavailable to OTAs and make direct contributions to YHA through the site. However, YHA’s old online booking model struggled to communicate these benefits clearly to users on the site.

Recognising the opportunity for potential income which could be reinvested back into continuing its inspirational charity activities, YHA wanted to simplify 85+ years worth of membership history and deliver the best user experience (UX) that would raise awareness of membership benefits and stimulate loyalty. This would enable it to achieve greater reach and impact for young people with challenging lives.

The new Drupal 8 website and Content Hub have been a massive success for YHA. They launched smoothly and protected the organisation's digital revenues from day one. YHA is now seeing results continue to grow (in some areas dramatically) despite ruthless competition within the travel sector.

Since launching in May 2018 the new website has seen positive growth figures across the board. Key results include:
- 150% month-on-month increase in annual membership sales
- 6,500 new members acquired since launch
- Bookings by logged-in users increased by 18%
- Online donation revenue increased by 99%
- Organic traffic increased 19%
- Average page speed increased by 28%
- Time to make a booking decreased by 30%

In addition, the innovative use of modern de-coupled technical architecture now gives YHA a secure and robust platform to further expand this year with the development of its first mobile app, which will be fully integrated in to the new Drupal system. This paves the way for YHA to develop the mobile app faster and more cost effectively, but also giving users an integrated experience across YHA’s front-end digital solutions.

Challenges

The brief, at first, seemed simple: to create a beautiful and user-friendly experience for booking accommodation at YHA’s hostels around the UK.

As Microserve and YHA planned and scoped the project, however, it became apparent that this was no small undertaking. Numerous technical challenges would need to be solved, including various integrations and a solid e-commerce platform. The project team were also aware that this website was just the first of a roadmap of digital properties that YHA were planning to build, and some of the content on the site might be required by other sites and apps in future.

Since YHA’s hostels are central to everything it does, any future digital products (including the main website) would need to include content about the hostels: locations, facilities, media files, nearby attractions and general information. Duplicating this data for each future digital product seemed technically clumsy and would be difficult to maintain. YHA needed a solution that would eliminate duplication of effort and data inconsistencies.

The decision was therefore made to build a ‘headless content hub’, serving as a central repository of all hostel-related content and files, capable of serving data via Drupal’s RESTful Web Services API, initially to the main website, and in future to any digital products that YHA might roll out. Abstracting the Hub content from the main site made it future-proof and ensures that it can continue to do the important job of serving content to all YHA’s digital properties for years to come, even if the main website is replaced or renewed.

‘The Hub’ is built on Drupal 8 and serves content to the new yha.org.uk (also a Drupal 8 website) via API. Content is automatically synced from the Hub to main website whenever changes are made, so admin users and customers alike can be sure there’s a reliable single source of hostel-related data.

The main website itself contains all the features and functionality you would expect from a modern accommodation booking website. It presents the hostels in the best possible light: it is image-rich, intuitive, and works equally well on devices with large or small screens. The powerful search and filtering features enable customers to find the most suitable hostel, whatever the purpose of their trip.

One of the most technically challenging aspects of the project was integrating the site seamlessly with two key business systems: Microsoft Dynamics CRM (for storing user profile data) and ASSD (which manages pricing and availability of all accommodation). Both systems required deep and complex integration work in order to display up-to-date availability on all products, and to ensure a 'single customer view' was maintained for all users.

Besides the challenges of building such a technically ambitious website, Microserve also needed to ensure that the user experience across the site was focused on delivering meaningful results. One innovative idea to drive donations was to add a ‘microdonation’ option during checkout, inviting customers to make a small charity donation on top of their accommodation fees, which goes directly towards YHA’s charity initiatives.

A key challenge was therefore to simplify the membership purchase UX with an accessible and dynamic solution, which shows the value of membership at the right point in the user journey and encourages repeat on-site bookings. With ambitious plans for digital transformation in the wider digital roadmap, it was also important that the website was engineered to provide the foundations for future innovation.

Community contributions

When Microserve first started scoping out the YHA project in early 2017, Drupal 8 was still quite a new platform. Some of the most popular Drupal 7 contributed modules were taking a long time to become viable in Drupal 8, and the Drupal Commerce module (and related modules) seemed to drag its feet more than most. Having considered other options carefully and despite the Drupal Commerce module still being in Beta, Microserve made the decisions that Drupal Commerce was the most suitable commerce platform for YHA’s complex e-commerce requirements.

Over the next year as the development work progressed, Microserve’s developers became some of the most prolific contributors to the Commerce and Commerce Braintree (payment integration) modules. These community contributions continue right up to the present day, as we are currently working closely with the core module maintainers to help implement the new 3D Secure protocol with the Braintree Commerce module.

Since the project also required numerous integrations with third-party systems, Microserve’s lead developer created a module that would help to manage the various integrations and their configurations. This was open-sourced as the ‘Simple Integrations’ module, and now has a stable release covered by the Drupal security advisory policy. To date it has been downloaded more than 600 times.

The Simple Integrations module saves developers from having to add integration connection details in the code, and puts control of integrations into site administrators' hands. It reduces the amount of hardcoding required and allows the config integrations to be stored as exportable config. There is also an interface which allows administrators to view and edit the integrations.

During the course of the YHA project and right through to the time of writing, Microserve has remained one of the top 3 agency contributors in the UK, according the the Drupal.org marketplace listings.

Why should this case win the splash awards?

This project really does have everything. It's an incredibly ambitious use of Drupal 8, which brings together strategy, design, e-commerce and complex technical integrations into a site which has produced very impressive results. Here’s a quick summary of the project highlights:

- Drupal Commerce. It's a great example of what's possible with Drupal Commerce - an enterprise-level high-volume e-commerce site taking millions of pounds every month.

- UX and design. It's a very successful UX and design project, bringing this 80-year-old brand right up-to-date. Successes in the user experience deliverables include:
- Micro-donations within the checkout process, leading to a 99% increase in on-site donations
- Promotion of membership within checkout, leading to a 150% increase in membership
- Ongoing optimisation work (through A/B and multivariate testing) has lead to a projected £2m additional annual revenue

- Technical complexity. The site depends on robust integrations with a number of third-party systems, including:
- Microsoft Dynamics CRM
- ASSD (accommodation pricing and availability)
- Google Places / Maps (for locations-based search)
- Braintree (payment purchasing)

These integrations have proven incredibly reliable in the 16 months since launch.

- Headless 'hub' architecture. Innovative use of Drupal 8's RESTful Web Services API, which is now helping YHA develop future products more efficiently. Having a single source of hostel-related content that serves all YHA's digital properties also reduces errors/inconsistencies and lowers the ongoing maintenance required over time.

Most importantly, the new Drupal 8 website and its headless Hub have been a massive success for YHA, its members and the thousands of young people it supports every year. With more traffic, better conversion, increased donations and growing membership, YHA’s Drupal website is playing a key role in driving revenue and engagement, which will ultimately lead to the future success of the charity, allowing YHA to continue to change the lives of young people and families for years to come. With the continued success of the website, YHA is on course to fulfil its vision:

“To reach out and enhance the lives of all young people, with the goal of reaching more than one million young people every year by 2020.”