Save the Children

More than a hundred years focused on childhood

Shortly after the end of World War I, Eglantyne Jebb took to the streets of London to distribute leaflets with the image of two Austrian children, marked by the effects of war. Next to the photo, a message: "Our economic blockade has caused this. Millions of children are dying of hunger". On 19 May 1919, Eglantyne Jebb and her sister Dorothy Buxton founded Save the Children at a mass event in London.

Today, Save the Children is a leading global NGO dedicated to the protection of children and present in more than 120 countries. In Spain, it has offices in Madrid, Catalonia, Andalusia, Valencia and the Basque Country.

To effectively develop its important work, Save the Children Spain needed a complex and multifunctional website from which to carry out operations as diverse as publishing news, managing communications with the press, receiving donations, creating crowdfunding campaigns or providing training.

This website also needed to be perfectly aligned with the needs of the different teams working in the NGO, and especially with the tools of their choice.

Metadrop and Save the Children: a successful relationship

Metadrop and Save the Children have been working together since 2015 when a first, Drupal 7-based website was developed.

From this first website the user could collaborate with the NGO in many ways: sign in support of projects, make donations, become a member or share web content in social networks. The website also centralizes the information and public activity of the NGO, being the reference point for all institutional information, news, contact, etc.

This first site also featured several mini-sites such as Retos (challenges) or the Escuela de Padres y Madres (School for Parents) that allowed the creation of crowdfunding campaigns by users of the platform or access to free online training after registration.

The website more than fulfilled its objectives, resulting in a solid and functional platform capable of smoothly managing a multitude of interactions by both anonymous and logged-in users and of supporting both the main site and the minisites from a single code base.

Perhaps most importantly, the success of the website strengthened the relationship between Save the Children and Metadrop and provided a basis for closer collaboration in the future.

Migrate, grow, integrate.

The publication of Drupal 8 in 2015 was a revolution. On the one hand, the new version of Drupal was more solid, professional and powerful than ever. On the other hand, the huge changes introduced meant that migrating from Drupal 7 to 8 was to be a considerable task, even more so in pages of a certain size.

On this occasion, Save the Children and Metadrop joined forces again.

It was not only a matter of migrating all the existing content and users, guaranteeing the continuity of all the site's functionalities and ensuring a transition that was almost invisible to the user. The new site had to grow, benefiting from the improvements introduced in Drupal 8; and integrate seamlessly into the ecosystem of services and platforms used by the NGO, including the popular Salesforce CRM.

A real challenge.

Development

A solid foundation

The importance of a website's foundation cannot be overemphasized. For this development, Metadrop's team expanded its decalogue of good practices with the aim of accelerating the process and laying a solid foundation that could not falter at the most unexpected time.

• Our best design tools: As in Drupal 7, the design of the website is based on a proposal by Save the Children but Metadrop has the approval to propose alterations and alternatives. Following best practices, the design is mobile-first, responsive and accessible. For the theme of the website we benefit from the use of tools such as SCSS, Autoprefixer, SMACSS or Gulp, which increase our productivity. In addition, we make extensive use of Drupal APIs and best practices.
   
• Well-tuned development environments: All developers work on identical development environments using Docker, so no discrepancies occur. In addition, tools and techniques are used to discriminate between environments to ensure that undesired changes are not deployed, thus avoiding wrong analytics, problems with payment gateways or leaking of sensitive information. Finally, the Save the Children team has access to testing in development environments at all times, so they can directly check the work done.
   
• Continuous Integration System: As in all our projects, we have a Continuous Integration system, responsible for testing and code static analysis for each branch sent to the central repository. This ensures that nothing is broken and provides additional information when making code revisions.

Tools for everybody

An NGO the size of Save the Children involves many people with different interests and needs. The website has to be able to provide tools for everyone.

Most of the functionalities required custom developments; in fact, the high level of personalization achieved in this project is one of its great milestones: in total, we developed more than 35 custom modules, several patches solving problems of contributed modules and three sandboxes.

• A very different e-Commerce: An NGO has to accept online payments, but this does not mean that traditional e-Commerce is the solution. By its nature, donations, signatures and memberships require a radically different approach that was solved by creating new types of entities and connecting our new system with the Drupal Commerce API
   
• Expediting press releases: Save the Children's public dimension means that a smooth and fluid relationship with journalists is crucial. The site allows quick registration of interested journalists and live access to the press releases' archive. In addition, Metadrop developed a unique solution to centralize the sending of press releases in a single page that allows to choose an audience of journalists applying several filters, compose the email, preview it and send it.
   
• Compose complex pages with simple tools: The NGO team needed to be able to quickly create new pages without having to use complicated code or tools. Metadrop created an advanced page type with access to a library of reusable components and the ability to embed elements such as donation or signature forms. The team is now able to build complex, multifunctional pages in a matter of minutes.
   
• Donate and sign in a few clicks: Flows that involve several steps are a problem: if the user finds it complicated, too long or wrong, the abandonment rate can become unsustainable. For this reason, Metadrop developed a series of custom solutions that, integrated with systems as robust as Webform or Commerce, make processes such as signing a petition, making a donation or becoming a partner to be transparent, agile and frictionless (including the ability to pre-populate data or skip steps in the flow).
   
• Search API to the rescue: The more complex a page is, the more important it becomes to have a good search engine capable of distinguishing and ranking search terms. Fortunately, in Metadrop we are Search API experts and we made good use of this tool to refine the search engine and even expose a series of custom filters that streamline the search by grouping the results by criteria provided by the client.
   
• The relevance of good analytics: Given the volume of interactions, Save the Children attaches puts a great deal of emphasis on information and analytics. This requires the website to send the correct data in a timely manner. For this reason, Metadrop has developed and promoted several tailor-made solutions and tools that include the sending of data at both front and backend levels, the configuration and customization of meta-tags per page (including UTM parameters), the use of URL shorteners and the correct integration with payment gateways to avoid data loss.

A successful migration

The migration from Drupal 7 to 8 was one of our main challenges. Fortunately, we have the excellent tools that Drupal 8 provides; but the size and specificities of the original website augured problems that had to be solved.

• Migration of all content: For clients involved in a migration process, keeping the integrity of their website is critical. To do so, it is necessary to ensure the persistence of all content down to the smallest detail, as well as the URLs, so that after the change everything remains on their place and errors that result in penalties from search engines are avoided.
   
• Seize the opportunity to improve: In several cases, the migration was used to improve the site architecture and take advantage of the new functionalities introduced by Drupal 8. In the case of images, the migration turned them into Media-type entities: reusable, more robust and easier for the client to use.
   
• Imaginative solutions for complex problems: Migrations are never easy: the existence of nested content (paragraphs) or the disappearance of images embedded in the text after a change of URL required all our imagination to reach the optimal solution.

A perfectly integrated Drupal

Multidisciplinary teams often have a range of tools and services that are challenging to integrate and, if not properly managed, are a source of problems.

In the case that concerns us, Save the Children uses two payment gateways (RedSys and PayPal), an email delivery system (Mandrill) and, above all, a complex and advanced CRM (Salesforce). Our efforts would be useless if the new website was not able to interact correctly with these systems. In this case, we even went a little further and added the ability to monitor from within Drupal the status of the services and remotely correct errors.

• Salesforce + Drupal = total control: The connection between the two systems includes the generation of leads in Salesforce and the total integration of existing users in both platforms, correctly differentiating potential users from members. There's also synchronization of member signups, donations, and signatures so that Salesforce is always aware of what's happening on the web. The nature of these interactions can be both one-way and two-way. Finally, if the user wants to go into manual mode, we enable the ability to export data in the DataLoader.io standard used by Salesforce. At Save the Children, Drupal and Salesforce talk to each other more than ever.
   
• All the power to the end user: To make life easier for the user, Salesforce integration is paired with a powerful and detailed administration interface from which, without leaving Drupal, the client can perform a multitude of operations, checks, settings, and adjustments.
   
• Did something go wrong? Report and correct: Things don't always go well between interconnected services. Sometimes a small service interruption is enough for a payment not to be notified or a membership registration not to be reflected. We created a series of custom solutions that notify via email of connectivity failures with Salesforce, allow us to know the status of migrations or the existence of conflicts in the status of a payment and, if there are errors, allow the user to execute re-synchronization.
   
• Mandrill Mass Mailings: When it comes to sending mass notifications or press campaigns to thousands of emails, a robust delivery platform is crucial. Save the Children's website integrates seamlessly with Mandrill.

The future

Save the Children has been a very stimulating challenge for Metadrop both because of the size of the project and the complexity of many of the tasks.

This website has served to accelerate collaboration between teams, refine and extend good practices and increase our knowledge in areas as diverse as Salesforce, payment gateways, or the different forms of integration with Analytics.

We have made great progress and extended modules such as GA Push, Metatags or Commerce. This has pushed us to make a lot of custom developments that can be contributed to the community. It has also led us to refine the content creation system to make it more powerful without losing simplicity.

Most of these improvements and learnings have been immediately incorporated into our day-to-day work and allow us to envision future developments that will make Save the Children's website an even more powerful platform.