Responses by Henrik & Sofia and MediaMonks.

Background: We developed an interactive guide for the acclaimed Netflix mystery series Dark. The site sees viewers explore the who, what and when of the show in eight languages, filtered by season and episode. Fans were already invested in this beautiful, mind-boggling show, and we wanted to give them a comprehensive tool to untangle a complex time-travel narrative.

The companion site is equal parts comprehensive and comprehensible, helping viewers stay on top of the show. The beautifully animated guide features an ocean of content tailored to fans and casual viewers alike. Henrik & Sofia created the concept, UX and design; Granny developed the content; and MediaMonks crafted the website, animations and sound design.

Design core: We designed the site so fans could follow each character in a linear narrative. Full-page articles describe every major event on the show, and an animated timeline establishes the years when each event takes place. Objects, locations and time eras were also given a narrative. A nifty spoiler filter ensured fans could revisit the site as they make their way through the series.

Graphical elements play a key role. As users explore more episodes throughout the experience, the family tree of protagonists grows in size and complexity. Design elements, including typography, overall mood and kaleidoscopic transitions, are also inspired by the show’s aesthetic. The triquetra symbol featured prominently in the series becomes more apparent as the timelines evolve, while the sound design gives the experience an eerie feel that suits the show’s tonality.

Challenges: Translating a nonlinear narrative that takes place over 165 years—and several worlds—into a linear timeline and adding a spoiler filter on top of that took things to a new level. The writers had their work cut out for them when writing articles summarizing 750 key events in eight languages. The show runners double-checked this enormous amount of content, including two versions of each image (one for mobile and one for desktop) to ensure everything was correct and spoilers weren’t present.

Organizing it all was also a complex task in its own right. We collaborated together with a massive spreadsheet where we organized content that we’ll later implement on the site.

Navigation structure: The navigation begins with selecting which season and episode you’ve reached and would like to learn more about. This selection filters the family tree—the main navigation hub—and content to ensure the user doesn’t see any spoilers. For the real fanatics, there are plenty of Easter eggs to discover, which unlock the more they explore.

Technology: GSAP, MediaMonks’s Vue.js framework, PHP for localized sharing and WebGL.