KALEIDOSCOPE

TitleKALEIDOSCOPE
BrandDE MORGEN NEWSPAPER
Product/ServiceTHIS WAS 2020
Category A05. Data Visualisation
Entrant MORTIERBRIGADE Brussels, BELGIUM
Idea Creation MORTIERBRIGADE Brussels, BELGIUM
Production MORTIERBRIGADE Brussels, BELGIUM
Credits
Name Company Position
Michiel Baeten mortierbrigade Copywriter
Frederic Delouvroy mortierbrigade Art Director
Joost / Philippe / Jens Berends / De Ceuster / Mortier mortierbrigade Creative Directors
Pieter Nys mortierbrigade UX Director

Why is this work relevant for Creative Data?

We used existing news data to create a clarifying experience.

Background

2020 was probably the most chaotic year of our lifetime. We worked differently, lived differently and news followed the contradictions of different virologists. As lockdowns forced people to stay at home, media consumption in general was on a rise. Apart from offering huge opportunities, it also risked to be dangerous for Belgian newspaper De Morgen. In times of crises, Belgian people rely heavily on the news channels of VRT, the Belgian public news channel and website that is considered the most neutral and the best source of information. It was therefore crucial that De Morgen increased its top of mind awareness.

Describe the Creative idea / data solution (20% of vote)

De Morgen Newspaper is all about bringing clarity. In the chaotic times of last year, De Morgen had a lot to clarify. They decided to show the beauty of bringing clarity in chaos. Enter: the kaleidoscope. We visualized the idea of bringing clarity in the chaos by creating an online experience that gives visitors an interactive overview of 2020: the most chaotic year of our lives.

Describe the data driven strategy (30% of vote)

We launched a responsive website with 12 interactive kaleidoscopic scenes. One for each month, built with elements representing the most important news items for that month. The user could interact and play around with the kaleidoscopes as well as discover the news articles that are related to every element in the kaleidoscope. In total, over 100 articles were integrated in the artwork on the website.

Describe the creative use of data, or how the data enhanced the creative output (30% of vote)

We created an application to craft the kaleidoscopic scenes. The tool lets us define position, rotation, animations and mouse interactions for each individual element in the scene. The website was built with a Vanilla JS structure combined with WebGL (ThreeJS) for the kaleidoscopes. The general animations and page transitions were built with GSAP & Highway JS.

List the data driven results (20% of vote)

The online yearly overview got over 450.000 page views. 300% more than the yearly overview of 2019. 90% of the website visitors took the time to explore all months. Moreover, our number of paying readers increased by 2,97%. “This experience deserves a cool 92/100” – Awwwards Mobile Excellence Report “Great work that deserves Best Innovation, Best UI and Best UX.” – CSS Design Awards “Great UX design. This deserves to be Site of the day.” – thefwa.com