Mr Treublaan 1-3
1097 DP Amsterdam
The Netherlands

Lucius lanceert drupal platform voor sos kinderdorpen

02 Jul, 2018 Drupal

Home Blog Lucius lanceert drupal pl...

Sos kinderdorpen screenshot

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 -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 het meest geschikte cms (content management systeem).

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. We leveren concrete resultaten op in de vorm van:

  1. Een concept design.
  2. Clickable wireframes, meteen ontwikkelt in het cms —in dit geval dus Drupal.

Zie ook ons blog: Voorbij project Discovery: een waardevolle eerste projectfase.

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.

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)
  • 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 en templates te definiëren - dat zou het content team van SOS Kinderdorpen te veel beperken. Daarom hebben we gebruikt gemaakt van de 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 columnsText 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, 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. Er wordt meteen inline aangegeven of ingevoerde IBAN klopt:

Adyen koppeling

De online betalingen worden afgehandeld en terug gekoppeld via Adyen. 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 en syntax
  • Architectuur
  • Schaalbaarheid
  • Non-Dry-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 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 Nick heeft pen tests 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 -en Behat 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 genoemd. ‘Auto testing your business expectations’, zoals Behat op haar homepage 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’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 is de 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 en is de data layer 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 integratie
  • Clonen pages
  • Integratie met Project management systeem
  • Wereldkaart

Nerd alert

Top technieken en tools die werden ingezet voor deze realisatie:

Top toegepaste techniek

Geïnstalleerde Drupal modules

Naast de 4 custom ontwikkelde Drupal modules zijn volgende contrib modules gebruikt:

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!

Written by Joris Snoek | Jul 02, 2018
Let's Talk

Vertel mij over jullie project, ik hoor het graag!
Mail , of stuur een bericht:

Got some more time?

Related content
26 May, 2021 Drupal

Met nieuwe functies als: @-mentions, drag-drop afbeeldingen & algemene instellingen.


06 Apr, 2021 Drupal


17 Aug, 2020 Drupal

Een Drupal Module Voorbeeld Inclusief Twig Template.