Een schaalbaar videoplatform voor SBS Belgium

Met programma’s als Temptation Island, De Mol en De Slimste Mens lokt SBS Belgium meer en meer online kijkers. Het was voor ons een hele uitdaging én een eer om het online videoplatform te ontwikkelen voor de drie zenders op vier.be, vijf.be en zestv.be.

Deze case in het kort:

  • Meten is weten

  • Testresultaten en data als briefing voor een redesign

  • Homepagina wordt een videobibliotheek

  • Programmapagina met fluïde player

  • Een geavanceerde en secure login flow via Amazon Cognito

  • Livestreaming 

  • Een terugblik

De meest ingrijpende versie update  

Meten is weten 

SBS Belgium is als organisatie vanaf dag 1 sterk bezig met data en user testing. Testing in de vorm van a/b scenario’s waarbij verschillende versies van de belangrijkste pagina’s worden onderzocht op performantie en conversie. Zo werden varianten van de homepagina getest om te weten te komen hoe de gebruikers het gemakkelijkst op hun favoriete content terechtkomen. Belangrijk om te onderzoeken, als je weet dat 75% van de trafiek naar de sites komt om volledige afleveringen te bekijken. Naast de homepage werden verschillende varianten van de programmapagina getest op o.a. navigatie en related content. Steeds met gelijke aandacht voor zowel mobile als desktop. We streven namelijk naar een optimale kijkervaring, altijd en overal, op elk device. 

Testresultaten en data als briefing voor een redesign 

Na jaren optimaliseren, niet alleen op niveau van functionaliteiten maar ook technische performantie en gebruikerservaring, was het tijd voor de meest ingrijpende versie update tot nog toe: een volledige redesign. 

De uitgebreide learnings uit de a/b tests van 2019 vormden een sterke basis voor de design briefing. In december zijn we gestart met de uitwerking van verschillende conceptuele pistes. De varianten toonden verschillen op meerdere vlakken, waarbij uiteindelijk de meest radicale (ingrijpende) versie verder werd uitgewerkt. In deze versie herbekeken we de navigatie, de homepage en de programma pagina. Daarnaast werden een aantal pagina’s uit de user flow gehaald om het aantal clicks tot een minimum te beperken. Steeds met één doel voor ogen: de gebruikers op een zo vlotte manier naar volledige afleveringen te laten kijken.

Dynamische en redactionele secties op de VIER.be homepagina

Programma-overzicht als homepagina

De invulling van de homepage werd grondig herbekeken. Om te beantwoorden aan het doel van 75% van de trafiek, willen het gevoel van een videobibliotheek overbrengen. Hier slagen we in aan de hand van een combinatie van dynamische en redactionele secties. De dynamische secties worden gevuld aan de hand van slimme cijfers en logica waar we over beschikken, bijvoorbeeld:

  • Meest bekeken (over alle gebruikers)

  • Onlangs toegevoegd (meest recent opgeladen)

  • Aanbevolen voor jou (op basis van individueel kijkgedrag)

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

Highlight sectie op VIER.be 

Deze dynamische secties worden automatisch opgemaakt aan de hand van het kijkgedrag van de bezoekers. Naast de automatische secties kan de SBS redactie zelf 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, … 

Naast de video secties zijn er nog andere componenten die de redactie kan gebruiken om content in de kijker te zetten, zoals een programma-highlight of een klassieke teaser. Deze componenten dragen bij tot de visie om in te zetten op vlotte user journeys richting video. Een visie die we tot in de kleinste details blijven nastreven.

Programmapagina voor De Mol

Programmapagina voor De Slimste Mens Ter Wereld

Programma-pagina met fluïde player

De belangrijkste vernieuwing vinden we terug op de programmapagina, waar de videoplayer de plaats van de header inneemt. De vernieuwde interface is een digitale vertaalslag van hoe we de programma’s van op TV kennen.

Een sectie onder de header laat gebruikers toe snel te navigeren naar vorige seizoenen en andere afleveringen. Ook de andere content, zoals deelnemers van een programma of beelden die niet op TV kwamen, vinden we gegroepeerd terug in de toegewijde secties. 

De videoplayer zelf onderging een metamorfose. Om gebruikers een optimale ervaring te bieden, kozen we ervoor om video’s automatisch in te laden zonder page refresh. Met andere woorden, wordt na een click de video in de header ingeladen en de URL automatisch aangepast, zonder dat de pagina hiervoor opnieuw moet laden. Een sterk staaltje vakmanschap.

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

Authenticatie en Livestreaming

Authenticatie via Amazon Cognito 

Voor enkele populaire programma’s, waaronder bijvoorbeeld Temptation Island of De Mol, zien we korte maar hevige pieken in bezoekersaantallen. In het verleden konden deze pieken door het standaard authenticatie mechanisme van Drupal onvoldoende werden opgevangen, waardoor de hele website niet of slecht bereikbaar werd.

Voor de nieuwe website werd daarom gekozen voor Amazon Cognito als authenticatie mechanisme. Volgende punten speelden mee in deze keuze:

  • Het volledig registratieproces procedure kan afgehandeld worden op frontend, dus binnen de browser van de bezoeker. Er is geen aparte communicatie naar de backend server nodig, waardoor de belasting op de server los staat van de bezoekersaantallen op de website.

  • De authenticatie tokens van Cognito kunnen ook worden ingezet voor het benaderen van andere Amazon Web Services (bv S3, API Gateway, …)

  • De kostprijs is afhankelijk van het aantal maandelijks actieve bezoekers, tov van fixed tarieven zoals bij bv gigya of Auth0, zodat tijdens rustigere maanden de prijs behoorlijk lager ligt.

De implementatie werd volledig uitgevoerd op frontend, binnen React/Javascript. De gebruikersgegevens worden ook in twee richtingen synchroon gehouden met de Selligent CRM implementatie van de klant.

Ondanks deze voorzorgen bleek tijdens de eerste zware bezoekerspiek dat de customisaties zorgden voor dermate verhoogde requests op enkele specifieke API endpoints zodat de limieten hiervoor ruim overschreden werden. Het gevolg hiervan was dat een aantal gebruikers niet meer kon aanmelden op piekmomenten, maar foutmeldingen kreeg (voor reeds aangemelde gebruikers stelde het probleem zich niet)

Na overleg met AWS zijn het aantal toegelaten requests/second op deze API endpoints gevoelig verhoogt. De problemen hebben zich hierna niet meer gesteld, maar er zijn dus wel enkele lessen uit getrokken.

Livestreaming

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 kunnen zenden, dit voor finales van bepaalde programma’s (Dancing With The Stars) maar ook voor de Champion’s League wedstrijden. 

In samenwerking met de video-partner van SBS werden er enkele proof-of-concepts uitgewerkt, waarna de keuze viel op een implementatie aan de hand van het RTMP protocol. Daar dit protocol standaard niet toelaat om rechtstreeks video streams te tonen in web browsers (althans, niet zonder Flash 😱), zetten we deze om naar streams die werken met HLS, een protocol dat naast VOD ook kan werken met livestreams.

Voor het effectieve omzetten maken we gebruik van AWS Elemental MediaLive, dat in staat is om bijna elke videobron te 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. 

De videopartner van SBS Belgium wordt hierdoor ook ontlast van het opzetten van zware infrastructuur aan zijn kant daar er maar 1 consumer is van zijn originele videostream (nl. MediaLive) en er ook geen verdere piekbelasting kan optreden naar zijn infrastructuur toe. Een bijkomende extra feature is dat MediaLive encoding kan doen naar meerdere output-streams. Zo kunnen we een 540p, 480p, 360p en 224p kwaliteit aanbieden dat automatisch geselecteerd wordt op basis van je internetsnelheid en/of device.

Een probleem dat zich hier voordeed was de manier waarop AWS Elemental MediaLive de RTMP stream, zoals voorzien door de video partner, probeerde uit te lezen. Na overleg met de video-partner zijn zij (en wij) geswitched van consumer protocol, waarna alles vlot werkte.

Ten slotte hebben we dit alles geprogrammeerd met de API's van AWS en in een aparte admin-module gegoten op de site. Op die manier 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 om vroeg in de ochtend onderweg naar SBS Belgium voor de grote launch

Een terugblik

De eerste drie jaren van het project

Begin 2017 werden met Wieni we gecontacteerd om het hele platform onder handen te nemen. Het nieuwe TV seizoen van Vier zou eind augustus worden gelanceerd, we hadden dus welgeteld 6 maanden. Lijkt krap voor het hele traject, gaande van design workshops, interface design, backend en frontend development, content import, testing en launch. Maar we zaten al snel op dezelfde golflengte met SBS, we kwamen geen verrassingen tegen, dus voelden we ons beiden comfortabel om de eerste versie vervroegd te lanceren.

4 juli 2017: vervroegde lancering versie 1

Deze zogenaamde “cold launch” was ideaal in een rustige zomerperiode. Geen toeters en bellen bij de lancering, maar toch al meteen meten, analyseren en feedback ontvangen van bestaande gebruikers. Een ideale periode om langs onze kant de nodige finetuning te doen, en voor de SBS redactie om alle content op punt te stellen.

Drie jaar later: versie 58

Ondertussen zijn we bijna drie jaar verder en hebben we 58 design- en developmentsprints achter de rug. Dat wil zeggen: continu 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 volledige redesign van de homepage en programmapagina’s. De focus zou volledig verschuiven naar gepersonaliseerde videocontent, toegankelijk en gebruiksvriendelijk voor iedereen.

What’s next?

Samen met SBS zijn we volop bezig met het plannen van nieuwe versies. Om vandaag de dag vooruitgang te blijven boeken als merk (en als platform) is het noodzakelijk om gedane oefeningen in vraag te blijven stellen, te blijven meten, testen, ontwerpen en ontwikkelen. Een manier van werken waar we bij Wieni helemaal achter staan, en waar SBS Belgium het verschil maakt.

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 te werken met een partner die het nodige talent in huis heeft. Om een partner te vinden die onze ambities aan kon, zochten we in eerste instantie 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 op een paar maanden tijd ons nieuw platform werd opgeleverd.

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 om alle details in te vullen. 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/externe feedback."

"Voor elke sprint verzamel ik de grote lijnen van aanpassingen die moeten gebeuren aan het platform. We bespreken samen wat de beweegredenen achter elke aanpassing zijn en laat 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 wordt de tijd/last weggenomen om rigide specs 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 de klant als Wieni mogen dan wel zelf tevreden over het project en de samenwerking, maar ook het eindproduct is binnen de sector niet onopgemerkt voorbij gegaan: de website vier.be won namelijk zilver in de Business-to-Consumer categorie van de FeWeb Excellence Awards.  

Lees hier het Feweb-persbericht 

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