CPNB

Banner main image

Collectieve Propaganda voor het Nederlands boek (CPNB) is een non profit organisatie in dienst van de Nederlandse literatuur. CPNB wil het leven van mensen verrijken door ze meer boeken te laten lezen.

Tech

WordPress

GSAP

 

De Brief

Na een periode van succesvolle samenwerkingen voor onder andere campagne websites werd Studio Vi gevraagd de algemene website opnieuw in te richten. De huidige website had een verouderd design en interface waardoor de gebruikers soms moeilijk door de website konden navigeren, wat werd versterkt door de grote hoeveelheid content op de website. . Uit de resultaten van de digitale strategie leerde wij dat de pijnpunten van de doelgroep zaten in het fundament van de website. De navigatie, zoekfuncties en een algehele overzichtelijke opmaak. Daarnaast gaf de doelgroep aan dat het moeilijk was om contact op te nemen met de organisatie.

De resultaten uit de digitale strategie werden gebruikt om doelen te formuleren: 1) Een logische structuur voor de pagina’s en content, 2) het voor de gebruikers eenvoudiger maken om te navigeren binnen de website en de campagnes, 3) de website te voorzien van een frisse nieuwe stijl en 4) het eenvoudig maken voor de gebruikers om contact op te nemen met CPNB. Met als beoogd resultaat een platform waar de gebruikerservaring én merkbeleving naar een hoger niveau worden getild.

content block image

Design

Om de structuur te verbeteren hebben we een assessment uitgevoerd van de huidige website. Dit hebben we gedaan door een sitemap te maken, een overzicht van alle pagina’s met de content die hieronder valt. Vanuit dit startpunt hebben we de high-over structuur opnieuw ingedeeld naar een logische indeling van de beschikbare content. Met het toevoegen van een hamburger menu hebben we de content op gesplitst tussen 1) de meest relevante pagina’s, deze zijn makkelijk te vinden in de navigatiebalk 2) secundaire pagina’s, deze zijn te vinden in het menu.

content block image

De homepagina is opnieuw ingericht met content waar gebruikers het meest naar zoeken zodat zij eenvoudig naar de juiste pagina kunnen navigeren. We hebben meerdere contactpunten ingericht om het voor de gebruikers gemakkelijk te maken in contact te komen met CPNB, waar ze zich ook op de website bevinden.

Met de structuur en content in plaats zijn we aan de slag gegaan met het visuele aspect van de website. Voor inspiratie zijn we de boeken ingedoken, letterlijk. Gebruikers van de CPNB website zijn allen actief in het boekenvak. Om deze reden hebben we gezocht naar een manier om de ervaring van het lezen van een boek te implementeren aan de CPNB website.

content block image

Dit heeft zich geuit door een focus op grote aanwezige typografie, duidelijke witruimte zoals dat gangbaar is op pagina’s van boeken en een gedempt kleurenschema op basis van papiertonen voor de achtergrondkleuren van de website. Zodoende vertalen we de ervaring van het lezen van een boek naar de CPNB website.

content block image

De opzet van de technologie achter de website is dat van eenvoud en flexibiliteit. Aan de client-side vertaalt zich dit in een overzichtelijke, op componenten gebaseerde structuur waarin Javascript en SCSS bestanden worden gecombineerd met Webpack. Server-side werken we met in “template-parts” opgesplitste PHP code. Met een custom opgezet WordPress CMS bieden we CPNB de mogelijkheid om zelf pagina’s aan te kunnen maken zonder dat deze afwijken van het gedefinieerde design systeem. Daarnaast bieden we een solide platform voor gebruikersmanagement waarin content kan worden gepersonaliseerd voor verschillende gebruikersgroepen.

Het gebruik van animaties wordt gebruikt om aandacht te geven aan onderdelen van een pagina en om de gebruikerservaring te verhogen voor een erg diverse doelgroep, zonder dat dit afleidt. Door middel van uitgebreide zoekfuncties en -filters wordt content razendsnel gevonden op criteria als datum, thema, of campagne.

Een van de uitdagingen vroeg in het ontwikkelproces was het migreren van een grote hoeveelheid nieuwsberichten en campagnes vanuit een Drupal omgeving. Door middel van een combinatie van automatisering en handmatige acties is het gelukt om alle content een logische plek te geven binnen de WordPress omgeving, zonder dat dit het maken van nieuwe content dwarszit.

“Studio Vi heeft voor ons een prachtige, gebruiksvriendelijke en moderne website gebouwd. Hun focus op gebruiksvriendelijkheid en het meedenken over doel en doelgroep heeft een mooi resultaat opgeleverd en een goede representatie van Stichting CPNB”

Marion Boxum —
Head of Campaigns for Adults