Title | KALEIDOSCOPE |
Brand | DE MORGEN NEWSPAPER |
Product/Service | THIS WAS 2020 |
Category |
C01. Digital & Interactive Design |
Entrant
|
MORTIERBRIGADE Brussels, BELGIUM
|
Idea Creation
|
MORTIERBRIGADE Brussels, BELGIUM
|
Production
|
MORTIERBRIGADE Brussels, BELGIUM
|
Credits
Michiel Baeten |
mortierbrigade |
Copywriter |
Frederic Delouvroy |
mortierbrigade |
Art Director |
Joost / Philippe / Jens Berends / De Ceuster / Mortier |
mortierbrigade |
Creative Directors |
Pieter Nys |
mortierbrigade |
UX Director |
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 (40% 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 execution (40% 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.
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 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