How we created a shared platform on TV, mobile app and web for the Belgian elections using web technology

Published in

VRT Digital Products

9 min readMar 13, 2019

Belgium became independent in 1830. Between 1970 and 1993, the country evolved into a federal structure.

Being a citizen of this federal state, with various governments on different levels, and voting being compulsory by law in Belgium, we have our share of elections :-)

As a public broadcaster, the VRT (Flemish Radio and Television Broadcasting organisation) plays an important role in the coverage of the election results. In this article we explain how VRT NWS (the VRT’s news broadcasting brand) used web technology to visualise the election results on the VRT NWS website, in the VRT NWS app, and on touchscreens used in the TV show.

The concept

Trend

Three factors led to the idea of reusing web components in a TV production setting.

First of all, over the last few years we have seen a huge increase in mobile usage of all digital VRT NWS products. The analytics show that in fact 78% of users on election day used our products with a touch-enabled device.

Secondly, the journalist responsible for covering the election results (Ivan De Vadder) was looking for a better way to tell the story of winning and losing parties, and possible coalitions. Presenting the idea of a touch interface to him, that would enable him to interact directly with the graphics, immediately sparked his mind.

Thirdly, in the past we always developed election results graphics for our website and app (iOS/Android), and a third party supplier developed the TV graphics. The same components were built twice, resulting in a substantial extra cost.

These three factors led to the idea of building the election components cross-platform and “touch-first”.

The idea was born: “Iedereen Ivan”, which could be translated from Dutch to “Everyone can be Ivan”. Connecting to the public, by offering the same functionality to both the users at home and the TV host (Ivan) in the studio. Both based on the same technology.

Agile and efficient

The most challenging part of this project was the usage of web components in a TV studio. But by doing this, we could eliminate the cost of separate TV graphics development.

We started by defining the absolute minimum viable product (MVP), we made some simple prototypes to get the discussion started, and iteratively developed each component. Every 2 weeks we organised feedback sessions with the VRT NWS editorial team and Ivan De Vadder to respond to changes.

TV production at VRT usually follows a big up-front design approach. Using an agile method was uncommon and new for the TV production staff, yet after two or three iterations they were already getting extra insights by playing with our prototypes. They discovered that being able to change requirements and priorities along the process, was resulting in a better end-product.

User-centric

Feedback from our end-users confirmed that there was a high demand for an accessible, user-friendly and self-explanatory election results toolset. User research was done before and during development, distracting design elements were eliminated, and the application was continuously tested for accessibility. This effort resulted in a minimalistic but attractive UI, easy to use for the broad Flemish audience. The Flemish schools really liked to use the tool during classes and therefore, after the elections, the decision was made to keep the tool accessible on a static URL for reference.

We also added a gamification element to the Coalition component. This component enabled the user to form different possible coalitions of political parties and see if a political majority was in reach or not. The analytics showed that this component was used the most by our end-users (by far), although it was first not included in the MVP. An interesting conclusion.

The web app

The elections web application consists of several components visualising election data, and had to be integrated in the VRT NWS website, the VRT NWS app and in the live TV show.

Election results on the VRT NWS homepage

Click here for a live demo of the 2018 election results webapp.

Technology

To achieve all the required functionality and versatility we had to do some extensive research. Eventually we chose to use React in combination with other libraries like Redux, D3.js, Electron and Puppeteer. React is a JavaScript library created by Facebook for building reusable UI components. Redux is basically a storehouse which contains the state of the application and it helps you write applications that behave consistently.

In the TV studio, the application had to run in a robust and steady environment, without unwanted OS and browser specific distractions (e.g. update popups, mouse, scrollbars, …). Because of this, we opted to use Electron to convert our web app to a cross-platform native desktop app. This native app was then displayed full-screen on two large touchscreens in the TV studio.

(Coming soon: more info about the TV studio setup)

Functional and design requirements forced us to use D3.js instead of an existing charting library, often limited in customisation possibilities. The D3.js Javascript library is used for visualising dynamic data in the web browser as vector elements (SVG). We applied this in the bar chart and half pie chart (seats distribution & coalition).

The components

Bar chart

The bar chart should display the percentages of each party, difference against the previous election and order from largest to smallest party, in a way that everybody can understand. “Everybody” includes people using a wide variety of devices ranging from laptops to smartphones. But people using these devices each have their own way of interacting with it. Not everyone can see what is displayed on a screen. Blind people or individuals with bad sight also want to know what a graph is trying to tell them. When these people want to “look” at the bar chart they will hear it instead. A custom text is read to them. This was done with all the components. Accessibility was an important part of this project as it involves the whole of Flanders.

Seats distribution

The seats distribution component was a half pie chart, a circular statistical graphic, which is divided into slices to illustrate a numerical proportion. Each slice represents the amount of seats a party has achieved in the election results. To see the delta and list leader of each party the user could click on an item in the legend or hover on a slice. When the amount of seats was equal to the previous election results the delta wasn’t shown.

Coalition

The coalition component was created to add some gamification to the election results application. By default the users saw an empty half pie chart with in the middle the amount of seats required to form a coalition. Party seats could be added to the chart by clicking on the legend item. When the party seats are added to the chart, the legend item becomes active and the label, x amount of seats required to form a coalition, updates. To remove party seats from the chart the users had two possibilities. They could click on the active legend items or on the slice of a party in the chart.

The coalition component could be reset to its initial state by:

Quickly navigate to another component, to navigate back to the coalition component.
Manual remove each party from the chart by clicking on the active legend items or chart slices.

During the live election show, Ivan had to be able to form multiple coalitions for a single commune, province or city district. That’s why he had a special requirement to have an invisible reset button. So there was also a third possibility to reset the coalition component to its initial state. A tab / click on the label, x amount of seats required to form a coalition, triggered a functionality to reset the state.

Statistics also showed that we had a lot of attentive viewers. The invisible reset button is also used a lot in the VRT NWS app and website.

Preference votes

As opposed to some other components, there wasn’t a lot of complexity involved in the preference votes components. Due to their relative simplicity and straightforwardness we opted to use existing open source libraries (react-table and react-id-swiper) and extend their functionality e.g. custom sorting and animations.

Playlist

The Playlist component consists of 2 modes: “Featured” and “Most recent”. The news editors could select remarkable election results and present them to the user in the Featured playlist. On TV, the Featured playlist was a selection of the latest interesting election results that Ivan De Vadder navigated through during the live show. Two journalists present in the studio authored this playlist in the back-end web application. The Most Recent playlist is simply a live feed of new incoming results.

Search

The Search component was an autocomplete text field to let users search their own commune, province or city district in the tool and view the election results. The Search component got a prominent place in the top of the tool because it was important that users could quickly find their way to what was important for them: the election results of their own local government. This component was not included in the tool for TV, because it didn’t fit in the concept of the live show.

The integrations

Web: a multifunctional AEM component

Since the launch of the new VRT NWS website in August 2017, all journalists are writing their articles on the Adobe Experience Manager platform (AEM), a Content Management System (CMS) by Adobe that we implemented at VRT. The elections tool is a standalone React application on a separate environment (for emergency purposes) so we also had to integrate this tool in the AEM platform, to display it on the website.

Our team made a component in AEM that the editors could drag on a page, like an article or the homepage. This AEM component injects the elections React application via JavaScript and the settings are configurable by the editors in the component settings dialog. The settings are then passed in JSON format via a data-attribute to the React application. This way they could write an article about the elections in the city of Bruges, for example, add the elections component on the page and set it up to display results of Bruges by default and select the options to hide the search field, playlist and other navigation elements of the tool. On the homepage, they would just drag the same component and not change the configuration. In that case the default settings are used, which means the default commune and all navigation elements are displayed.

The default commune (or province or city district) could even be changed at any time by the editors in the back-end user interface where all election results were gathered. That way, the default commune displayed on the homepage, app home screen and touch screen in the TV studio was always the same and could be set to the most relevant result for the end users.

This multifunctional component was really useful for the editors to create articles enriched with an interactive elections tool, configured for the content of that article. The underlying React application has the same shared codebase for the website, the app and TV, so changes to the UI could be done one time, in one place and for all platforms at the same time.