Interactions Concept
Animated Interactions
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.
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.
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.
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.
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.
A video that showcases a simple user journey throughout a series of pages with most of the possible interactions and transitions.
The client had an example of how their design could visually flow, to present it to Syfy speeding up the validation process.
.png)
