HVC gelooft in een toekomst waarin energie schoon wordt opgewekt en grondstoffen worden hergebruikt. Om daarin voorop te lopen, transformeert het zich van restafvalverbrander tot duurzaam energiebedrijf. Maar HVC kan dit niet zonder de inwoners die het bedient. De komende vier jaar gaan we hen daarom samen informeren, inspireren en mobiliseren om de transitie helpen te versnellen, te beginnen met een volledig vernieuwde website.
Informeren, inspireren en stroomlijnen
In de analysefase trapten we af met een gezamenlijke workshop om de online strategie te bepalen: het onderscheiden van de belangrijkste uitdagingen en het verkennen van mogelijke oplossingen. Richting consumenten besloten we prioriteit te geven aan het overbrengen van de nieuwe propositie, het verhogen van klanttevredenheid en zo de bereidheid tot gewenst gedrag te verhogen. Een vereenvoudigde technische structuur en gebruiksvriendelijk content management systeem moest het Communicatieteam daarbij in staat stellen om veel effectiever te werken aan deze doelstellingen.
Van huisstijl naar beeldtaal
Met een scherpe online strategie werd het tijd om te werken aan de vorm. Om deze geschikt te maken voor digitale toepassing, hebben de nieuwe huisstijl door het Rotterdamse Teldesign uitgewerkt naar een design system op basis van de Atomic Design methodologie. Met de resulterende ‘bibliotheek’ van visuele componenten als knoppen, kleurcombinaties, typografie, call-to-action elementen en zelfs hele paginasjablonen hebben we een bron gecreëerd waar interne afdelingen en externe leveranciers uit kunnen putten. De resulterende beeldtaal bevestigt zo op consistente wijze de nieuwe merkidentiteit en creëert indrukken, percepties en prikkels voor interactie en gewenst gedrag.
Visuele hiërarchie voor een heldere navigatie
Het design system volgt de nieuwe structuur die we voor content en navigatie hadden ontworpen. De homepage heeft natuurlijk een unieke vorm maar ook landings-, sectie- en artikelpagina’s hebben een duidelijk herkenbare eigen vorm. ‘Hoger’ in de sitemap creëren we zo vooral overzicht; zoek je als bezoeker verdieping dan geven we de inhoud juist de ruimte. Zo is elk type pagina geoptimaliseerd voor haar functie en geeft de visuele hiërarchie gebruikers bevestiging van waar ze zich op de website bevinden. Om dit te valideren hebben we prototypes ontwikkeld en getest op verschillende doelgroepen op basis van user scenario’s. Zo konden we de navigatie en vormgeving verder optimaliseren op basis van het vertoonde gedrag.
Functioneel design met maximale beleving
Animaties en micro-interacties worden vaak voor esthetische doelen ingezet, voor een wow-effect. In ons ontwerp zijn ze vooral functioneel. Een knop bijvoorbeeld, die met een dobberend pijltje indiceert dat er meer content onder de ‘vouw’ zit waar je met een klik naartoe scrollt. Of micro-animaties die op subtiele wijze de aandacht trekken naar de meest relevante items op een pagina. Zelfs in Ons verhaal zijn de geraffineerde animaties en interacties ondersteunend aan de inhoud: de impact die HVC maakt is genoeg reden tot wow.
Een technische basis voor de toekomst
HVC is georganiseerd rondom de business units (inzameling & recycling, warmte, duurzame energie etcetera). Tot voor kort hadden deze vaak een eigen website met eigen tools. Om de technische infrastructuur te vereenvoudigen, besloten we deze te integreren in het nieuwe platform zonder dat de business units aan autonomie zouden verliezen. Drupal 8 bleek daarvoor het beste content management systeem omdat rollen en rechten eenvoudig kunnen worden toegekend aan medewerkers van de afzonderlijke business units. Het CMS is bovendien opgezet als multi-site om ook satelliet-websites eenvoudig en visueel consistent te kunnen beheren.
Eenvoudig je eigen zaken regelen (als je dat wilt)
Een belangrijke eis was het bieden van optimale zelfservice. Grof afval melden, een afvalwijzer raadplegen om snel te weten in welke container iets moet, de afvalkalender om te weten wanneer de volgende inzameling is, aanmelden voor (warmte-)energie, door de integratie van deze tools kunnen gebruikers nu op een plek eenvoudig en snel hun zaken regelen. Ze worden hierin geholpen door content managers die de tools in de nieuwe situatie flexibeler kunnen inzetten en tonen op de pagina’s waar ze relevant zijn voor gebruikers.
Inclusief ontwerp voor volledige toegankelijkheid
Maar als alle inwoners, ook die met beperkingen, de site volledig moeten kunnen gebruiken dan moet de website maximaal toegankelijk zijn. Om dit te bereiken hebben we elke ontwerpkeuze getoetst aan de Web Content Accessibility Guidelines (WCAG) 2.1. Het leidde ertoe dat we kleuren uit de nieuwe huisstijl voor online gebruik moeten aanpassen om met een hoger contrast de leesbaarheid van tekst te vergroten of klikbare onderdelen te accentueren. Ook kunnen animaties worden uitgeschakeld als een bezoeker de ‘reduce motion’ functie in zijn browser heeft ingeschakeld. De site is zelfs zonder muis te bedienen voor mensen met een motorische beperking. Dit alles moet ertoe leiden dat we op korte termijn het Drempelvrij keurmerk WCAG 2.0 behalen.