SOS Children’s Villages launches on Drupal | A case study

May 07, 2018

Joris Snoek - Business Dev
+31 (0)20 - 261 14 99

**The new platform for SOS Children's Villages was recently launched, after 3 sprints with a lead time of 3 months and a team of 6 people on average, we are proud to announce this new platform. Special thanks to the SOS team and Digital Project Lead [Mandy Plugge](http://www.mandyplugge.nl/) - for the award and the excellent cooperation. So, without further ado.., powered by Drupal.., a recap of the first phase:**

## Discovery with value

SOS Children's Villages had already built up a substantial *backlog* last year: desired functions for the new website. During the *kick-off meeting* these functions were discussed and prioritized.

After an analysis of these functionalities it turned out [Drupal cms](https://www.drupal.org/) was the most suitable cms (content management system).

The *kick-off meeting* was part of sprint 0 (project discovery phase), this phase had a lead time of one week. Such a week ensures that all information is mapped to start production. In addition to the aforementioned kick-off meeting, the following will be included during this *discovery week*:

- Sharing and submitting existing documentation (style guides, personas, wikis, analytics, etc).
- Consult and analyze technical infrastructure.
- Consult roles and responsibilities.
- Inventory and audits of existing content, assets, resources, design patterns, etc.

But also:

- Project and product limitations: politics, technical, personnel, resources and assets, brand, etc.
- The competitive landscape of the product / brand.
- Brand and its characteristics, visual style, values and personalities.

For more info about a valuable project discovery, check [this great blog from Lullabot](https://www.lullabot.com/articles/beyond-discovery-designing-a-more-valu...)

### Valuable discovery
So, during a *discovery phase* we want to immediately produce value and not get stuck in an [analysis paralysis](https://en.wikipedia.org/wiki/Analysis_paralysis). We delivered concrete results in the form of:

1. A concept design.
2. Clickable [wireframes](https://en.wikipedia.org/wiki/Website_wireframe), immediately developed in the cms - in this case [Drupal](https://www.drupal.org).

## Lift off: assessment

After the *discovery week* we had enough information to plan the project globally and start production. The following information was roughly charted:

1. *Goals*: why do we do this project? What do we want to achieve?
2. *Sources*: where does the traffic come from?
3. *Target groups*: what *kind of people* come to the website?
4. Desired functionalities

Drupal project kick-off board

A rough summary of the assessment that resulted from the *kick-off meeting*:

### To facilitate the top goals
The new Drupal platform should **facilitate** the following goals for SOS Children's Villages for content managers:

- Optimization of donations
- Conversion optimization
- A / B testing
- Customer journey management
- CRM integration
- Mobile first
- Marketing automation management
- Being scalable: using future techniques relatively easily
- Optimization of account management: implementation of a *My environment* for existing donors
- Optimization of recruitment
- Lower bounce rates

### Top sources
Where does the *website traffic* mainly come from:

- Search engines
- CPC / Ads
- Newsletters
- Direct
- Social media
- External sites
- Hard copy

### Top target groups

- Potential donors
- Businesses
- Foundations
- Schools
- Existing donors
- Press
- Participants of challenges and events
- Volunteers
- Applicants

### Top site functions

*1. Flexible content management*
In which user-friendly work can be done on, among other things:

- Donation forms
- Landing pages
- Static pages
- News
- Homepage

In the first version of the Drupal platform created, there were almost 300 pages with very diverse content and layout facilitated by the Drupal cms.

*2. Form builder*
SOS Children's Villages wanted to be able to manage flexible donation forms: create unlimited new ones, configure them and place them on all pages - at any position within that page. Given the desired flexibility, the complex data flows and external integrations, it was decided to develop this in a [custom Drupal module](https://www.drupal.org/docs/8/creating-custom-modules).

The following functions were included in this *form builder* within Drupal:

- Conditional fields
- Inline real-time validation
- Postcode API integration
- IBAN check
- Adyen integration
- SOAP CRM integration ([XML WSDL](https://www.w3schools.com/xml/xml_wsdl.asp))
- Personalized *thank you pages* -and *thank you e-mail*.

*3. Content management workflow*
Content management roles were desired so that SOS Children's Villages can determine *who does what*. This also determines the workflow: how does a page go from *draft to published*. The Drupal platform also facilitates workflows for modification of existing pages, requiring the review of an *editor*.

*4. Testing*
Not a function, but constantly a crucial part for a successful, scalable and fast website. The following test components are included in the overall plan:

- Peer reviews
- Functional testing
- Load testing
- Pen testing: we tested the platform's hack potential
- Unit / Behat testing

*5. Other desired 1st phase top functions*

- Internal search engine
- E-commerce tracking using Google Analytics / data layer
- News & blog
- Vacancies
- Press releases
- Events
- Project map

An explanation of the above 5 parts:

## 1. Flexible, consistent content management
A great deal of flexibility for the layout of pages was desired, for this it was not possible to define standard [content types](https://www.drupal.org/docs/8/administering-drupal-8-site/managing-conte...) and *templates* - that would limit the content team of SOS Children's Villages too much. That is why we used the [Paragraphs](https://www.drupal.org/project/paragraphs) technique.

Currently ~ 300 pages are all created within this technique, which suits SOS Children's Villages because they are relatively free in layout, but can not be created outside the house style.

It's good for Lucius too because we do not have to help with creating pages and do not have to (re)write content types. Also code-wise, it is easier because all content goes through the same code and configuration.

### Rows
Through this *Paragraphs* technique, content managers can add *rows* and add unlimited *columns* per *row*. An example of the added rows on the homepage:

Drupal rows and paragraphs

This homepage consists of 6 rows; the content managers of SOS Children's Villages can add, delete and organize rows themselves. Content managers can also set the following per row in the *Drupal backend*:

Drupal paragraphs content management per row

1. Does the row have to be displayed in full width? When this option is checked, this row will occupy the entire width of the screen, such as the *header image* of the frontpage in row 1.
2. SOS Children's Villages can set the color of the row themselves. To monitor house style, these are limited to a few options.
3. Content managers can set the margins per row.

### Columns in rows
Each row can have *columns* (paragraphs) added, below is an example of the row 'Where are we active' - this contains 2 columns:

1. Text
2. Image

Drupal paragraphs content management images en texts

### Different types of columns
In the above example you can already see two of the 7 types of *columns* available: *Text* and *Image* . Currently, the following types of *columns* can be added to a *row* by SOS Children's Villages:

Drupal paragraph  types content management

These *columns* can be added per *row* and removed and ordered using a drag function.

### Settings per column
We are going to have a deeper content management level: the content managers of SOS Children's Villages have settings for a specific *column* in the *backend* of Drupal. These settings vary by *column* type (text, image, video, etc). An example of the *Image column*:

Drupal image paragraphs content management

1. Make images clickable or not.
2. Set the background and text color.
3. The placed image can be changed here.
4. Insert an additional image.
5. If multiple images are placed (eg a list of partner logos): indicate how many images are placed per row.
6. A row consists of 12 width parts, each column can have 1 to 12 width parts set. This way you can determine the *width distribution* of *columns* in a *row*.
7. Add a new Paragraph (column) in this row.

## 2. Form builder
A big part of this Drupal platform is the *form builder*. The content managers of SOS Children's Villages can create and configure forms themselves and place them as a *column* anywhere on all pages. In this way they can create unlimited forms for all target groups, sources and campaigns. As a result, unlimited A / B tests can also be run for conversion optimization.

### Data flow
Per form, content managers can determine how the completed data flows to the required CRM fields.

### Conditional fields
Certain selection fields are dependent on a previously chosen option, in the example below you see that when choosing *one-time payment* two payment methods must be available. But when choosing *monthly payment* only one payment option may appear.

Drupal conditional form field

### Inline real-time validation
Content managers can set how to validate each field and which error message appears. If a donor clicks away from a form element, the entry is immediately checked and feedback is displayed:

Drupal form validation inline

### Postcode API
It is linked with the API of [Postcode.nl](https://www.postcode.nl/), as soon as you enter your postcode and house number, the system automatically searches for the street and place name. If the postcode is not found, people can enter this information manually. This is necessary in the case of new residential areas, which have not yet been added as official zip codes.

Drupal postal code api integration inline

### IBAN check
As soon as a donor enters an IBAN, a check is immediately done via [iban.com](https://www.iban.com/). It is immediately indicated inline whether the IBAN is correct:

Drupal IBAN api integration inline

### Adyen integration
The online payments are handled and linked back via [Adyen](https://www.adyen.com). The following payment methods are integrated:

- iDEAL
- Credit card (MasterCard / Visa)
- American Express
- Bank transfer
- One-off authorization

### CRM integration
In the end, all data is processed in the central CRM system of SOS Children's Villages. This CRM is used by SOS Children's villages worldwide.

### Thank you page
Once the payment is made, donors see a personalized *'thank you' page*. The content managers of SOS Children's Villages can use *placeholders*, which are filled in for the donors with first name, address, donation amount etc.

There may be any number of *'Thank you' pages* generated by the content managers. These pages can be linked to a donation form, so that a personalized thank you message appears, aimed at a specific campaign.

### Thank you e-mails
Similar to the *thank you pages*, everything that has been put together by content managers is also emailed to the donor.

### Mobile first
Given that the majority of the donors visit the platform via a mobile device, we have optimized for mobile. Exceptions like the iPad 2 and Samsung Internet are included.

For example, form elements are given a full width, so that they are easily *tapable*:

Drupal responsive form

## 3. Content management workflows
Within SOS Children's Villages there are content managers with different roles, within these roles, workflows with *revision management* are set up. For example, *drafts* for new and existing pages can be created by a content manager, which can only be published by, for example, an *editor*.

Drupal workflow content management

**Workflows have also been configured for published pages**, so that the live pages can be adapted and checked - of course without the public seeing this.

## 4. Testing

> If it ain’t tested, it doesn’t work.

Testing: often a development is pushed under because of time pressure, but we value it a lot and provide enough space in budgets and time for this. The following tests are carried out continuously:

### Peer reviews
Developers test each other's code. No matter how good you are as a developer, at a given moment you can be so engrossed that sometimes you do not see your own mistakes. A lot of code and layout is automatically screened by the correct plugins. But a manual check is also necessary, code is screened mutually among others:

- [Coding standards](https://www.drupal.org/docs/develop/standards) and syntax
- Architecture
- Scalability
- Non-[Dry](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)-ness (Don't Repeat Yourself)
- Security
- Speed
- Format files and folders

### Functional testing
Functionalities for the end users (content managers and website visitors) are tested manually; as many [edge cases](https://en.wikipedia.org/wiki/Edge_case) as possible are invented to make all scenarios as bug-free as possible. After completion, the platform is once again tested by SOS Children's Villages themselves, their test team ranged from 2 to 10 people per sprint. In this way, the majority of the edge cases were discovered.

### Load testing
A slow platform is extremely bad: visitors drop out and your SEO goes to rubbish. That's why we always perform *load tests*: fire up an increasing amount of traffic on the test server and see when it drops. This must be well above the number of visitors that have been discussed, in this distinction between logged in and logged out is of critical importance.

### Pen testing: try hacking the server
Security, an important part, our colleague and [ethical hacker](https://en.wikipedia.org/wiki/White_hat_(computer_security)) Nick has performed [pen tests](https://en.wikipedia.org/wiki/Penetration_test) on the server where the new platform eventually went live. This resulted in a number of issues that have been resolved, resulting in an optimally safe platform.

### Unit / Behat testing
Unfortunately this was not yet feasible within the current deadline, but we will implement [unit](https://nl.wikipedia.org/wiki/Unittesten) and [Behat](http://behat.org/) tests in the next sprint.

This way you can ensure that already completed functions are automatically tested as soon as new functions are implemented. Through this automatic testing of already completed items, we know for sure that everything remains stable and high quality is delivered. Also called [regression testing](https://en.wikipedia.org/wiki/Regression_testing). ‘Auto testing your business expectations’, as Behat describes on [its homepage](http://behat.org/en/latest/).

## 5. Other functions

### Search
The previous version of the website did not contain a search function, in this first sprint we added it -including search suggestions:

Drupal search auto complete

SOS Children's Villages can indicate whether a page is important enough to end up in these search suggestions; all search results are displayed on the extensive *search results page* anyway:

Drupal search results page

### Credential management
The Drupal platform of SOS Children's Villages *talks* with a total of 6 [API](https://en.wikipedia.org/wiki/Application_programming_interface)’s, these all know log in data that you do not want in *hard* code - because of security reasons. We therefore store these *credentials* in a different, secure way.

### Redirects
The URLs in this new platform may differ from 'old' URLs. To redirect via a [301](https://en.wikipedia.org/wiki/HTTP_301) the [redirect](https://www.drupal.org/project/redirect) module is used, this is mainly intended to keep SEO intact and to ensure that links on external sites do not end as a *page not found*.

### E-commerce tracking
Google Analytics was used as *E-commerce tracking* tool, it was implemented using the [Google Tag Manager](https://www.google.com/intl/nl/tagmanager/) and the [data layer](https://developers.google.com/tag-manager/devguide).

## It’s alive, alive! Celebrated with cake and champagne
The go live was done in stages, we first did a *soft launch* followed by the hard launch on 1st February.

In accordance with the agreed deadline

Drupal celebration with cake

Drupal celebration with champagne

## Post-go live breathing space and the following sprints
After the go-live, 2 weeks of breathing space was scheduled for any hotfixes that might be needed. There were no real hotfixes needed, except for a few (small) 'highly desirable functions'. These were immediately implemented the week after going live.

In the coming period it will be built up considerably, among other things will be added as an extension:

- Login section for donors
- [VWO](https://vwo.com/) integration
- Cloning pages
- Integration with Project management system
- World map

## Nerd alert
Top techniques and tools that were used for this development:

Nerd alert

## Top technique used
- [Docker](https://www.docker.com/)
- [Drupal cms](http://drupal.org/)
- [Bootstrap HTML framework](http://getbootstrap.com/)
- [Drush](http://www.drush.org/)
- [Drupal Console](https://drupalconsole.com/)
- [Adyen](https://www.adyen.com/)
- CRM (SOAP koppeling)
- GIT

## Installed Drupal modules
In addition to the 4 custom developed Drupal modules, the following contrib modules were used:

- [addtoany](https://www.drupal.org/project/addtoany)
- [admin_toolbar](https://www.drupal.org/project/admin_toolbar)
- [backup_migrate](https://www.drupal.org/project/backup_migrate)
- [colorbutton](https://www.drupal.org/project/colorbutton)
- [cookieconsent](https://www.drupal.org/project/cookieconsent)
- [ctools](https://www.drupal.org/project/ctools)
- [editor_advanced_link](https://www.drupal.org/project/editor_advanced_link)
- [entity_reference_revisions](https://www.drupal.org/project/entity_reference_revisions)
- [google_tag](https://www.drupal.org/project/google_tag)
- [imce](https://www.drupal.org/project/imce)
- [linkit](https://www.drupal.org/project/linkit)
- [metatag](https://www.drupal.org/project/metatag)
- [panelbutton](https://www.drupal.org/project/panelbutton)
- [paragraphs](https://www.drupal.org/project/paragraphs)
- [paragraphs_browser](https://www.drupal.org/project/paragraphs_browser)
- [pathauto](https://www.drupal.org/project/pathauto)
- [redirect](https://www.drupal.org/project/redirect)
- [scheduler](https://www.drupal.org/project/scheduler)
- [search_api](https://www.drupal.org/project/search_api)
- [search_autocomplete](https://www.drupal.org/project/search_autocomplete)
- [search_exclude](https://www.drupal.org/project/search_exclude)
- [shield](https://www.drupal.org/project/shield)
- [simple_sitemap](https://www.drupal.org/project/simple_sitemap)
- [smtp](https://www.drupal.org/project/smtp)
- [token](https://www.drupal.org/project/token)
- [toolbar_menu](https://www.drupal.org/project/toolbar_menu)
- [video_embed_field](https://www.drupal.org/project/video_embed_field)
- [devel](https://www.drupal.org/project/devel)

## Wrap up
Alrighty, that’s it for now. A cool project to work on: great technique, challenging and a fun, professional team. Deadline met, customer happy, what more can I say? :) The progress compared to the previous version is also not small: from a cumbersome, difficult to use, outdated content management system - to a scalable and user-friendly Drupal platform. Questions or remarks? Let me know!

Comments

Stay up-to-date

Subscribe to our Lucius newsletter
and be the first to know about new articles!

Need even
more knowlegde?