Creating magical interactions for Syfy's show The Magicians


Animated Interactions

What we Delivered:

Interactions Concept

What we brought along:

Animated Interactions

The Briefing

Engaging Navigation

NBCUniversal wanted to create an interactive second-screen experience showcasing a new series on SyFy: The Magicians. We teamed with Unit9 to help them create the navigation experience through animated interactions. The animation not only helped to present the solution to NBCUniversal but it was also key for the development phase. Developers could turn these ideas into lines of code and make them work.

The Gamechanger

Theme-Oriented Interactions

For this project, it was clear that we needed to work on the interactions and transitions in a way that could instantly relate to the theme – magic. We were looking for simple and clear navigation that could transport the users to the series and create the perfect mood to immerse themselves in a magical world.

The Process

Creating a Visual Hierarchy

First of all, we needed to understand user navigation to create all the transitions and interactions. For example, if an element is present throughout the experience, it should work as a guide and a reference for user flow, even if it moves.

Continuous and Fluid Motion

One of the screens we most focused on had a set of cards, each with one of the series’ characters. The animation we created for this section had to be as fluid as possible to create an elegant transition between the cards and show up small details that complemented the character’s profile.

Simple and Effective

The whole interface had a simple, clear and elegant layout, which allowed our animated interactions to stand out and make a bigger impact. The smoke-like transitions and the parallax that we’ve added on the characters' profile page provided a smooth experience and brought the users even closer to the show.

The Deliverable

The Results

What the client got:

A video that showcases a simple user journey throughout a series of pages with most of the possible interactions and transitions.

How it worked out:

The client had an example of how their design could visually flow, to present it to Syfy speeding up the validation process.


Great experiences = happy clients.


Great experiences = happy clients.

More Work

Keep exploring related projects

Digital Communication

Banco Montepio

See Project ArrowSee Project Arrow

VR Animation


See Project ArrowSee Project Arrow
View All Projects