Bruzz.be nieuwsplatform

Na de samensmelting van TVBrussel, FM Brussel en Brussel Nieuws tot Bruzz, was Wieni aan zet om een vernieuwd digitaal platform te ontwikkelen voor iedereen binnen en buiten Brussel. Een nieuwssite voor iedereen die wil weten wat er in Brussel gebeurt, die Brussel wil begrijpen en Brussel beleven.

bruzz - mobile screens

mobile screenshots van bruzz.be

Naast een gebruiksvriendelijk nieuwsplatform, was een specifiek aandachtspunt ook de backend voor de content workflows. Daarvoor ontwikkelden we krachtige backendtools op maat in Drupal voor journalisten en redacties.

Wat waren de uitdagingen bij het Bruzz.be project?

  • Omgaan met plotse pieken in bezoekersaantallen bij breaking news
  • Journalisten en redactieteams laten samenwerken in een content management platform en die samenwerking verder meten en optimaliseren
  • 15 manmaanden arbeid realiseren in 3 kalendermaanden
  • Aparte storytelling en frisse visualisaties brengen zoals bijvoorbeeld tijdens verkiezingsperiodes  

Een nieuwssite is...

Een website bouwen voor een online nieuwsmedium, dat ook nog eens een TV- en radiozender is, en naast nieuws ook heel wat Uit-tips en events voor Brussel wil coveren, dat vraagt een aparte aanpak. 

Uiteraard was er een bestaand platform waar we veel uit konden leren. Dat hebben we intern ook helemaal opgezet om exacte flows van content goed te begrijpen op backend- en databaseniveau. Ook om de werking van het CMS voor de redacteurs beter te begrijpen is het cruciaal om de software zoals ze nu gebruikt wordt grondig te bestuderen. Samen met onze cijfermatige analyse (bvb bezoekersstatistieken) en enkele workshops en interviews met Bruzz-medewerkers, konden we een design planning opmaken en een backlog definiëren van features.  

De belangrijkste kapstokken waaraan we het volledige platform konden ophangen, definieerden we als volgt:

  • Homepage en andere landingspagina’s, opgebouwd uit flexibele secties en layout-grids
  • Een aparte “Uit” homepage, met reviews, events in de kijker.
  • Automatisch gegenereerde pagina’s voor topics (bvb Mobiliteit) en gemeentes (bvb Jette)
  • Een aparte plaats voor video: met playlists, shortform-fragmenten en longform programma’s
  • Een pagina met “Live”-beleving: met de radiospeler en recent nieuws  

Het Wieni designteam in de Bruzz TV-studio

Specifieke tools in de redactie-backend

(Eenmalige) import van het bestaande nieuwsarchief

Een van de taken van dit project was het importeren en vlot integreren van de reeds bestaande content (iets meer dan 100.000 content items) van de oude site naar de nieuwe site. 

De eerste stap hiervoor was content remodelling; de oude site had een bepaalde content structuur die niet overeenkwam met de nieuwe site. Er werd veld per veld bekeken wat de relevantie was van de bestaande data, en waar nodig werden de velden overgezet en / of aangepast  naar de nieuwe content structuur. Dit alles gebeurde met behoud van taxonomies, assets, taal en vertalingen en onderlinge relaties.

In deze case waren enkele van de technische uitdagingen het grote aantal content items, 3 legacy videoformaten en het overzetten van de asset files. De oude content werd via json api endpoints beschikbaar gemaakt en de nieuwe site las deze queue gewijs uit om nieuwe content aan te maken. Door reverse mapping te voorzien naar de oude content, konden onderlinge relaties zonder problemen overgezet worden en konden er waar nodig correcties gebeuren. De legacy video formaten werden gecombineerd in een uniforme content structuur zodat waar nodig de juiste video player gebruikt kon worden.  

Permanent externe info inladen

Een nieuwssite gebruikt content uit verschillende bronnen, om deze content zo vlot mogelijk te integreren in de site werden er verschillende tools ontwikkeld.

Belga import

Via een aparte tool worden de externe belga feeds op regelmatige basis uitgelezen en getoond in een overzichtstabel. De eindredacteurs kiezen uit dit overzicht de items waar ze een Bruzz artikel van willen maken. Op dat moment wordt het eigenlijke bruzz artikel klaargezet met overname van content, source en tags en is het aan de redacteur om de finale versie af te werken.

Backend interface van de geïmporteerde Belga artikels

Backend interface van de geïmporteerde Belga artikels

Magazine import

Bruzz is een multi channel platform en brengt ook een print magazine uit, de content van dit magazine wordt op een gelijkaardige manier beschikbaar gemaakt op de website. De magazine exports zijn in een vjoon k4 xml formaat. Deze xml files worden uitgelezen en in een gelijkaardige overzichtstabel beschikbaar gemaakt.

Video import

De video's van Bruzz worden gehost op het Clevercast platform.Via de website interface wordt een lijst van videos getoond.De redacteur kan dan van deze videos kant en klare video content aanmaken. 

Content tools in het CMS voor redactieleden

Een nieuwssite zoals Bruzz die content aanbiedt geschreven door verschillende auteurs, met beelden van verschillende fotografen en content organiseert op basis van taxonomieën is het belangrijk dat deze content onderhouden kan worden. Hiervoor werden verschillende tools ontwikkeld.

Taxonomy switcher

Om content eenvoudiger te kunnen hercategoriseren werd een tool ontwikkeld om content op een granulaire wijze (per veld) aan nieuwe categorieën te kunnen hangen. Via een eenvoudige interface kan de redacteur kiezen op basis van vocabulary en veld om content van een tag naar een andere tag te verplaatsen.

Het Bruzz nieuwsscherm op het De Brouckèreplein

Het Bruzz nieuwsscherm op het De Brouckèreplein

Backend interface waar je content kan hercategoriseren

Clean authors

Door de jaren heen waren de auteur referenties door verschillende schrijfwijzen, onvolledige data vervuild geraakt. Hiervoor werd een tool ontwikkeld om alle content van een bepaalde auteur aan te passen en aan de juiste auteur te hangen.

Bulk image import

Een media site zoals Bruzz maakt gebruikt van veel beeldmateriaal en heeft hier meerdere bronnen voor. Zo zijn er bijvoorbeeld de beelden die gebruikt worden in de print magazines. Om dit beeldmateriaal vlot te integreren in de site, werd er een tool ontwikkeld om zip files met beeldbestanden met 1 klik te importeren in de Bruzz media library.

Section builder

Een belangrijke vereiste was dat de redactie moest kunnen “spelen” met de website. De homepage mag er niet elke dag hetzelfde uitzien en het moet mogelijk zijn om deze heel snel aan te passen naar een andere layout. Hiervoor ontwikkelden we een op maat gemaakte “section builder”

Via het Grid Layout heeft de redactie een ruime keuze aan layout templates. Zo kunnen ze kiezen om enkel drie teasers te tonen. Of ze kunnen ze per vijf tonen, of per vier allemaal naast elkaar. Er kunnen per pagina zo verschillende layouts onder elkaar worden geplaatst waardoor je een grote visuele verscheidenheid aan inhoud kan creëren.

Backend interface om een bepaald Grid layout te kiezen

Een bijkomende feature is dat deze secties automatisch kunnen gevuld worden door enkele parameters. Zo kan je bijvoorbeeld binnen een bepaald deel van een sectie alle content laten zien die aan een bepaalde topic of tag hangt, zonder dat je manueel specifieke artikels moet aanduiden.  

Snelle laadtijden door performantie & caching

Een nieuwswebsite zoals die van Bruzz biedt enkele specifieke uitdagingen rond performantie/caching omwille van hun karakter:

  • Er is er veel nieuws, meer dan 130.000 artikels, die je niet allemaal ‘warm’ kan houden in de CDN, dus die potentieel veel database queries kunnen veroorzaken 

  • Nieuw nieuws moet ook snel beschikbaar zijn, ook op pagina’s van oudere artikels, waardoor je niet kan terugplooien op al te lange cache tijden op niveau van de CDN, voor geen enkel artikel

  • Er kunnen -soms hevige- fluctuaties zijn in bezoekerspieken.

Uit een groot aantal beschikbare oplossingen (varnish, memcache, multiple frontends met load balancers, …) kozen we de volgende:

Elasticsearch

Elasticsearch is een software die gestructureerde data kan indexeren waarna deze bijzonder performant kan worden geanalyseerd/opgevraagd. We gebruiken deze technologie om de standaard SQL Database van Drupal te ontlasten. Meer specifiek indexeren we alle artikels en hieraan gerelateerde content. 

Bepaalde onderdelen van elke pagina waar veel ‘beweging’ op zit (zoals de ‘meest recent’ news ticker bovenaan en ‘vooraan op bruzz’ die vaak rechts op artikels verschijnt) worden, los van de pagina zelf, via javascript apart ingeladen. Op die manier kunnen we de inhoud van artikels toch lang in de CDN én Redis houden, terwijl de pagina zélf wel recent nieuws bevat.

Elasticsearch wordt ook ingezet wanneer je zoekt op artikels. Je kan zoeken mbv. een aantal facets (datum, onderwerp, taal, ..). Dit zoeken én het tonen van de resultaten gebeurt ook volledig via Elasticsearch, Drupal komt hier niet meer aan te pas.

Cloudfront CDN

Amazon Cloudfront wordt ingezet als first line of defense. De tijd dat een artikel mag bewaard worden op dit niveau wordt bepaald door onder meer de publicatiedatum: hoe ouder een artikel is, hoe langer de CDN cache tijd mag zijn. Cloudfront vormt een eerste buffer voor hoge pieken en is quasi onbeperkt (automatisch) schaalbaar.

Redis

Redis is een zogenaamde key/value data store die onder meer kan ingezet worden voor het cachen van datasets. Operaties (lezen/schrijven) op deze datasets is een aantal malen sneller dan het gebruik van een klassieke (SQL) database, temeer omdat de datasets volledig in het werkgeheugen zit (kan optioneel wel persistent zijn op disk)

In ons geval is een van deze datasets de volledig gerenderde pagina (de DOM). Elke node (bv. een artikel, maar ook een video) dat we tonen op de site krijgt een cache ID. Een pagina die 5 artikels toont krijgt zo ook 5 cache ID’s mee, die ook opgeslagen worden in redis. Zo weten we van élke pagina welke cache ID’s hieraan verbonden zijn én zit elk van die pagina’s ook in de cache van Redis. 

Als een bepaald artikel dan wordt aangepast, en de bijhorende node dus wordt geïnvalideerd, weten we ook, via de cache ID van dat artikel, op welke andere pagina’s op de website het bewuste artikel ook getoond wordt (bv als teaser of link). Die andere pagina’s worden dan ook automatisch uit de Redis cache gehaald.

Op deze manier kunnen we op de CDN een lage max-age instellen (dus al het nieuws blijft vers), maar wordt ook de SQL database niet al te veel belast. 

Bijkomend invalideert Redis zelf ook alle artikels na een bepaalde tijd, en ook hier geldt dat oudere artikels langer in Redis blijven.

Demo van het CMS

Het proces

Stand-ups

Voor onze Daily stand-up, kwamen we - zoals het woord het zegt - dagelijkse samen met het hele team. Het doel van de daily stand-up meeting is om de lopende werkzaamheden op elkaar af te stemmen en een planning op te stellen voor de komende 24 uur. 

Tijdens de daily stand-up meeting beantwoordt iedereen drie vragen:

  • Wat heb ik bereikt sinds de vorige daily stand-up?

  • Wat ga ik vandaag bereiken?

  • Verwacht ik obstakels, en kan het team me daarbij helpen?

Deze dagelijkse stand-ups waren zeer belangrijk voor het team. Het verbeterde niet alleen de communicatie binnen het team, maar het stimuleerde ook snelle besluitvorming, we identificeerden sneller belemmeringen en soms zorgde het er ook voor dat andere meetings overbodig werden. 

Voor dit project creëerden we ook een fysiek to-do bord met post-its in de keuken. Op elke post-it stond een taak en elk teamlid kreeg niet meer dan twee post-its. Zo wist iedereen perfect waar zijn/haar collega mee bezig was. Alle niet-toegewezen post-its plakten we op het backlog bord. Zo krijg je makkelijk inzicht in de weg die we aan het bewandelen zijn; Stap voor stap wordt met het hele team iets afgemaakt. Het zijn behapbare brokjes waar aan gewerkt wordt.

Dagelijkse standup meeting met het Bruzz development team

Progressie

De deadline was op zijn minst strak te noemen. Op drie maanden tijd moesten we een platform neerzetten voor een redactie van meer dan 30 mensen waar ze vliegensvlug en in alle vrijheid artikels en video’s kunnen aanmaken, waar we moesten koppelen met een resem aan externe services (Clevercast, Belga, …), … 

Met de combinatie van onze dagelijkse stand-ups, het to-do bord en een strakke indeling van de taken, konden we ruim op tijd opleveren.

Launch on location

Op 12 december 2017 trokken we omstreeks 13 uur naar de klant om de laatste issues op te lossen en de website live te zetten. Het hele team reisde mee naar het Flagey gebouw te Brussel waar de Bruzz redactie gehuisvestigd is. 

Omdat de Bruzz-lezers vooral door de dag tijd doorbrengen op de website, met als piek-moment tussen 17 uur en 19 uur, besloten we de nieuwe website pas daarna live te zetten. Zodat de bezoekers zo min mogelijk ‘last’ hadden van de overgang.

Website launch bij Bruzz

Brussel Kiest

Voor de verkiezingen van 2018 en 2019 werkte Buzz samen met BX1 om op de website realtime uitslagen te kunnen tonen. 

Technisch werden door BX1 op gezette tijdstippen XML files aangeleverd in een bucket op AWS S3, die door een Lambda script werden geparsed en beschikbaar werden gemaakt voor frontend. 

Er werd door Wieni vooral gekeken naar UX/UI om deze resultaten op een duidelijke en aangename manier te kunnen weergeven.   

De resultaten werden realtime weergegeven in grafieken. Voor een vlotte ontwikkeling kozen we voor Recharts, een JS charting library gebouwd op de logica van React components. Aangezien we de meeste sites uitbreiden met React components was dit een logische keuze. Ook maakten we gebruik van de nieuwe hooks API.

Brussel kiest grafiek 2019

Barchart van de verkiezingsuitslagen (VP) in 2019

Brussel kiest grafiek 2019

Pie chart van de zetelverdeling (VP) in 2019

De grafieken in Recharts zijn volledig modulair opgebouwd, waardoor je als developer veel vrijheid krijgt en je in no-time een werkend prototype kan voorstellen aan de klant. Door de juiste parameters te tweaken en een laag css toe te voegen, toverden we het geheel om naar een frissen, mobile- en user-friendly UI, die in lijn lag met de stijl op de Bruzz website zelf.

<BarChart width="100%" height={250} data={data}>
    <CartesianGrid strokeDashArray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Legend />
    <Bar dataKey="results2014" fill={BruzzColors[index]} />
    <Bar dataKey="results2019" fill={BruzzColors[index]} opacity={0.5} />
</BarChart>

 

De mening van Bruzz

Sandra Schreurs aan het woord, Online projectcoördinator Bruzz.be

“Wat ons bij Wieni meteen opviel was de creativiteit en betrokkenheid. Ze werken zich volledig in hun klant en diens vakgebied in en weten daardoor waarover het gaat in gesprekken en brainstorms."

We werken nu bijna twee jaar samen en dat was en is nog steeds een fijne en constructieve samenwerking. Bijna dagelijks is er contact met project manager Sophie via Slack, Gitlab of hangouts en ook het contact met de rest van het team is direct en goed. Onze vragen en opmerking geraken op die manier altijd snel bij de juiste persoon binnen het team.

Wat ik erg apprecieer in de samenwerking met Wieni is dat ze met ons meedenken en ook durven zeggen als ze een voorstel of vraag van ons niet goed vinden en dan telkens met een beter alternatief op de proppen komen.”

bruzz - large artikel
bruzz - small article

Benieuwd naar het resultaat?

Bekijk hier de website:

bruzz.be