Interactive storytelling: Magnus is his head

My roles

UX design
UI design
Concept development
Programming

Skills & methods

Animation
Figma
HTML/CSS/JS

Project summary

This interactive story was developed in 2021 during my time at Kristeligt Dagblad.

’Magnus is his head’ portrays a boy who suffers from severe muscle atrophy. He can’t move but he has a rich inner world. The question is: Is his life worth living?

The goal of the digital story was to visually invite readers into Magnus’ head which the story revolves around.

To accomplish this I designed and created a code-based scroll animation where a photo of Magnus’s head transitions into an illustration which then opens up to unveil his story.

--> Read the story here!

Awards

The story received an “award of excellence” for the use of animation at the Society of News Design competition in 2022.

Process

When I and the rest of the team (journalist & photojournalist) at first visited Magnus he told us, that he draws creatures using an eye-controlled computer. Sometimes he even sees himself as one of these creatures. This became our inspiration for the way, we told the story.

Here are some examples of drawings he had made:

We decided to visually invite readers into Magnus's creative world. At first I had the idea to only use a photo of Magnus's head which would split open when the user scrolls down, but when I created the mockups it was clear that this solution was too bizare. I also created a version with an illustration of a head only, but the effect was too "distant".

Here are some of the early mockups I made:

Our solution was to combine a photo of Magnus's head with an illustration of his head. I worked together with a photojournalist and a illustrator on the concept and designed the final functional prototype.

I user-tested the story to make sure that the readers actually understood the visual concept of the story and that it improved their understanding of the story.

Finally I programmed the story in CSS & JS.