shs-devices-thumbnail-v2.jpg

Freeform TV Shadowhunters

Client: Freeform TV (Format ABC Family)
Agency: Type/Code
Role: UX/UI Design, Design Lead, Oversaw Product Development

Background & Task

Background & Task

Shadowhunters, a Freeform TV series based on the popular teen novel The Mortal Instruments by Cassandra Clare. Before the show aired, Freeform came to us to create an experience for viewers and fans to continuously engage with Shadowhunters as part of Freeform’s digital marketing plan via TV Everywhere App.

Research

Research

The discovery process kicked off with a thorough analysis of other media property interactives. These precedents highlighted an effective engagement tool—breaking the fourth wall to invite users and fans into the Shadowhunter’s universe.

Execution: Start a conversation with The Shadow Tarot

Execution: Start a conversation with The Shadow Tarot

Inspired directly from the show’s plot—where protagonist Clary Fray retrieves a hidden weapon from a deck of magical tarot cards. We received a set of beautiful tarot drawings from Freeform, and brought them to life on our digital platform. The interactive cards encourage Shadowhunters fans to have their fortune read (just like Shadowhunters’ beloved characters) and share their results on social media.

DSY.SH.IA.tarot.ia.jpg

Execution: A continuously living framework—Map The Shadows

Breaking the fourth wall: Shadowhunters map that allowed users to explore content geographically by diving into locations that characters in the show frequented—as if they were exploring a real-time map of the Shadowhunter’s world dropped squarely on top of New York City.

Throughout the series, subsets of locations are visited by each of the show's core type. For example, shadowhunters attend the Institute, vampires like to hang out at the Dumort Hotel, and werewolves hang out at the Jade Wolf Chinese food restaurant. As users dive into each location, they can see both content that’s related to that location and the species that you might find there. As characters explore these portals, there are occasionally opportunities to pull back the curtain and see more behind the scenes content.

DSY.SH.IA.map.jpg

Development

My role extended to translating the product needs and working in the QA process to ensure the fine details of the execution reflected in the finished product — a.k.a working closely with Type/Code’s developers to build the product.