Hoe maak je een moderne stemtest in 2019?

Naar aanleiding van de verkiezingen op 26 mei 2019 maakten we in opdracht van Universiteit Antwerpen de stemtest voor een consortium van mediapartners. Lees hier alles over het proces.

stemtest header image

In het kort:

  • 4 mediapartners met elk een eigen huisstijl en technische setup
  • Extra stellingen indien de scores van de eerste 2 partijen te dicht bij elkaar liggen
  • UX uitdaging van het aanpassen van uw resultaat
  • Doelstelling: 3 miljoen deelnames  

4 partners betekent 4 stemtesten

Hoeveel stemtesten hebben we?

Er werden 8 stemtesten uitgewerkt: 4 voor Vlaanderen en 4 voor Wallonië, telkens een regionale, federale, Brusselse en Europese versie.

Per mediapartner werd er een aparte versie gemaakt, die via een andere url bereikbaar is. Inhoudelijk zijn het echter dezelfde testen. Bekijk hier alle stemtesten: VRTDe StandaardRTBFLa Libre.

Splash pagina van stemtest2019.be en testelec2019.be

De verwijzing naar alle stemtesten vind je op stemtest2019.be en testelec2019.be

Wie deed wat?

Stemtest 2019 kwam tot stand dankzij een nauwe samenwerking tussen verschillende instanties:

  • De universiteiten (Universiteit Antwerpen en UCLouvain) namen het  inhoudelijke luik voor hun rekening.

  • Tree company zorgde ervoor dat het geheel inhoudelijk en technisch uitgewerkt en begeleid werd.

  • Wieni stond in voor het design, de ontwikkeling en hosting van de applicatie.

Hoe staan de sterren in de Europese vlag?

We leerden dat de sterren in de Europese vlag in een welbepaalde richting staan, namelijk dat de bovenste ster ook effectief naar boven moet wijzen. Een ster staat dus 'als een mannetje' met het hoofd omhoog, twee armpjes en twee beentjes.

Helaas heeft de foute vlag enkele weken online gestaan. Dankzij een aandachtige gebruiker werden we hierop gewezen en pasten we dit onmiddellijk aan.

1 codebase, 4 integraties

De embeddable stemtest

Dé vereiste dit jaar was dat de stemtest niet meer op een aparte omgeving zou staan, maar naadloos geïntegreerd moest zijn in de websites van alle mediapartners. Zo zijn we bij een embeddable stemtest uitgekomen, elke partner krijgt een unieke URL met de nodige JavaScript-code, die hij eender waar op zijn website kan toevoegen. Alle 4 stemtesten draaien op dezelfde codebase, tijdens het builden van de applicatie worden er 4 verschillende scripts o.b.v. 4 verschillende thema’s gegenereerd.

De grootste uitdaging van zo’n embed zijn de mogelijke conflicten met bestaande JS en CSS. Om te anticiperen op mogelijke conflicten hebben we hier gekozen voor “CSS-in-JS” d.m.v. styled-components 💅 dat dynamische css classnames genereert.

Peak performance & GDPR proof

Om grote pieken van alle 4 partners samen op te vangen werden de 4 files gehost op Amazon S3, met een AWS Cloudfront CDN ervoor. We gebruiken Gitlab CI om bij push naar de repository automatisch code build, deploy (naar S3) en invalidatie (Cloudfront) te doen. 

Voor de minimale geanonimiseerde tracking werd via Lambda@Edge op de Cloudfront events via AWS Kinesis Firehose streams naar een andere S3 bucket gebracht. Met deze opstelling halen we ruim de gesteld eisen qua verkeer/load, en daar het een compleet serverless opstelling is zijn er ook geen servers die up- of downscaled moeten worden. 

Data analyses gebeuren rechtstreeks op Amazon S3 met behulp van AWS Athena om -bijvoorbeeld- uit te lezen hoeveel maal de stemtest ingevuld is.

Designen o.b.v. Google Sheets Google Sheets a.k.a. parameter-based design

4 partners betekent 4 stemtesten, 4 stemtesten betekent 4 designs. Omdat de basis van alle 4 stemtesten hetzelfde is, moesten we het design logisch kunnen opbouwen met een aantal parameters die voor alle partners hetzelfde waren. Aan de andere kant moest de stemtest perfect in de huisstijl en website van de partner passen. Zo gingen we te werk.

1. Parameters in Google Sheets

Stemtest Google Sheets met design parameters

De beruchte Google Sheets bevat maar enkele parameters voor kleuren, fonts en border-radius

Alle partners kregen de vraag om een aantal parameters van hun huisstijl in te vullen, waarmee we later aan de slag zouden gaan om de designs te maken. Ze moesten maar een aantal parameters invullen voor kleuren, font groottes en afronding van de hoeken. Hiermee konden we al snel verder.

2. Figma styles, components en overrides to the rescue

screenshot Figma van Stemtest 2019

Orde scheppen in de chaos dankzij Figma

Hoewel de wireframes in Sketch zijn gemaakt, hebben we voor design gekozen voor Figma. De manier waarop Figma omgaat met styles en overrides was veel interessanter voor dit project en zijn vele variaties op design.

Na de initiële designs mochten alle partners feedback geven. De moeilijkheid hier was dat elke aanpassing van partner A ook effect heeft op partners B, C en D. Zo moesten we compromissen sluiten en een evenwicht zoeken tussen alle partners.

Na wat finetuning van de originele parameters en het afstemmen met alle partners, is dit het finale resultaat:

Wireframes en designs van Stemtest 2019

Van wireframes naar 4 designs

3. Design omzetten naar parameters

Na het afkloppen van de designs, was het een kwestie van de parameters om te zetten naar verschillende thema’s. Hieronder zie je een stuk van de JSON die alle data voor de verschillende thema's bevat. Deze JSON werd omgezet in CSS m.b.v. de React Context API en styled-components.

const themes = {
    vrtnws: {
        font: {
            primary: '"Forma DJR Deck", "Forma DJR Text", Arial, sans-serif',
            secondary: '"Forma DJR Deck", "Forma DJR Text", Arial, sans-serif',
        },
        themeColor: {
            text: '#16284A',
            brand: '#5DFC71',
            brandSecondary: '#2396CD',
            link: '#2396CD',
            agree: '#36BCA5',
            disagree: '#FF4161',
            skip: '#737E92',
        },
        borderRadius: '25px',
        button: {
            ...
        },
    },
    ...
};

Extra uitdagingen t.o.v. 2014

Wieni maakte in 2014 ook al de Stemtest i.s.m. Universiteit Antwerpen. De kennis die we toen hebben opgedaan, heeft ons geholpen om nog een betere stemtest te maken.

In 2014 kende De Stemtest een gigantische piek van users toen Martine Tanghe de stemtest aankondigde in het 19u journaal. Binnen Wieni heet dit voortaan "het Martine Tanghe effect".

De extra uitdaging van de extra stellingen

Het grote verschil t.o.v. Stemtest 2014 was de toevoeging van de extra stellingen. Het idee leek simpel genoeg op de eerste briefing: “In het geval dat de twee eerste partijen te dicht bij elkaar liggen, krijgt de gebruiker de mogelijkheid om verdiepende stellingen te beantwoorden. Deze moeten de twee eerste partijen verder uit elkaar halen.”

Dit werd echter een grotere UX uitdaging dan verwacht. De extra stellingen moesten optioneel blijven, dus zouden niet in de weg mogen staan van de resultaten. Tijdens de user testing dat door Tree company uitgevoerd werd, hebben we 2 opties voorgesteld:

  • Optie A: tussen de stellingen en het resultaat, krijgt de gebruiker een extra scherm te zien, met vermelding van de twee eerste partijen en een call to action om extra stellingen te beantwoorden. De gebruiker kan deze stap overslaan en doorgaan naar zijn resultaat.
  • Optie B: de call to action om extra stellingen te beantwoorden wordt bij het resultaat getoond, in de buurt van de twee eerste partijen.  
Stemtest 2019: extra stellingen user testing

Links: optie A, rechts: optie B

Optie A was het duidelijkste voor de gebruikers, ze klikten daar ook vaker op de knop om extra stellingen te krijgen dan bij optie B. Optie B was bovendien verwarrend omdat het de rangorde van de top 7 verstoort. Het probleem bij optie A is dat het te dwingend en prominent is, want uiteindelijk zijn de extra stellingen optioneel. Daarom hebben we gekozen voor een mix van de twee opties: een duidelijke call to action boven de resultaten, maar nog steeds op hetzelfde scherm.

Een andere uitdaging was de visualisatie van de resultaten na de extra stellingen. De resultaten van de extra stellingen mogen enkel invloed hebben op de twee eerste partijen, maar we mogen de scores van de extra stellingen niet bij het origineel resultaat optellen. Dit geeft een vertekend beeld voor andere partijen, die aan die extra race niet meer mochten meedoen. Eigenlijk zijn er twee verschillende klassementen: origineel klassement met alle 7 partijen en extra klassement van top 2 partijen. Maar hoe maken we dit duidelijk voor de gebruiker; en dat op 1 scherm dat al veel interactieve elementen bevat?

Een aantal ideeën die op tafel gegooid werden om daarna terug van tafel gesmeten te worden:

  • het origineel resultaat blijft in percentages staan, voor het extra klassement werken we met sterretjes
    • maar hoe leggen we de sterretjes aan de gebruiker uit? de gebruiker wilt gewoon een top 7 van zijn partijen zien
    • als de volgorde verandert o.b.v. sterren, kan de nieuwe #1 een lagere percentage hebben dan de nieuwe #2, superverwarrend
  • we gaan het extra resultaat nooit samen tonen met het origineel resultaat
    • maar dan moeten we switch-knoppen voorzien om te wisselen tussen de 2 resultaten
    • de gebruiker krijgt zo nooit een volledig beeld op zijn resultaten

Uiteindelijk hebben we gekozen om het extra resultaat letterlijk in een ander klassement te tonen: helemaal bovenaan zie je jouw ultieme top twee, daaronder krijg je jouw origineel resultaat te zien. De eerste twee partijen werden uitgegrijsd om aan te tonen dat dat resultaat niet meer up to date is.

Stemtest 2019: uiteindelijke visualisatie van de extra stellingen

Links: call to action voor extra stellingen, rechts: resultaat na de extra stellingen

Verbeterd resultaatscherm: minder tekst, maar wél duidelijker

Bij het omzetten van designs naar frontend, voelden we dat het resultaatscherm nog niet optimaal was. Er zijn veel interactive elementen: ga naar vorige/volgende stelling, bekijk een overzicht van stellingen, pas jouw antwoord aan, bekijk de meningen van partijen... en veel begeleidende tekst. Dit voelde niet 2019 aan. We hebben dus een stap terug moeten nemen en vereenvoudigen, weg met onnodige teksten en labels, weg met witte knoppen die eigenlijk geen knoppen waren. De visualisatie van de mening van de gebruiker en de partij werden samengevoegd met de mogelijkheid om het antwoord aan te passen. Zo hebben we dezelfde functionaliteiten met veel minder en duidelijkere elementen kunnen waarmaken.

Met een aantal kleine UX verbeteringen maakten we aanpassen van antwoorden veel gebruiksvriendelijker

Links: origineel design, rechts: nieuwe design. Met een aantal kleine UX verbeteringen maakten we aanpassen van antwoorden veel gebruiksvriendelijker.

MNM Stemtest

Hoe kunnen we de grote stemtest vereenvoudigen voor het jongere doelpubliek van MNM? De belangrijkste verschillen:

  • 1 versie is i.p.v. 4 (regionale, Brusselse, Europese en federale)
  • directe visualisatie van jouw klassement na elk antwoord
  • geen wegingen of extra stellingen
  • extra toelichting per stelling op maat van jongeren
  • jongere look & feel
Naar de MNM Stemtest

Van wireframes tot oplevering, in 2 maanden tijd

Tree company contacteerde Wieni begin januari met de vraag om de Stemtest 2019 te maken. Eind januari gingen we effectief van start. Op een dikke 2 maand tijd doorliepen we volgende fases:

  • Eind januari: wireframes
  • Eerste helft februari: user testing
  • Mid februari: design
  • Eind februari: development
  • Eind maart: testing

De effectieve inhoud van de stellingen en de partij argumentaties werden pas in de allerlaatste week voor lancering aangeleverd. Tot dan hadden we gewerkt met oude stellingen van 2014. In deze laatste week kwam het er dus op aan om de berekeningen grondig te testen.  

Op woensdag 3 april ‘s ochtends vroeg werd Stemtest 2019 door alle 4 de partners de wereld ingestuurd, wat onmiddellijk een paar stevige pieken opgeleverd heeft. 

Was de Stemtest 2019 een geslaagd project?

Volgens Universiteit Antwerpen was het alvast een geslaagde editie:

"Namens het hele academische team zijn we heel blij dat we voor Wieni hebben gekozen voor Stemtest 2019. De samenwerking verliep rimpelloos, snel en uitermate efficiënt. Wieni maakte een zeer aantrekkelijk design van de interface, en ook technisch was de uitvoering perfect. Het strafste is dat Wieni echt mee nadenkt over de stemtest, ze zijn zoveel meer dan een uitvoerder. Mede dankzij Wieni is Stemtest 2019 zonder twijfel de beste stemtest die we ooit bouwden."

Het strafste is dat Wieni echt mee nadenkt over de stemtest, ze zijn zoveel meer dan een uitvoerder. Mede dankzij Wieni is Stemtest 2019 zonder twijfel de beste stemtest die we ooit bouwden.

Stefaan Walgrave, professor Universiteit Antwerpen