Hoe we met WATWAT de beste website van 2018 bouwden

FeWeb, de federatie voor Belgische webbedrijven, bekroonde WAT WAT als Best Presterende Website van 2018. We vertellen je graag hoe we samen met De Ambrassade deze digitale wegwijzer voor jongeren hebben aangepakt.

watwat.be

watwat.be

FeWeb, de federatie voor Belgische webbedrijven, bekroonde WAT WAT als Best Presterende Website van 2018. We vertellen je graag hoe we samen met De Ambrassade deze digitale wegwijzer voor jongeren hebben aangepakt.

In het kort:

  • Uitgebreid getest en goedgekeurd door 16 jongeren in een pop-up usability lab

  • In enkele seconden de juiste informatie en in 1 klik doorgestuurd worden naar een concrete hulplijn

  • Een zoek- en filtersysteem dat flexibel meerekt met de interesses en leeftijd van de doelgroep

  • Een op-maat dashboard voor 70 contentpartners dat inzicht schept in de prestatie & engagement van hun eigen content

  • Waarom de Ambrassade voor ons koos? “Wieni stelde meteen een aantal kritische vragen”

Pesten, seks, zelfmoord,... Zo helpt WAT WAT jongeren met hun vragen over allerlei thema’s

De Ambrassade zet jeugdwerk, jeugdinformatie en jeugdbeleid op de kaart. De organisatie strijdt al jaren voor meer informatie en bewustwording bij jongeren. Een van hun grootste problemen? Er ontbrak een centrale plek waar relevante info voor jongeren gebundeld stond. Een gemiste kans, want door die versnippering gaan er heel wat antwoorden en cruciale informatie verloren.

Watwat.be is een centrale digitale wegwijzer voor jongeren tussen 11 en 24 jaar. Pesten, geloof, drugs, seks, zelfmoord, ... Het zijn enkele van de thema’s waar jongeren elke dag mee worstelen. Via WAT WAT komen ze er makkelijker meer over te weten en komen ze in contact met meer dan 70 kwalitatieve partnerorganisaties. Bij elk van hen kunnen ze terecht met specifieke vragen. 

Meer dan 70 partnerorganisaties en duizenden artikels structureren? Challenge accepted!

Informatiearchitectuur, UX Design & Prototyping

Nadat de Ambrassade ons begin 2018 koos als als design & development partner, gingen we dieper in op de doelgroep en brachten hun belangrijkste problemen in kaart. Dat waren natuurlijk niet alleen de jongeren, maar ook de partners die alle content zouden gaan bundelen op één platform. 

Ondertussen telt WAT WAT een duizendtal artikels van verschillende organisaties. Het is niet evident om zulke hoeveelheden informatie vindbaar te maken en logisch te structureren. Doorheen de jaren hebben we een specifieke mobile first design aanpak ontwikkelt waar snelheid en overzichtelijkheid centraal staan. Zo vermijd je feature- en content overload.    Aan de hand van klikbare prototypes brachten we alles visueel in kaart en onderzochten we wat echt prioritair was voor alle gebruikers. In overleg met de klant maakten we een matrix van relevantie, budget & timing op. Zo konden we objectief blootleggen wat echt impact zou hebben, zonder te vervallen in “nice to haves” of onrealistische verwachtingen. Want deze zaken zetten niet alleen timing en budget onder druk, maar ook de algemene gebruiksvriendelijkheid van het platform.

Wieni heeft de ambitie om de interactie tussen mens en scherm naadloos te doen verlopen. Dat lukt enkel wanneer je tijd krijgt om te exploreren, testen en bij te sturen. Zomaar klakkeloos een opgelegde briefing uitvoeren is niet aan ons besteed.

Jelle Van den Bergh

Het opstellen van zo’n product backlog is niet altijd gemakkelijk. Je moet sowieso samen keuzes maken en dat lukt enkel wanneer er vertrouwen is in elkaar. Daarom doen we bij elke projectaanvraag een kleine ‘Wieni-check’. Staat de klant open om zich te laten challengen? Zetten ze de gebruiker écht centraal in het beslissingsproces? Willen ze net dat we met hen meedenken of zoeken ze een uitvoerende partner? We kiezen bewust om dat laatste te vermijden.

Usertesting — Waarom we 16 jongeren aan het werk zetten

Collega Svetlana aan het woord

"Omdat dit platform specifiek op jongeren gericht is, vonden we usertesting uiterst belangrijk. Zo vervallen we niet in assumpties en betrekken we deze specifieke doelgroep. Zo zagen we hoe de jongeren omgingen met het klikbare prototype en konden ze hun mening geven nog voor het platform online ging. In totaal testten we zestien jongeren die we gerichte scenario’s lieten afwerken om zo de gebruiksvriendelijkheid van de interface te testen."

"Uit dergelijke contacten met de eindgebruikers krijgen we steevast betere inzichten. Zo bleken een aantal icoontjes onduidelijk voor de jongeren en stuurden we onze icon-set bij. Dit soort feedback maakt telkens een groot verschil!"

Het pop-up usability lab bij De Ambrassade
Het pop-up usability lab bij De Ambrassade
User testing visual, kies het juiste icoontje voor elke categorie
User testing visual, kies het juiste icoontje voor elke categorie

8 elementen waardoor deze site zo sterk presteert

Meer dan 75% van de jongere surfers checkt websites op hun smartphone. Het is dus belangrijk dat alles makkelijk en snel raadpleegbaar is. Google hanteert een maximum van drie seconden dat een volledig scherm geladen moet zijn op een mobiel apparaat. Het gaat dus over fracties van seconden die ervoor zorgen dat je gebruiker afhaakt.

Doorheen de jaren ontwikkelden we tal van best practices om drukbezochte sites extreem vlot te laten presteren. De WAT WAT-website doet het ondanks zijn grote hoeveelheid content dan ook super goed op elk device. We leggen je graag uit hoe dat komt.

1. Razendsnel via Content Delivery Network

Bij Wieni werken we steevast met onze eigen unieke ontwikkelde hosting-aanpak. Als erkend AWS-partner gebruiken we State Of The Art cloud-oplossingen. Door het gebruik van een goed afgestelde CDN komt de informatie bliksemsnel bij de gebruiker terecht. En omdat we deze CDN als caching-mechanisme inzetten, kunnen we daarenboven ook gigantische gebuikerspieken vlot opvangen.

Wat bedoelen wij met “goed afgestelde CDN”? Bij WAT WAT is het zo dat elke leeftijdscategorie een apart content aanbod krijgt, hiervoor gebruiken we een cookie om aan de CDN te laten weten welke versie van de site moet getoond worden.

2. Scoren op Google

WAT WAT scoorde meteen hoog in de Google-zoekresultaten. Dat komt omdat we rekening houden met alle voortdurend veranderende SEO-spelregels. Ook het CMS-systeem en de technische onderbouw van de frontend wordt volgens de Anysurfer-richtlijnen ontwikkeld. Voor De Ambrassade was het belangrijk dat WATWAT toegankelijk is voor élke jongere tussen 11 en 24 jaar.

3. Accessibility en Anysurfer

Als erkende bouwer bij Anysurfer, kennen we de basics van accessibility maar al te goed. De basisprincipes van toegankelijkheid passen we bij elk nieuw project toe, zonder dat het Anysurfer label ook effectief moet gehaald worden. Watwat.be heeft dus geen officieel Anysurfer label, maar voor algemene performantie-, usability- en SEO-doeleinden levert het altijd voordelen op om de kernwaarden van toegankelijkheid in elke fase van het project toe te passen.   

4. Grote foto’s zonder kwaliteitsverlies met Progressive Image Loading

Het concept Progressive Image Loading is eigenlijk simpel: we laden we enkel de afbeeldingen die moeten getoond worden. Diegene onderaan de pagina staan, worden dus ook niet ingeladen als de gebruiker niet tot onderaan scrolt. Daarnaast zorgen we ook dat elke afbeelding zo zwaar mogelijk wordt gecomprimeerd zonder visueel kwaliteitsverlies (bvb webp voor de browsers die dit ondersteunen).

5. Customized Monitoring voor instant meten en verbeteren

Meten is weten. De Ambrassade en alle 70 partnerorganisaties zien op een customized analytics dashboard in een oogopslag binnen het CMS welke content van welke partner het beste scoort. Dit meetsysteem legt de brug naar een goede probleem- en resultaatanalyse.

Het meest gelezen artikel was in de eerste weken na lancering ‘Op wie moet ik stemmen?’ In volle verkiezingstijd surfte blijkbaar jong en oud naar de website. Op piekmomenten overstijgt WAT WAT dus haar doelgroep en dat kunnen we alleen maar toejuichen.

6. Click and act

De website moest niet alleen informatie verschaffen, maar vooral jongeren met specifieke vragen doorsturen naar een gespecialiseerde partner. Gewoon een externe link naar de website van een partner en een onduidelijke call-to-action: dat is niet onze stijl. De call-to-action moet jongeren écht aanzetten om actie te ondernemen. In één klik bel je met een medewerker van Unia of chat je rechtstreeks met de Zelfmoordlijn.

De openingstijden van de hulpcentra passen zich zelfs aan op het uur van de dag, en lichten groen of rood op. Deze dynamische, realtime component maakt de website extra gebruiksvriendelijk: jongeren krijgen een concrete, beschikbare hulplijn wanneer ze het nodig hebben.  

7. Snel zoeken met Elasticsearch

Gemakkelijk wegwijs vinden in honderden artikels? Daarvoor maakten we een kraakhelder search system. Als jongeren via de zoekbalk een onderwerp of vraag intypen, krijgen ze meteen een heleboel relevante suggesties.

8. No-nonsense feedback mechanisme

De jongeren kunnen via emoticons hun gevoel bij de content vertellen. Vinden ze het artikel relevant? Voelen ze zich verward of net goed verder geholpen? Deze feedback wordt verzameld in het analytics dashboard van de content partner, zo kunnen ze de content snel evalueren, aanpassen en bijsturen op maat van de jongeren.  

Het proces: van pitch tot kickoff en oplevering

We stelden ons kandidaat voor dit project in november 2017 en konden samen starten in januari 2018. Eind april hadden we alle functionaliteiten en de nodige architectuur uitgetekend en startte de ontwikkeling. Doorheen de zomer werd het CMS uitvoerig getest door de contentpartners en eind september 2018 lanceerden we na een doorlooptijd van 9 maanden trots deze nieuwe site.

Het WAT WAT-project stopte echter niet na de lancering We blijven verantwoordelijk voor de performantie, SEO en hosting en blijven sleutelen aan de gebruiksinterface door middel van korte iteraties. We begeleiden de klant en hun content-partners hoe ze het maximum het uit hun CMS kunnen halen. Dat aspect wordt vaak onderschat, maar wij vinden dat heel belangrijk. Met gerichte tips en opleidingen kunnen alle betrokkenen er gemakkelijk zelf mee aan de slag.

Het project door de ogen van De Ambrassade

“Een mobielvriendelijke site gemaakt vanuit design thinking en usability: dat hadden we voor ogen toen we de overheidsopdracht uitschreven”, zegt WAT WAT-merkstrateeg Sofie Iserbyt van De Ambrassade. “Waarom we voor Wieni kozen? Ze stelden meteen een aantal kritische vragen. Van een opdrachtnemer verwachten we dat hij de opdracht nog beter maakt. En dat bleek dus al in de offertefase.”

We hebben met de drie beste kandidaten een gesprek gehouden, en bij Wieni matchte het met wat we voor ogen hadden. Ze hebben bovendien al veel ervaring met grotere en gelijkaardige projecten en bouwden een sterke reputatie rond usability op.

Sofie Iserbyt — WAT WAT-merkstrateeg

Het was een heel fijne samenwerking. In het begin verliep het iets moeizamer omdat er veel communicatie was rond het budget, scope, features, prioriteiten, etc... Maar uiteindelijk het is goed om heldere afspraken te maken. Uiteindelijk is een offerte altijd vrij vaag en open. Maar nadat alles duidelijk was afgesproken, fietsten we vlot samen door het hele proces.

Op het einde gaf Sophie van Wieni ons uitleg over hoe het CMS-systeem werkt. Ze heeft ook concrete filmpjes voor onze partners gemaakt, zodat die gemakkelijk content kunnen uploaden. Heel handig!

Prijsbeesten!

Wieni viel maar liefst 3 keer in de prijzen bij de FeWeb Excellence Awards. We wonnen zilver met vier.be en goud voor watwat.be. Uit de 97 inzendingen haalt watwat.be de beste scores op alle criteria en zo wint Wieni de FeWeb Excellence Award 2018.

Developers Kobe en Dieter op de award uitreiking

watwat.be - home
watwat.be - artikel
watwat.be - thema's

Wil jij de beste website van dit jaar bouwen?

Wil jij meewerken aan de beste website van dit jaar?

Get in touch!

Contacteer ons