Natuurmonumenten.nl

The case
Organisation
Puurpxl & Burst
Client
Natuurmonumenten
Category
Non-profit
Launch date
Summary
The new website for Natuurmonumenten combines a beautiful (data driven) design with complex technology. Built for the future, this headless Drupal 8 allows the geotagged content to be distributed over many different touch points. Further, the smart forms module which is integrated with Natuurmonumenten's CRM and marketing software has reduced the number of incomplete data and improved conversions.
Project description
The need for Natuurmonumenten (Dutch Society for Nature Conservation) to renew its online platform was partly driven by the need to project their new communication strategy and partly driven by the need to implement enhanced technique as the platform had outgrown its technical boundaries in its five year existence. Natuurmonumenten is all about preserving and protecting nature areas, valuable landscapes and cultural heritage. Their work is made possible by volunteers, members, benefactors and corporate sponsors. It is increasingly difficult to get (younger) people to commit their time or money to Natuurmonumenten on a regular basis or even at all. The new platform is aimed at creating awareness, getting people involved and ultimately converting their interest into memberships, or donations.

In workshops KPI’s, personas and top tasks were identified leading to a clear concept of the customer journeys and flows for the new platform. The UX concept is built on five content pillars, that in a nutshell all are centred around the idea to “show, don’t tell”. We inspire, inform, mobilize, activate and convert by showing what Natuurmonumenten does with the time and/or money people donate. The UX concept should lead to more members (705.000 plus), more funds, more leads for specific products and more bookings for activities. The forms module (later more on that subject) has been live for 3 months now, but the website only launched yesterday. Therefor it is too early to tell whether these objectives will be achieved within the near future.
Challenges
*SITE STRUCTURE*
The site structure had become disorganised for both users and content managers. After five years the content had outgrown its limits and the content management system had become user unfriendly and outdated from a technical perspective. So the first thing to do was to downsize the (enormous) amount of content and to see if we could enhance content management. The site structure had to be decluttered and clear for every stakeholder (both visitors and web editors). We redesigned and tested the site structure by facilitating card sort sessions and surveys. This gave us data nobody could dispute, making the way clear for data driven design and optimizing the user interface.

*LOCATION AWARE CONTENT REPOSITORY*
Natuurmonumenten wanted to manage all content (± 5.000 pages during launch) in one single location, while still being able to publish the content to multiple channels. The API first (headless) Drupal 8 setup allows the content managers to do so and publish the content to multiple websites and apps..

Furthermore, all content in the database, such as nature reserves, monuments, points of interest, walking and cycling routes, activities, blog posts, etc, is geotagged. All filters, search options and related content on the website use the visitor’s location to show relevant content nearby.

*EXTENSIVE FORMS MODULE*
As mentioned, attracting new members and donations is the main KPI for the website. In order to achieve this, an advanced forms module was developed which allows Natuurmonumenten to easily create complex forms using drag and drop technology and connect the forms to their CRM (Salesforce) and marketing software (Selligent). A lot of complex business logic (conditional validation, masks, multi step forms, spam prevention) can be included in the forms, as well as API integrations with their member database, address lookups, IBAN lookups, and much more. Also form fields can be reused in different forms, which makes changing 1 specific field in all forms (±20 currently) a breeze. The module is fully open sourced.

The results so far speak for themselves: The numbers of form submissions that were be matched to a known CRM user has gone up from 50% to 85%, leaving a lot less work for service employees to do this manually. Also, the number of partially filled out, abandoned conversion forms has shrunk from 8% to 2% in the course of a few months raising the number of conversion by 6%!

*TICKETING INTEGRATION*
Natuurmonumenten organises a lot of activities to let the public enjoy and discover the beauty that our nature has to offer. In order to sell tickets for those activities, an extensive integration and synchronisation with external ticketing software has been developed. Content and participants are synchronised across the website, ticketing software, CRM and marketing software in real time.
Community contributions
During the development of Natuurmonumenten.nl (which ran in parallel with our Chupa Chups project), Burst developed a headless Drupal 8 and React framework called Headless Ninja (HN). It is fully open sourced and consists of multiple smaller sub modules for easy extension and high performance. By also publishing the Javascript parts on NPM a headless React/Drupal website can be created instantly.

* HN module to send structured data from Drupal to React:drupal.org/project/hn
* HN Javascript package to pull data from Drupal: github.com/burst-digital/hn
* HN React package to show retrieved data in React: https://github.com/burst-digital/hn-react
* HN React Webform package to show forms from Drupal, including all business logic: https://github.com/burst-digital/hn-react-webform
* A backup script for Drupal 8 websites hosted on Platform.sh (https://github.com/burst-digital/D8-S3-backup)

Finally, we submitted many patches for the Cloudinary module to better support Drupal 8: https://www.drupal.org/project/cloudinary, raised quite a few issues for the Webforms module (https://www.drupal.org/project/webform/) and submitted patches for the Salesforce (https://www.drupal.org/project/salesforce/) and Geocoder (https://www.drupal.org/project/geocoder/) modules.
Screenshot