THE CASE:
www.aerzte-ohne-grenzen.at
WHY DRUPAL?
Drupal was chosen because it
- provides advanced workflow features for editors,
- has powerful layout options and can provide an intuitive and flexible editorial experience using paragraphs,
- loads fast even during high traffic times because of its advanced caching features,
- is secure, not only because of the great work by the drupal.org security team,
- is Open Source,
- and is driven by a huge community that is providing enhancements and support for nearly every use case.
THE PROJECT:
After about a year of development, the project went online with Drupal version 9 in May 2021. It has been built with storyengine, a thunder.org-based Drupal distribution by acolono, which we developed as a starter kit for our projects.
Simple, robust and flexible information architecture
An important goal for the relaunch of the site was that editors could quickly and easily create informative landing pages and inspiring content enriched with media. For this purpose, we have supplemented our Drupal distribution storyengine with a couple of paragraphs specially developed for the customer. As a result, we were able to save many of the content types and taxonomies, and the user interface for creating content has been greatly simplified and standardized. With the current system, which has the usual features of thunder (scheduling, workflows, media handling, ...), and the large number of paragraphs, it is now possible to create a variety of different content very flexibly and bring it online in a very short time.
Strong focus on user needs
A target group analysis was carried out together with the MSF team. What are the target groups? What needs are there when using the site? The result was a definition of personas and a list of user stories, important knowledge for information architecture and design. An important finding was that for many users the stories and reports from the fields and countries are of great importance. This particularly valuable content should be presented in a multimedia and visually powerful way.
Simple page structure and optimization of the user journey
The old website was the result of a migration from different websites and systems. The basis was also an existing Drupal instance from MSF, which was developed for the requirements of several MSF country organizations. As a result, the system was unnecessarily complex and the page structure needed work.
As part of the relaunch, the page structure was completely redesigned and user journeys for different target groups were analyzed and optimized. The result is a greatly reduced main menu that only contains the most important subject areas. A drop-down menu was deliberately omitted in favor of special overview pages including a kind of submenu using anchor points. The most important entry points for potential employees and for donations, are always in focus as sticky elements.
Fast loading times and improved user experience on mobile devices
The paragraphs and components developed for Storyengine and MSF are all documented in a style guide (done with storybook.js.org), have been optimized for mobile use and are tested regularly.
The site itself does not include third party libraries, with only a very few exceptions. Other measures, such as the strong use of responsive image styles, optimized image compression and lazy loading, as well as a lean HTML structure contribute to fast loading times. Care was also taken to ensure that the page is fully functional even without JavaScript. Only the integration of sliders in hero elements is not always ideal in terms of loading time, a compromise in favor of certain user needs (keyword “multimedia experience”).
Simplified online donations
An important purpose of the website is to conduct and promote online donations. For this, MSF Austria relies on FundraisingBox. A flexible integration of the donation forms was implemented as part of the project. Specially optimized paragraphs for call-to-actions and donation teasers guide users context-specifically to the donation forms and can be placed very flexibly by the editors. For donation certificates, the system has been supplemented with PDF generation and order confirmations. In addition, the highly configurable webforms are used for campaigns and employee recruitment. As a result the MSF team has every opportunity to put campaigns,
landing pages and donation forms online quickly and flexibly.
A real partnership
We have enjoyed working with an organization like MSF that knows what it wants to achieve with its website. We thank you for the trust you have placed in us again and look forward to further cooperation. Long-term and transparent customer relationships are important to us. And working with people who share our values and with whom there is such a good basis for communication is particularly valuable and a pleasure.
THE CHALLENGE:
Migration of the content
The migration of the content from the old website was a particular challenge. Mainly because the content often had to be converted into a completely new structure. Media, quotations and other elements were extracted from pure html and re-saved as paragraphs. Image descriptions, file names and image formats have been optimized. But also the initial conception of the migration was a big task, as a migration path had to be defined for a large number of content types, fields and taxonomies in order not to lose any content.
Special requirements for media publishing
A special requirement was that media could be searched and integrated via a central media server (API).
For this purpose, an existing module for integrating the OrangeLogic DAM into Drupal has been slightly improved, and published on drupal.org: https://www.drupal.org/project/media_orange_logic.
In addition, when using media from the Drupal Media Library, it should be possible to overwrite certain content-related information, such as the image description. In the old website, separate FieldCollection entities were used for this, which led to some problems and unnecessary complexity. After some considerations, we found a better solution and created a new media library widget and published it here: https://www.drupal.org/project/entity_reference_media
Image descriptions and video start / end times can now be overwritten directly in the media reference as required. We believe this solution is potentially relevant to many websites.
Presentation of maps and geographical information
The MSF team is active in many regions and countries around the world. Presenting this information accordingly was also a nice challenge.
We decided against using Google Maps or similar services and designed a simple solution using SVGs.
In this way, editors can place configurable and animated world maps in the content as paragraphs that contain only the most important information and are extremely lightweight and optimized for display on mobile devices.
There is the option of storing a link for each country and so the map can also be used as a navigation element.
A certain zoom level can also be defined for the display of individual countries. In addition, there is a dropdown of all activated countries for faster navigation.
- Example world map: https://www.aerzte-ohne-grenzen.at/ueber-uns#wo-wir-helfen
- Example of a detailed zoom: https://www.aerzte-ohne-grenzen.at/afghanistan
We have also published a separate module for this on drupal.org for general use: https://www.drupal.org/project/worldmap
Tracking and data protection
As with many other websites, the protection of website users' personal data is of great importance. Many regulations must also be implemented here in accordance with the GDPR. We are increasingly relying on the API from legalweb.io, which offers optimized legal texts and user options. In cooperation with the operators of legalweb.io, we have created the Drupal integration for this and are also using it for this project:
https://www.drupal.org/project/legalweb_cloud
Finally, after consultation with the experts from legalweb.io, we improved the JavaScript and the user interface of the popup again in order to optimize the click rates within what is permitted.
Many providers and services do not comply with the law here, but in this case that is a focus and of course given.
In addition, we have programmed a module that enables opt-outs for services such as Matomo: https://www.drupal.org/project/tracking_options
The module provides the necessary selection options for opt-outs (and opt-ins) as tokens, which can e.g. also represent the correct data protection regulations using JavaScript.
More features:
- It can prevent the analysis scripts from loading by default (opt-in)
- Uses the browser storage instead of a cookie for the user settings
(no iframe is required, the element uses CSS / font from the site and thus can be adopted easily to the website style) - Opt-out for tools with increased data protection such as Matomo
- Provides a token and a block to place the checkbox and translatable text on a page
- This module respects the Do-Not-Track browser setting by default.
- Translatable via Drupal Interface Translations
- Simple JavaScript (no jQuery)
THE SUMMERY:
The project is a nice case study for a world-famous organization using Drupal and shows how Open Software in general and Drupal in particular can best support an NGO and cover specific requirements. The project also shows that Drupal is a very good choice when it comes to enabling editorial teams to flexibly design content, landing pages, campaigns and donation forms, to put them online promptly and to present them in a modern and appealing way. Last but not least, we had a lot of fun working on this project, also thanks to the good cooperation with the MSF team. The employees of acolono and MSF put a lot of heart and soul into the project and are very happy with the outcome.
“We have valued acolono's professional and broad-based team for years. They are always one step ahead, know our needs, give us comprehensive advice and provide impetus for improvement. The joint relaunch project in the challenging Corona year worked flawlessly remotely. Of my 10 launches and relaunches so far, this was my most pleasant and problem-free. It was great fun.”
Andrea Buhl-Aigner, Head of Digital Communications Unit / Ärzte ohne Grenzen Österreich