De uitdaging: 2 doelgroepen in 1
Ontstaan in de jaren ‘80 en lang steunend op donaties van hun traditionele achterban de anti kernenergie beweging, werd het tijd voor verandering. De doelgroep verjongde en de doelstellingen van WISE werden bijgesteld van anti kernenergie activisme naar parallel daaraan het ondersteunen en stimuleren van groene energie.
De uitdaging was beide pijlers (anti kernenergie en pro groene energie) en beide doelgroepen (old school activisten en nieuwe betrokken burgers) aan te spreken en tegelijk een eenduidige en heldere boodschap te communiceren. Daarnaast moest het mogelijk zijn campagnes en tijdelijke acties op de website te faciliteren en bezoekers te stimuleren tot interactie.
We hebben geprobeerd een online identiteit en een site structuur te ontwerpen die recht deed aan deze doelstellingen. Het was daarnaast de bedoeling de website zo te bouwen dat het voor een kleine organisatie met beperkte middelen mogelijk was de site te onderhouden middels een eenvoudig te bedienen CMS zonder dat dit in de toekomst veel extra kosten met zich mee zou brengen. Uiteraard moest de website goed vindbaar zijn in Google en geoptimaliseerd zijn voor schermresoluties van verschillende apparaten zoals mobiel, tablet en desktop (zgn. responsive design).
Onze aanpak
Als eerste zijn we ons gaan verdiepen in de anti kernenergie beweging van begin jaren 80. Dit waren de idealen van waaruit WISE is ontstaan. We voelden dat veel van dat elan nog aanwezig was bij de WISE medewerkers. Idealisme, betrokkenheid en de overtuiging echt iets te willen veranderen was het eerste dat opviel. Gelukkig was er veel beeldmateriaal voorhanden: een enorme verzameling foto’s. We hebben geprobeerd met beeldonderzoek, met inlezen in het thema en met gesprekken bij WISE een idee te krijgen van de essentie van de organisatie. Dat leidde uiteindelijk tot een presentatie voor de medewerkers en de directeur.
We hebben een concept gepresenteerd waarbij in willekeurige volgorde de volgende punten naar voren kwamen:
- Presenteer een ervaring
- Activeer mensen
- Vertel een inspirerend verhaal met beeld en tekst
- Laat mensen deel zijn van de idealen.
- Blijf het op het persoonlijk niveau
- Accentueer en visualiseer een niet hierarchisch mondiaal netwerk van actoren.
- Niet alleen zenden, ook ontvangen. Laat mensen hun eigen verhaal vertellen.
- Werk vanuit een platform gedachte.
De werkwijze om dit te bereiken:
- Content first approach
- Mobile first design
- Device independent information
- Design for conversion
We hebben geprobeerd de doelgroepen en doelstellingen (anti kernenergie en pro groene stroom) te synthetiseren in een algemeen uitgangspunt:
Vertel een verhaal over een wereld waarin goed met energie wordt omgegaan
Vormgeving
Om de uitgangspunten en idealen te onderstrepen kozen we voor beeldmateriaal in een retro jaren ‘80 stijl: rauwe beelden van de actie beweging van destijds, protesten en bijeenkomsten. In contrast daarmee plaatsten we eigentijdse elementen van de netwerk en informatie maatschappij en de taal van datavisualisaties: verbindingspunten in een netwerk, heldere en constrasterende kleuren. Betrokken actoren in een platte structuur: groene stroomleveranciers, overheden, betrokken burgers, NGO’s.
Interaction design en content
Het aanbrengen van focus en hierarchie
Samen met medewerkers van WISE ben ik begonnen met het uitwerken van een interaction design. We zijn gaan schetsen op paper en ontwerpen in Cacoo, een online tool waarmee je samen kunt werken aan wireframes en flow charts. op die manier hebben we de bestaande content zo veel mogelijk gestripped en opnieuw ingedeeld. We hebben de informatie architectuur zo opgezet dat de essentiele content contraal kwam te staan en dat ze de doelen van de site optimaal kon ondersteunen. Dit leidde tot een uitgewerking in verschillende pagina typen: een homepage, landingpages per thema, detailpaginas met informatie en/of mogelijkheden tot interactie. Daarnaast creeerden we een systeem van gerelateerde content dat 1. de gebruiker vanuit verschillende invalshoeken kon leiden naar de conversie punten en 2. makkelijk te onderhouden was.
Datavisualisatie
De grootste technische uitdaging was het maken van een datavisualisatie van de stroometiketten. We wilden een overzicht waarbij je in een oogopslag kunt zien wie de groenste stroomleverancier is volgens de principes van WISE. Tegelijk moest de data van jarenlang verzamelde stroometiketten per leverancier ontsloten worden en moest het mogelijk zijn op basis daarvan over te stappen naar een andere leverancier. In tegenstelling tot de meeste vergelijkers wilden wij een methode presenteren waarbij je op basis van echte informatie en kennis een geinformeerde keuze kunt maken.
We kozen uiteindelijk voor een staafdigram waarbij de staven horizontaal gecentreerd waren rond een neutrale as. 100% staat voor helemaal groen en -100% voor helemaal niet groen. De overzichtsgrafiek laat de vergelijking tussen de energie bedrijven zien en de detail grafiek vergelijkt de verschillende jaren van een enkel bedrijf. Daarnaast is er ook een methode om te filteren per jaar en per stroomsoort.
Samenwerking
Anderhalve maand hebben we met een enthousiast team zonder problemen en vertraging gewerkt aan het project. De communicatie verliep soepel en we konden zonder al te veel overleg en toelichting de meeste beslissingen van elkaar begrijpen en implementeren. Het projectteam bestond uit een medewerker van WISE, een Drupal programmeur (voornamelijk voor de implementatie van de datavisualisatie met de D3 javascript library en de migratie van de content vanuit de oude database) en Florian van Soulcreatives.
De samenwerking met Florian was inspirerend. In ons project (wisenederland.nl) combineerde Florian technische kennis met een heel verfijnd oog voor vorm en design. Je ziet iemand aan het werk die altijd denkt vanuit de bezoeker van je website. Hoe kom je binnen, waar ga je op klikken, keep it simple. Een website wordt zo tot een levend wezen dat met je communiceert en haast tastbaar wordt. Florian omschreef het een keer heel treffend: ‘het gaat erom dat de bezoeker van je site een reukspoor vindt’. Een website die je kunt ruiken dus. Mooi toch?