Een mini-applicatie waarmee HLN-lezers in tien dagen tijd mee raden wie er achter het masker zit bij The Masked Singer.
HLN is een van de grootste nieuwswebsites van Vlaanderen. Rond de start van een nieuw seizoen van The Masked Singer vroegen ze een mini-applicatie waarmee ingelogde lezers mee kunnen raden wie er achter elk masker zit.
HLN is een van de grootste nieuwswebsites van Vlaanderen. Rond de start van een nieuw seizoen van The Masked Singer wilden ze hun lezers actief bij het programma betrekken, via een mini-applicatie die in nieuwsartikelen kon worden ingevoegd.
De uitdaging
HLN klopte amper 10 dagen voor de eerste aflevering van het nieuwe seizoen aan met de vraag voor een mini-applicatie. Dat bracht een aantal uitdagingen met zich mee:
- Er was nauwelijks tijd tussen de vraag en de eerste uitzending. Van concept tot een werkende applicatie moest in een beperkt aantal dagen gebeuren.
- De applicatie moest ingevoegd kunnen worden in uiteenlopende nieuwsartikelen over The Masked Singer, in plaats van op één vaste pagina te staan.
- Rond de uitzending zelf, vooral op vrijdagavond, tijdens en net na de aflevering, verwachtte HLN een duidelijke piek in bezoekers, waar de applicatie niet onder mocht bezwijken of trager van worden.
- Enkel ingelogde HLN-lezers mochten meeraden, wat betekende dat de applicatie moest aansluiten op de bestaande manier waarop lezers zich bij HLN aanmelden.
Onze aanpak
Een uitdaging zoals dit gingen we niet uit de weg, dus ging het team enthousiast aan de slag. Het concept was vanzelfsprekend: op de startpagina verschijnt een overzicht van de deelnemende personages. Zodra een bezoeker een personage aanklikt, kan men de naam van de verdachte BV ingeven, waarna de top drie van de hoofdverdachten voor dat personage getoond wordt.
Omdat de piekmomenten rond de uitzending zelf voorspelbaar maar intens zouden zijn, bouwden we de applicatie bewust zo licht mogelijk op. Het werd een heel statische applicatie die alle content uitleest uit één JSON-bestand, terwijl het stemmen zelf via een aparte JSON API loopt.
- Vue.js vormt de frontend van de mini-applicatie.
- Symfony vormt de backend-basis.
- Alle content wordt periodiek uitgelezen en samengevoegd tot één JSON-bestand, waardoor de applicatie razendsnel inlaadt, ook tijdens piekmomenten.
- Het stemmen zelf verloopt via een lichte, aparte JSON API, los van de statische content.
Resultaat
Op amper 10 dagen tijd, van de eerste vraag van HLN tot een werkende applicatie, stond de tool klaar voor de eerste aflevering van het nieuwe seizoen.
- Gebouwd en live binnen 10 dagen, net op tijd voor de start van de eerste aflevering.
- Een architectuur die bewust op piekbelasting rond uitzendmomenten is voorzien.
- Een applicatie die naadloos in verschillende nieuwsartikelen kon worden ingevoegd, in plaats van op één vaste pagina te staan.
Voor HLN betekent dit dat lezers via hun eigen nieuwsartikelen op een laagdrempelige manier bij The Masked Singer betrokken werden, zonder dat hiervoor een aparte app of registratie nodig is.
Na de eerste editie in 2022 is deze actie nog meerdere keren herhaald. Hiervoor wordt de webapplicatie steeds gestijld in de huisstijl van dat jaar.
