Relaunching wwf.ch on Drupal 8
Background of the project
WWF’s mission is to stop the degradation of the planet’s natural environment and to build a future in which humans live in harmony with nature. To achieve this goal it is important to have an inspiring and convincing website that educates about environmental topics, shows all the various WWF projects and actions, tells success stories, and informs about how people can help. https://www.wwf.ch, the main website of WWF Switzerland, was not fulfilling this goal anymore. There was a lot of content but it has grown organically without system and structure. “Our website was very sober. Much information, little emotion, almost like a Wikipedia page. Without emotions, it is difficult to inspire our supporters and build a lasting bond with them. But that was exactly our goal, “says Gregor Nilsson, then Chief Digital Officer of WWF Switzerland, today CEO of getunik. So getunik has been engaged to relaunch the website and created a new content strategy and a compelling design. acolono GmbH helped to launch the project in 2017, was responsible for some features like the search implementation, and is supporting the WWF since then. In 2019 a completely new section has been added to the website: The WWF guides for fish and seafood, souvenirs, fruits, and labels provide valuable information about what items should be consumed, bought, or imported to Switzerland – designed by getunik and implemented by acolono GmbH. The WWF guides can be found on the website, for example here: https://www.wwf.ch/de/fischratgeber.
Targets of the project
Redesign the site and improve the content structure Stefan Schefer, responsible for the project at getunik, recalls: “This website was a bit of a wild animal. We first had to find out where and how we had to tackle it. When designing, we were often faced with the question: what is at the beginning: the chicken or the egg? The visual concept or the content?” Satisfy stakeholders WWF Switzerland has many stakeholders with different needs as far as the website is concerned. getunik had to find a way to cover all of them without losing sight of the essentials. Gain the trust of the visitor Like most NGOs, the WWF relies on donations. So one of the main goals was always to gain the trust (and the donation) of the visitor with the new website. Exciting storytelling With beautiful, sometimes moving pictures and exciting storytelling, visitors should be encouraged to immerse themselves in an article or topic.
Results of the project
Purified, adaptable, trilingual Despite all the new content, the website is now better structured and leaner. On fewer pages, the WWF story is told using rich content and multimedia. The entire site is now also optimized for smartphones and is accessible in three languages: German, French and Italian. Various animals are presented on individual pages. For example, the visitor learns about the life of the gorillas through texts, pictures, and videos, why they are threatened, and what the WWF is doing about it. The visitor is also able to discover the numerous regions in which the organization operates through pages on their habitats and biodiversity. The donation calls are kept deliberately discreet and are only shown when the visitor has a strong interest in a project. Visually high-quality call-to-action elements and a simplified donation process helps to drive more donations. Numbers don’t lie In 2018 there has been a remarkable increase of important metrics like website visitors, session duration, goal completions, and conversion rates. With the addition of the WWF guides, those numbers increased even more since then. A role model for more WWF websites The website is so convincing that other country-specific WWF departments are currently relaunching their website based on this project. “It feels great to see the WWF being successful in pursuing its mission and that acolono GmbH and our favorite Open Source Software Drupal are contributing to it,” says Christian Ziegler, CEO of acolono GmbH. Technical challenges of the project Stay up-to-date during development As the development for this website was lasting about 2 years and while some Drupal 8 features and modules still have been in heavy development, it was not so easy to stay up-to-date with the latest technology. Complex editorial requirements Since the design of the website is very complex and the WWF content editors should be able to create elaborate pages by reusing existing design elements without having to involve a site builder or developer, the site relies on a components approach based on the Paragraphs module. Furthermore dynamic and reusable content elements are supported. Special content plugins can be used to pull in Drupal constructs like views, blocks, webforms etc. into paragraphs, thus making the system very flexible. The editorial workflow supports advanced scheduling and allows multiple user roles to edit different sections and content elements. For translating the content the Translation Management Tool module has been used and configured, so editors can request content to be translated. Multilingual content Creating multilingual websites is not a big challenge using Drupal 8. However, some special requirements like a fallback language for search results or some issues in translating special paragraph types needed to be resolved. CRM integration Some third-party tools (e.g. a CRM) needed to be aware of user inputs like webform submissions or newsletter subscriptions. By using the REST functionality from Drupal 8 Core some custom adoptions to the webform REST integration were necessary. Enhanced analytics Setting goals and measure success is key for donation-based NGOs. To ensure maximum flexibility and portability, Google Tag Manager has been deployed alongside a Data Layer. A custom Data Layer API module has been developed, that provides simplified methods to add events like for example newsletter subscriptions to the Data Layer. Component-based HTML and styling The concept of components is at the core of the overall architecture. Many of the existing components are implemented as a Paragraph type with some custom Drupal processing and theming, but there are other implementations as well (e.g. special renderer plugins). Search and document search The search is leveraging the search API and the facets module. Splitting up one taxonomy into multiple facets was one of the challenges. Another was having dependent facets, glossary, or autocomplete search facets. Also, some custom search API processors like one for improved reset links have been developed for this project. Importing and updating guide content The WWF guides content needed to be imported from CSV files. For example, the ratings for the fish guide are updated regularly, thus having an easy importing process was one of the requirements. Using the migration API importers for all guides have been created. The guidebooks can be found here: Fish- and seafood guide www.wwf.ch/de/fischratgeber Ask which fish and seafood come from sustainable sources Fruit and vegetables guide www.wwf.ch/de/fruechte-und-gemueseratgeber Find out which fruits and vegetables are currently in season. Food labeling guide www.wwf.ch/de/lebensmittel-label-ratgeber Anyone who buys ecologically and socially usually looks to labels. The 31 major food labels were evaluated for sustainability. Souvenir guide www.wwf.ch/de/souvenir-ratgeber Buying souvenirs? Get an overview of what is allowed and what is not in the souvenir guide.
Contribution to the Drupal-community
While creating and maintaining the website it happens that we run into issues in existing modules or even Drupal Core. acolono GmbH is contributing back all the fixes and modules which were improved or developed for WWF.