Een gepersonaliseerd videoplatform voor vier.be, vijf.be en zestv.be

Met programma’s als Temptation Island, De Mol en De Slimste Mens lokt SBS Belgium steeds meer online kijkers. Het online videoplatform ontwikkelen voor de drie zenders op vier.be, vijf.be en zestv.be? Dat was niet alleen een hele uitdaging, ook een enorme eer. Ontdek hieronder onze aanpak! 

Eén videoplatform, meerdere uitdagingen 

Achter een gepersonaliseerd videoplatform schuilt een flink aantal uitdagingen, dat wisten we. In een notendop: 

  • Een gepersonaliseerde homepage op basis van het kijkgedrag van de gebruiker 
  • Programmapagina's met ondersteuning voor short- en long-form video

  • Een performante onboarding flow met AWS service Amazon Cognito

  • Livestreaming voor lineaire TV zoals Champions League en Dancing With The Stars

De sterke groei die we met onze zenders online hebben neergezet, is grotendeels te danken aan het performante platform en de vlotte samenwerking die we hebben opgebouwd met Wieni

Kristof Nizet, Digital Product Manager

Video-driven homepage op basis van je kijkgedrag

Eerst namen we de invulling van de startpagina grondig onder de loep. Aangezien 75% van de online bezoekers de sites raadplegen om video te bekijken, wilden we het gevoel van een videobibliotheek overbrengen. Zo gingen we voor een combinatie van redactionele en dynamische secties. Die laatste hebben we gevuld aan de hand van slimme cijfers en logica. Denk maar aan:

  • Aanbevolen voor jou (op basis van individueel kijkgedrag)

  • Kijk verder waar je gebleven was (op basis van individueel kijkgedrag)

  • Meest bekeken (over alle gebruikers)

  • Onlangs toegevoegd (meest recent opgeladen door de redactie)

Opvallend: die dynamische secties worden automatisch gecreëerd aan de hand van het kijkgedrag van de bezoekers. Daarnaast kan de SBS redactie ook zélf secties samenstellen, bijvoorbeeld:

  • Fictie: Callboys, WTFOCK, De Mol, …  

  • Entertainment: De Slimste Mens Ter Wereld, Expeditie Robinson, The Sky is The Limit, De Mol, Zo Man Zo Vrouw, … 

Belangrijk was volop inzetten op feilloze customer journeys richting video. Die visie komt terug in de kleinste details! Zo ontwikkelden we componenten waarmee SBS content in de kijker kan zetten. De klassieke teasers of programma highlights zijn daar voorbeelden van. 

Programmapagina met videoplayer voor short- en long-form

Het belangrijkste stukje innovatie? Die vind je terug op de programmapagina, waar de videoplayer de plaats van de header inneemt. Deze vernieuwde interface is een digitale vertaalslag van de programma's op tv. 

Dankzij een aparte sectie onder de header kunnen gebruikers vliegensvlug navigeren naar vorige seizoenen en andere afleveringen. Ook de andere content - zoals deelnemers van een programma of beelden die niet op tv kwamen - zijn gegroepeerd in de toegewijde secties. 

Ook de videoplayer zelf onderging een metamorfose van formaat. Na het klikken wordt de video automatisch in de header geladen, en dat zonder page refresh. De URL verandert vanzelf, zonder dat de pagina opnieuw moet laden. Putting the user in user experience.

A/B Testing als briefing voor een redesign

SBS Belgium is al sinds dag één van zijn bestaan bezig met data en user testing. Die laatste gebeurt in de vorm van A/B scenario’s waarbij verschillende versies van de belangrijkste pagina’s worden onderzocht op performantie en conversie. Samen testten we varianten van de homepagina en ontdekten we hoe de gebruikers het gemakkelijkst hun favoriete content raadplegen. Belangrijk, want: 75% van de trafiek op de sites leidt naar video content, om zo volledige afleveringen te bekijken. Naast de homepage werden verschillende varianten van de programmapagina getest op onder andere navigatie en gerelateerde content. Steeds met aandacht voor zowel mobile als desktop. Enkel zo zorgen we voor een optimale kijkervaring. Altijd en overal, op elk toestel. 

Na jaren optimaliseren - op niveau van functionaliteiten, technische performantie én gebruikerservaring, was het tijd voor de meest ingrijpende update: een volledige redesign. Daarvoor vormden de een hoop learnings uit de A/B tests van 2019 een sterke basis. In december gingen we uiteindelijk van start met de uitwerking van verschillende conceptuele pistes. De varianten toonden verschillen op meerdere vlakken, waarbij uiteindelijk de meest radicale versie verder werd uitgewerkt. In die versie namen we de navigatie, de homepage én de programmapagina onder de loep. Daarnaast haalden we een aantal pagina’s uit de user flow gehaald. Zo konden we het aantal klikken voor gebruikers tot een minimum herleiden. Per slot van rekening is de gebruiker dé rode draad in alles wat we doen. In dit geval betekende dat de gebruikers op een zo vlotte manier naar volledige afleveringen laten kijken.

sbstv - vijf.be

Gepersonaliseerde homepage voor vier.be en vijf.be

Authenticatie & onboarding via Amazon Cognito 

Bepaalde populaire programma’s, waaronder Temptation Island of De Mol, kennen korte maar hevige pieken in bezoekersaantallen. In het verleden kon het standaard authenticatie mechanisme van Drupal deze pieken onvoldoende opgevangen. Gevolg: de volledige website was niet of zeer slecht bereikbaar. 

Daarom kozen we voor de nieuwe website Amazon Cognito als authenticatie mechanisme: 

  • Het volledig registratieproces procedure wordt afgehandeld worden in front-end, dus binnen de browser van de bezoeker. Aparte communicatie naar de back-end server is dan ook niet nodig. Als resultaat staat de belasting op de server los van de bezoekersaantallen op de website.

  • De authenticatie tokens van Cognito zijn ook inzetbaar voor het benaderen van andere Amazon Web Services (bijvoorbeeld S3, API Gateway, …)

  • De kostprijs is afhankelijk van het aantal maandelijks actieve bezoekers, tegenover vaste tarieven zoals bij Gigya of Auth0. Tijdens rustigere maanden ligt de prijs dus aanzienlijk lager.

De implementatie voerden we integraal uit op front-end, binnen React en JavaScript. De gebruikersgegevens zijn in twee richtingen synchroon met de Selligent CRM implementatie van de klant.

Ondanks deze voorzorgen bleek tijdens de eerste zware bezoekerspiek dat de aanpassingen voor verhoogde requests zorgden op enkele specifieke API eindpunten. Daardoor werden de hiervoor bestemde limieten ruim overschreden. Als gevolg kon een aantal gebruikers zich niet meer aanmelden op piekmomenten, en kregen ze foutmeldingen. Wieni schoot in actie! We overlegden met AWS, en zagen een verhoging in het aantal toegelaten verzoeken per seconde op deze API endpunten. Probleem opgelost, én er veel uit geleerd ook! 

Livestreaming voor lineaire tv zoals Champions League en Dancing With The Stars

Het tv-landschap is de laatste jaren enorm veranderd, en sinds 2015 is het ook bij de zenders van SBS Belgium mogelijk om content gratis online te bekijken. Maar naast de standaard Video On Demand (VOD) kwam de vraag of het ook mogelijk was om via de sites livestreams uit te zenden. En dat voor finales van bepaalde programma’s zoals Dancing With The Stars en Champions League wedstrijden. 

In samenwerking met de videopartner van SBS werkten we enkele proof-of-concepts uit. De keuze viel op een implementatie aan de hand van het RTMP protocol. En aangezien dit protocol standaard (zonder Flash) niet toelaat om rechtstreeks videostreams te tonen in web browsers, hebben we dit omgezet naar streams die werken met HLS. Dat is een protocol dat naast VOD ook werkt met livestreams.

Voor de effectieve omschakeling deden we een beroep op AWS Elemental MediaLive, die bijna elke videobron kan transcoderen naar HLS. MediaLive kan als output zijn data naar Amazon S3 sturen, die in combinatie met een Amazon Cloudfront voor zeer hoge schaalbaarheid en uptime zorgt. 

Zo ontlasten we ook de videopartner van SBS Belgium: die hoeft niet langer een complexe infrastructuur opzetten, aangezien MediaLive de enige is die zijn originele videostream consumeert. Ook kan er geen verdere piekbelasting op de infrastructuur van deze videopartij ontstaan. Want een bijkomende functionaliteit van MediaLive, is de encoding naar meerdere output streams toe. Resultaat? We kunnen zowel 540p, 480p, 360p als 224p kwaliteit aanbieden, en die wordt automatisch gekozen op basis van de internetsnelheid of het toestel van de gebruiker. 

Toch was er een niet te onderschatten uitdaging: de manier waarop AWS Elemental MediaLive de RTMP stream, zoals voorzien door de videopartner, probeerde uit te lezen. Na overleg met de videopartner switchte iedereen van consumer protocol. En alles werkte weer vlot! 

Tot slot hebben we dit alles geprogrammeerd met de API's van AWS, en goten we dit in een aparte admin module op de site. Zo kan de redactie van VIER, VIJF en ZESTV zelf livestreams beheren, en is er geen tussenkomst van Wieni meer nodig.

Het Wieni-team om vroeg in de ochtend onderweg naar SBS Belgium voor de grote launch

Het Wieni team vroeg in de ochtend onderweg naar SBS Belgium voor de grote lancering

Continue iteraties en 58 development sprints

Begin 2017 kreeg Wieni de vraag om het hele platform onder handen te nemen. Het nieuwe tv seizoen van vier.be zou eind augustus worden gelanceerd, wat ons welgeteld 6 maanden gaf. Lijkt krap voor zo'n groot traject, nietwaar? Design workshops, interface design, back-end en front-end ontwikkeling, het importeren van content, testing, ... Gelukkig zaten Wieni en SBS al snel op dezelfde golflengte! Dus we voelden ons comfortabel om de eerste versie vervroegd te lanceren. 

2017: Launch versie 1

De kalme zomerperiode was een ideaal moment voor de zogeheten 'cold launch'. Een lancering zonder toeters en bellen, mét datagedreven aanpak. Meten is weten! Met de feedback van de bestaande gebruikers gingen we tijdens die maanden aan de slag met de finetuning. De redactie van SBS maakte van de gelegenheid gebruik om alle content scherp te stellen. 

2020: Deploy versie 58

Drie jaar later hebben we 58 design- en developmentsprints achter de rug. Dat wil zeggen: voortdurend bijsturen, herontwerpen en ontwikkelen. Verbeteren wat er is, en ontwikkelen wat ontbreekt.

Versie 57 was de meest ingrijpende verandering tot nu toe. Na een intensief testtraject werden de plannen opgemaakt voor een volledig redesign van de homepage en programmapagina’s. De focus zou volledig verschuiven naar gepersonaliseerde videocontent, toegankelijk en gebruiksvriendelijk voor iedereen.

Kristof Nizet (Digital Product Manager) bij SBS Belgium

De mening van SBS Belgium

Kristof Nizet (Digital Product Manager) aan het woord:

"Om al onze digitale projecten naar een hoger niveau te brengen, hebben we een multidisciplinair team nodig dat schaalbaar is. We kozen er dan ook bewust voor om geen eigen development afdeling uit te bouwen, maar samen te werken met een partner die het nodige talent in huis heeft. Maar die moest ook onze ambities aankunnen, dus zochten we in de eerste plaats naar een match qua karakter en visie. Toen Wieni zichzelf kwam voorstellen, zaten we meteen op dezelfde golflengte. Dat vertaalde zich later in het strakke tempo waarmee we in enkele maanden tijd een nieuw platform kregen.

We begonnen het traject met een paar intake gesprekken met key users om de grote lijnen uit te tekenen. In plaats van daarna tijd te steken in grote workshops, uitgebreide lastenboeken en dichtbevolkte statusmeetings, vertrouwden we op elkaars kennis en ervaring voor de invulling van alle details. Van bij het begin hadden we onszelf voorgenomen om zo snel mogelijk een eerste versie van het platform te lanceren en daarop verder te ontwikkelen op basis van interne en externe feedback."

Toen Wieni zichzelf kwam voorstellen, zaten we meteen op dezelfde golflengte. Dat vertaalde zich later in het strakke tempo waarmee op een paar maanden tijd ons nieuw platform werd opgeleverd.

"Voor elke sprint verzamel ik gewoonlijk de grote lijnen van aanpassingen die moeten gebeuren aan het platform. We bespraken samen de beweegredenen achter elke aanpassing en lieten het team van Wieni zelf mee invullen hoe zij iets zouden UX’en/ontwikkelen. Op die manier benutten we maximaal het talent dat we ter beschikking hebben. En zo wordt de last weggenomen om rigide specificaties te moeten schrijven. De sterke groei die we met onze zenders online hebben neergezet, is grotendeels te danken aan het performante platform en de vlotte samenwerking die we hebben opgebouwd met Wieni."

Zilver op FeWeb awards

Zowel SBS Belgium als Wieni mogen dan wel zelf tevreden over het project en de samenwerking, maar ook de sector kon het eindproduct wel smaken. Zo won de website vier.be zilver in de B2C categorie van de FeWeb Excellence Awards.  

Lees hier het Feweb-persbericht 

Kobe en Dieter met de silver-award voor vier.be

Bezoek de websites

Wil je deze websites aan het werk zien? Naast vier.be en vijf.be zijn er nog andere platformen die we bouwden voor SBS Belgium: