SyFy: The Magicians

NBCUniversal reached out to UNIT9 to create an interactive second screen experience showcasing a new series on SyFy: The Magicians. The series is based on a trilogy by Lev Grossman and follows the adventures of a group of young magicians and their journey at Brakebills University for Magical Pedagogy. The website aims to provide fans with a deeper understanding of what the characters and magic universe of Brakebills is like, unlocking special cult content every time an episode airs.

The website has three main sections – magic lessons, student profiles and Brakebills. Fans of “The Magicians” series can follow Quentin, Alice and Julia’s progress in the series. They can find out more about the Brakebills University history and, ultimately, become a magician by taking magic lessons every week.

Brakebills University for Magical Pedagogy

We worked closely with SyFy to create an accurate depiction of the School of Magic, which will be the main setting for the first season of “The Magicians” series. Users take an admission exam answering difficult question such as “Select the type of magic most prominently used in the Napoleonic Wars”. Only a handful of those invited actually pass the exam, but those who do join the ranks of the most elite magical institutions.

Over the next 13 weeks, users will learn to hone, harness, and build upon their particular magical talents. “At the end of the day, magic is far more than how much power you have, or how many spells you know. Magic is inextricably tied to who you are.” – users are then invited to explore the Brakebills universe through the site.

It is one thing to know about Magic but it is another thing to be a magician. Not everyone who can master spells can become a magician, and not all magicians are good – this is something users can find out by reading about their favourite (or least favourite) characters in the show. Their profiles will be updated at the same time as the story progresses in the series, so users can come back to this section and discover what has changed in the characters’ stories.

The Magic Lessons

Based on the scripts and preview clips from “The Magicians” series we were provided with from SyFy, we were challenged to think of a lesson for every episode. We had to understand the episode as a whole and then come up with an idea that will illustrate the main idea of the episodes – this may have resulted in a quiz or a simple game.

As most magical worlds, students have unique skills that make them specialize in different magical disciplines – alchemy, healing, botany, psychic magic. Before getting to the exciting parts though, users must first learn how to cast a spell – the first lesson at Brakebills.

The “Magic Lessons” part of the website features 13 different lessons, most of them yet to be unlocked. Users can return to the site after each episode of “The Magicians” is aired on SyFy and take a different lesson, related to the episode they have just watched.

For example – in lesson 1, users have to follow the instruction and learn the complicated hand gestures that come with complicated spells. At the end, they will have learned basic spell casting.

The following lessons include determining your discipline, participating in a tournament of Welters or taking your midterm exam. At the end of the series, users will be able to say that they graduated from a highly acclaimed Magical University and then start doing some magic!

Art Direction

“The Magicians” is a fully responsive website that works magically on mobile as well. We worked closely with SyFy to define the look and feel of Brakebills, as this would be our main reference for the website. Certain elements that were not in the series at all had to be created, to give the project a more credible look. So a lot of the content was especially created for the website, which was a lot of fun for us!

We built concepts around the content we were provided with from SyFy – scripts, hundreds of photo and clips from the series. We wanted to create a website that feels more informative than game-like, but still has plenty of challenges and content to be discovered.

Users have to complete 13 magical lessons, unlocked as soon as an episode airs. This ensures that our “Magicians” website has plenty of new content to be unlocked every week and users are enticed to come back and learn more.

The lessons are actually games that play on all devices. They also adapt depending on what device you are using – while on desktop you may be asked to draw a pattern, on mobile you might have to swipe left and right to complete the lesson.

Technology

The challenge on the technological side was building standalone games for each of the 13 lessons. Each game requires different tech – AngularJS, Coffescript, SASS, standalone Javascript objects, HTML5 video, Canvas, WebGL, CSS3 2D and 3D animations. In the end, the games were included in the main project build.

The biggest challenge was creating a custom way to release content beyond classical CMS. The code, copy and assets have to be released at the same time as an episode is aired.