Lucius lanceert Drupal platform voor SOS Kinderdorpen

15 Mar 2018

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

**1 Februari 2018 is het nieuwe platform voor SOS Kinderdorpen gelanceerd, na 3 sprints met een doorlooptijd van 3 maanden en een team van gemiddeld 6 mensen zijn we trots dit nieuwe platform aan te kondigen. Special thanks naar team SOS en Digital Project Lead [Mandy Plugge](http://www.mandyplugge.nl/) -voor de gunning en de fijne samenwerking.**

**So, without further ado.., powered by Drupal.., een recap van de eerste fase:**

## Discovery met waarde

SOS Kinderdorpen had afgelopen jaar al een flink *backlog* opgebouwd: gewenste functies voor de nieuwe website. Tijdens de *kick-off meeting* zijn deze functies besproken en geprioriteerd.

Na analyse van deze functionaliteiten bleek het [Drupal cms](https://www.drupal.org/) *the weapon of choice*.

De *kick-off meeting* was onderdeel van sprint 0 (project discovery fase), deze fase had een week doorlooptijd. Zo'n week zorgt ervoor dat alle informatie in kaart is om productie te starten. Naast de bovengenoemde kick-off meeting wordt volgende meegenomen tijdens deze *discovery week*:

- Delen en overleggen van bestaande documentatie (style guides, personas, wikis, analytics, etc).
- Technische infrastructuur overleggen en analyseren.
- Overleggen rollen en verantwoordelijkheden.
- Inventarisatie en audits van bestaande content, assets, resources, design patterns, etc.

Maar ook:

- Project -en product beperkingen: politiek, technisch, personeel, resources en assets, merk, enz.
- Het concurrentie landschap van product / merk.
- Merk en de kenmerken ervan, visuele stijl, waarden en persoonlijkheden.

### Waardevolle discovery
Tijdens een *discovery fase* willen we direct waarde produceren en niet blijven hangen in een [analysis paralysis](https://en.wikipedia.org/wiki/Analysis_paralysis). We leveren concrete resultaten op in de vorm van:

1. Een concept design.
2. Clickable [wireframes](https://en.wikipedia.org/wiki/Website_wireframe), meteen ontwikkelt in het cms —in dit geval dus [Drupal](https://www.drupal.org).

Zie ook ons blog: [Voorbij project Discovery: een waardevolle eerste projectfase.](https://www.lucius.digital/blog/voorbij-project-discovery-een-waardevoll...)

## Lift off: inventarisatie

Na de *discovery week* hadden we genoeg informatie om het project globaal te plannen en productie te starten. Volgende informatie was globaal in kaart:

1. *Doelen*: waarom doen we dit project? Wat willen we bereiken?
2. *Sources*: waar komt de traffic van het platform vandaan?
3. *Doelgroepen*: wat voor *soort mensen* komen er op de website?
4. Gewenste functionaliteiten

Een grove opsomming van de inventarisatie die voortkwam uit de *kick-off meeting*:

### Te faciliteren top doelen
Het nieuwe Drupal platform moet volgende doelen voor SOS Kinderdorpen gaan **faciliteren** voor content managers:

- Optimalisatie donaties
- Conversie optimalisatie
- A/B testing
- Customer journey management
- CRM koppeling automatiseren
- Mobile first
- Marketing automation management
- Schaalbaar zijn: toekomstige technieken relatief makkelijk kunnen inzetten
- Optimalisatie account management: implementatie van een *Mijn omgeving* voor bestaande donateurs
- Optimalisatie werving
- Lagere bounce rates

### Top sources
Waar komt de *website traffic* voornamelijk vandaan:

- Zoekmachines
- CPC / Ads
- Nieuwsbrieven
- Direct
- Social media
- Externe sites
- Hard copy

### Top doelgroepen

- Potentiële donateurs
- Bedrijven
- Stichtingen
- Scholen
- Bestaande donateurs
- Pers
- Deelnemers van challenges en events
- Vrijwilligers
- Sollicitanten

### Top site functies

*1. Flexibel content management*
Waarin gebruiksvriendelijk gewerkt kan worden aan onder andere:

- Donatie formulieren
- Landing pages
- Statische pagina’s
- Nieuws
- Homepage

In de eerste versie van het gerealiseerde Drupal platform worden bijna 300 pagina’s met zeer diverse content -en layout gefaciliteerd door het Drupal cms.

*2. Form builder*
SOS Kinderdorpen wilde zelf flexibel donatie formulieren kunnen beheren: onbeperkt nieuwe aanmaken, configureren en op alle pagina's kunnen plaatsen -op elke gewenste positie binenn die pagina. Gezien de gewenste flexibiliteit, de complexe data flows en externe integraties is besloten om dit op maat te ontwikkelen in een [custom Drupal module](https://www.drupal.org/docs/8/creating-custom-modules).

Volgende functies werden verwerkt in deze *form builder* binnen Drupal:

- Conditionele velden
- Inline realtime validatie
- Postcode API integratie
- IBAN check
- Adyen koppeling
- CRM soap koppeling ([XML WSDL](https://www.w3schools.com/xml/xml_wsdl.asp))
- Gepersonaliseerde *bedankt pagina* -en *bedankt e-mail*.

*3. Content management workflow*
Er werden content management rollen gewenst, zodat SOS Kinderdorpen zelf kan bepalen *wie wat mag*. Hieruit wordt tevens de workflow bepaald: hoe komt een pagina van *draft tot published*. Het Drupal platform faciliteert ook workflows voor aanpassingen van bestaande pagina’s, waarbij een review van een *editor* nodig is.

*4. Testing*
Geen functie, maar wel constant een cruciaal onderdeel voor een succesvol, schaalbaar en snelle website. Volgende test-onderdelen zijn meegenomen in het globale plan:

- Peer reviews
- Functioneel testen
- Load testing
- Pen testing: hierbij proberen we platform potentieel te hacken
- Unit / Behat testen

*5. Overig gewenste top functies 1e fase*

- Interne zoekmachine
- E-commerce tracking m.b.v. Google Analytics / data layer
- Nieuws & blog
- Vacatures
- Persberichten
- Events
- Project map

Een toelichting op bovenstaande 5 onderdelen:

## 1. Flexibel, consistent content management
Er bleek een grote mate van flexibiliteit gewenst voor het opmaken van pagina’s, hierin was het niet mogelijk om standaard [content types](https://www.drupal.org/docs/8/administering-drupal-8-site/managing-conte...) en *templates* te definiëren - dat zou het content team van SOS Kinderdorpen te veel beperken. Daarom hebben we gebruikt gemaakt van de [Paragraphs](https://www.drupal.org/project/paragraphs) techniek.

Huidige ~300 pagina’s zijn allemaal opgemaakt binnen deze techniek, voor SOS Kinderdorpen fijn omdat ze relatief vrij zijn in opmaak, maar niet buiten de huisstijl kunnen opmaken. Voor Lucius goed omdat we nergens hoeven te helpen met opmaken van pagina’s en niet constant content types hoeven te (her)schrijven. Ook code-wise makkelijker, omdat alle content via dezelfde code en configuratie gaat.

### Rows
Middels deze *Paragraphs* techniek kunnen content managers *rows* toevoegen en per *row* onbeperkt *columns* toevoegen. Een voorbeeld van de toegevoegde rows op de homepage:

Deze homepage bestaat uit 6 rows; de content managers van SOS Kinderdorpen kunnen zelf rows toevoegen, verwijderen en ordenen. Tevens kunnen content managers per row het volgende instellen in het *Drupal backend*:

1. Moet de row in volledige breedte worden weergegeven? Wanneer deze optie is aangevinkt, dan zal deze row de gehele breedte van het scherm in beslag nemen, zoals bijvoorbeeld de *header image* van de frontpage in row 1.
2. SOS Kinderdorpen kan zelf de kleur van de row instellen. Om huisstijl te bewaken zijn deze beperkt tot enkele opties.
3. Content managers kunnen de marges per row instellen.

### Columns in rows
Per row kunnen *columns* (paragraphs) worden toegevoegd, onderstaand een voorbeeld van de row ‘Waar zijn wij actief’ —deze bevat 2 kolommen:

1. Text
2. Image

### Verschillende typen columns
In bovenstaand voorbeeld zie je al twee van de in totaal 7 beschikbare type *columns*: *Text* en *Image* . Momenteel kunnen volgende typen *columns* door SOS Kinderdorpen toegevoegd worden aan een *row*:

Deze *columns* kunnen per *row* toegevoegd, verwijderd en geordend worden middels een sleep-functie.

### Instelling per kolom
We gaan nog een content management nivo dieper: de content managers van SOS Kinderdorpen beschikken over instellingen voor een specifieke *column* in het *backend* van Drupal. Deze instellingen verschillen per type *column* (text, image, video, etc). Een voorbeeld de *Image column*:

1. Maak afbeeldingen klikbaar of niet.
2. Achtergrond -en tekstkleur instellen.
3. De geplaatste afbeelding kan hier gewijzigd worden.
4. Plaats een extra afbeelding.
5. Als er meerdere afbeeldingen worden geplaatst (bv een opsomming van partner logo’s): geef aan hoeveel afbeeldingen er per rij geplaatst worden.
6. Een rij bestaat uit 12 breedte-delen, elke kolom kan 1 tot 12 breedte-delen ingesteld krijgen. Zo kan je bepalen hoe de *breedte-verdeling* van *columns* in een *row*.
7. Voeg een nieuwe Paragraph (kolom) toe in deze row.

## 2. Form builder
Een groot onderdeel van dit Drupal platform is de *form builder*. De content managers van SOS Kinderdorpen kunnen zelf formulieren aanmaken, configureren en als *column* overal op alle pagina’s plaatsen. Op deze manier kunnen zij voor alle doelgroepen, sources en campagnes onbeperkt formulieren maken. Hierdoor kunnen tevens onbeperkt A/B tests gedraaid worden voor conversie optimalisatie.

### Data flow
Per formulier kunnen content managers bepalen hoe de ingevulde data routeert naar de benodigde CRM velden.

### Conditionele velden
Bepaalde keuze-velden zijn afhankelijk van een eerdere gekozen optie, in onderstaand voorbeeld zie je dat bij keuze voor *betaling eenmalig* twee betaalmethodes beschikbaar moeten zijn. Maar bij keuze voor *Betaling maandelijks* mag maar één betaaloptie verschijnen.

### Inline realtime validatie
Content managers kunnen per veld instellen hoe deze moet valideren en welke error-message verschijnt. Als een donateur wegklikt van een formulier-element dan wordt de invoer meteen gecheckt en verschijnt feedback:

### Postcode API
Er is gekoppeld met de API van [Postcode.nl](https://www.postcode.nl/), zodra je je postcode en huisnummer invult zoekt het systeem automatisch de straat -en plaatsnaam erbij. Wordt het postcode niet gevonden, dan kunnen mensen handmatig deze gegevens invoeren. Dit is nodig in het geval van nieuwe woonwijken, die nog niet toegevoegd zijn als officieel postcode.

### IBAN check
Zodra een donateur IBAN invoert, wordt direct een check gedaan via [iban.com](https://www.iban.com/). Er wordt meteen inline aangegeven of ingevoerde IBAN klopt:

### Adyen koppeling
De online betalingen worden afgehandeld en terug gekoppeld via [Adyen](https://www.adyen.com). Volgende betalingsmethodes zijn gekoppeld:

- iDEAL
- Credit card (MasterCard / Visa)
- American Express
- Overboeking
- Eenmalige machtiging

### CRM koppeling
Uiteindelijk worden alle gegevens verwerkt in het centrale CRM systeem van SOS Kinderdorpen. Dit CRM wordt gebruik door SOS Children’s villages wereldwijd.

### Thank you page
Zodra de betaling gedaan is, zien donateurs een gepersonaliseerde *'bedankt' pagina*. De content managers van SOS Kinderdorpen kunnen hierin *placeholders* gebruiken, die voor de donateurs ingevuld worden met bijvoorbeeld voornaam, adres, donatie bedrag etc.

Er kunnen onbeperkt aantal *'bedankt' pagina's* aangemaakt worden door de content managers. Deze pagina’s kunnen gekoppeld worden bij een donatie formulier, zodat er een gepersonaliseerde bedankt melding zichtbaar wordt, gericht op een specifieke campagne.

### Thank you e-mails
Soortgelijk aan de *thank you pages*, alles wat daarin is opgemaakt door content managers wordt tevens gemaild naar de donateur.

### Mobile first
Gezien het grootste deel van de donateurs via een mobiel apparaat het platform bezoeken, hebben we geoptimaliseerd voor mobiel. Ook uitzonderingen als een iPad 2 en Samsung Internet zijn meegenomen.

Formulier-elementen krijgen bijvoorbeeld een volledige breedte, zodat ze makkelijk *aan-tap-baar* zijn:

## 3. Content management workflows
Binnen SOS Kinderdorpen zijn er content managers met verschillende rollen, binnen deze rollen zijn workflows met *revisie beheer* ingeregeld. Zo kunnen *drafts* voor nieuwe en bestaande pagina’s gemaakt worden door een content manager, welke alleen door bijvoorbeeld een *editor* gepubliceerd kunnen worden.

**Voor gepubliceerde pagina's zijn tevens workflows geconfigureerd**, zodat de live pagina’s aangepast en nagekeken kunnen worden -uiteraard zonder dat het publiek dit ziet.

## 4. Testing

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

Testing: vaak een onder geschoven kindje vanwege tijdsdruk, maar wij hechten er veel waarde aan en zorgen voor genoeg ruimte in budgets en tijd hiervoor. Volgende tests worden doorlopend uitgevoerd:

### Peer reviews
Developers testen onderling code. Hoe goed je als developer ook bent, op gegeven moment zit je zo verdiept dat je soms je eigen fouten niet meer ziet. Veel code en opmaak wordt automatisch gescreend door de juist plugins. Maar een handmatige check is tevens nodig, code wordt onderling gescreend op onder andere:

- [Coding standards](https://www.drupal.org/docs/develop/standards) en syntax
- Architectuur
- Schaalbaarheid
- Non-[Dry](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself)-ness (Don't Repeat Yourself)
- Security
- Snelheid
- Indeling files en folders

### Functioneel testen
Functionaliteiten voor de eindgebruikers (content managers en website bezoekers) worden handmatig getest; zoveel mogelijk [edge cases](https://en.wikipedia.org/wiki/Edge_case) worden verzonnen om alle scenario’s zo bug-vrij mogelijk te maken. Na een oplevering wordt het platform nogmaals getest door SOS Kinderdorpen zelf, hun test-team varieerde per sprint van 2 tot 10 mensen. Op deze manier werd overgroot deel van de edge cases ontdekt.

### Load testing
Een traag platform is hoogst beroerd: bezoekers haken af en je SEO gaat naar de gedver (quote collega Erik). Daarom voeren we altijd *load tests* uit: vuur een oplopende hoeveelheid traffic op de testserver af en bekijk wanneer hij het begeeft. Dit moet ruim boven het bezoekersaantal zijn wat overlegd is, hierin is onderscheid tussen in -en uitgelogde bezoekers van kritiek belang.

### Pen testing: probeer de server te hacken
Security, een belangrijk onderdeel, onze collega en [ethical hacker](https://en.wikipedia.org/wiki/White_hat_(computer_security)) Nick heeft [pen tests](https://en.wikipedia.org/wiki/Penetration_test) uitgevoerd op de server waar het nieuwe platform uiteindelijk live kwam te staan. Hieruit zijn enkele issues gekomen die opgelost zijn, waardoor een optimaal veilig platform opgeleverd is.

### Unit / Behat testen
Binnen huidige deadline was dit helaas nog niet haalbaar, maar we zullen [unit](https://nl.wikipedia.org/wiki/Unittesten) -en [Behat](http://behat.org/) tests in eerstvolgende sprint gaan doorvoeren.

Op deze manier kan je ervoor zorgen dat reeds opgeleverde functies automatisch worden getest, zodra nieuwe functies worden doorgevoerd. Door dit automatische testen van reeds opgeleverde weten we zeker dat alles stabiel blijft en hoog kwaliteit wordt opgeleverd. Ook wel [regression testing](https://en.wikipedia.org/wiki/Regression_testing) genoemd. ‘Auto testing your business expectations’, zoals Behat op [haar homepage](http://behat.org/en/latest/) omschrijft.

## 5. Overige functies

### Search
De vorige versie van de website bevatte geen zoekfunctie, in deze eerste sprint hebben we deze toegevoegd -inclusief zoeksuggesties:

SOS Kinderdorpen kan zelf aangeven of een pagina belangrijk genoeg is om in deze zoeksuggesties terecht te komen; alle zoekresultaten worden sowieso weergegeven op de uitgebreide *zoek resultaten pagina*:

### Credential management
Dit Drupal platform van SOS Kinderdorpen *praat* in totaal met 6 [API](https://en.wikipedia.org/wiki/Application_programming_interface)’s, deze kennen allemaal inlog gegevens welke je niet *hard* in code wilt hebben -wegens security redenen. Deze *credentials* slaan we dus op een andere, veilige manier op.

### Redirects
De URL’s in dit nieuwe platform kunnen verschillen met 'oude' URL’s. Om te redirecten middels een [301](https://en.wikipedia.org/wiki/HTTP_301) is de [redirect](https://www.drupal.org/project/redirect) module ingezet, dit is voornamelijk bedoeld om SEO in tact te houden en ervoor te zorgen dat links op externe sites niet uitkomen op een *page not found*.

### E-commerce tracking
Google Analytics is ingezet als *E-commerce tracking* tool, hierin is gebruik gemaakt van de [Google Tag Manager](https://www.google.com/intl/nl/tagmanager/) en is de [data layer](https://developers.google.com/tag-manager/devguide) geïmplementeerd.

## It’s alive, alive! Celebrated with cake and champagne
De livegang is gefaseerd gedaan, we deden eerst een *soft launch* waarna de hard launch op 1 februari volgde.

Conform afgesproken deadline.

## Post-livegang ademruimte en volgende sprints
Na de livegang werd 2 weken ademruimte ingepland voor eventueel benodigde hotfixes. Er bleken geen echte hotfixes nodig, maar wel enkele (kleine) ‘zeer gewenste functies’. Die zijn meteen de week na livegang doorgevoerd.

De komende tijd zal flink doorgebouwd worden, onder andere volgende onderdelen zullen bijgebouw worden:

- Login deel voor donateurs
- [VWO](https://vwo.com/) integratie
- Clonen pages
- Integratie met Project management systeem
- Wereldkaart

## Nerd alert
Top technieken en tools die werden ingezet voor deze realisatie:

## Top toegepaste techniek
- [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

## Geïnstalleerde Drupal modules
Naast de 4 custom ontwikkelde Drupal modules zijn volgende contrib modules gebruikt:

- [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. Een gaaf project om aan te werken: mooie techniek, uitdagend en een leuk, professioneel team. Deadline gehaald, klant happy, what more can I say? :) De vooruitgang ten opzichte van de vorige versie is ook niet gering: van een log, moeizaam bruikbaar, verouderd content management systeem —naar een schaalbaar en gebruikersvriendelijk Drupal platform. Vragen of opmerkingen? Let me know!

Comments

Stay up-to-date

Ontvang onze Lucius nieuwsbrief direct in je inbox
en wees als eerste op de hoogte van nieuwe artikelen!

Nóg meer
kennis nodig?

Check ons ons blog archief >