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

(Available as freelancer)

Joris Snoek

Business Consultant
/ Drupal Developer

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 - 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 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

Valuable discovery

So, during a discovery phase we want to immediately produce value and not get stuck in an analysis paralysis. We delivered concrete results in the form of:

1. A concept design.
2. Clickable wireframes, immediately developed in the cms - in this case Drupal.

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

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.

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)
• 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 and templates - that would limit the content team of SOS Children's Villages too much. That is why we used the 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:

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:

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

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:

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:

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.

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:

Postcode API

It is linked with the API of 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.

IBAN check

As soon as a donor enters an IBAN, a check is immediately done via iban.com. It is immediately indicated inline whether the IBAN is correct:

Adyen integration

The online payments are handled and linked back via Adyen. 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:

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.

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 and syntax
• Architecture
• Scalability
• Non-Dry-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 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 Nick has performed pen tests 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 and Behat 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. ‘Auto testing your business expectations’, as Behat describes on its homepage.

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:

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:

Credential management

The Drupal platform of SOS Children's Villages talks with a total of 6 API’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 the 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 and the data layer.

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

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 integration
• Cloning pages
• Integration with Project management system
• World map

Nerd alert

Top techniques and tools that were used for this development:

Top technique used

Installed Drupal modules

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

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!