Freeform TV Shadowhunters
Client: Freeform TV (Format ABC Family)
Agency: Type/Code
Role: UX/UI Design, Design Lead, Oversaw Product Development
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.
Content Ecosystem
The experience of the Shadowhunters online presence from a viewer and fan’s perspective revolves around multiple points of entry.
TV Everywhere allows multi-platform access to content. Authenticated streaming and video-on-demand services allow traditional television providers to directly compete with these competitors and add value to existing television subscriptions in an effort to retain subscribers.
For Shadowhunters, TV Everywhere means that content that is unique to each episode will be surfaced on Freeform’s app before, during and after watching the episode, as well as live on the website, driving traffic to tie-in experiences and websites.
Research & Analysis
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.
In understanding the Platform Ecosystem, the timing and frequency of the content will be important to distribute throughout the series to encourage continued engagement. A flexible framework was created to ensure that all creative executions of story-based content and tie-ins are fresh and enticing to viewers throughout the series.
Delivery Framework
We have created an initial delivery framework to model each type of content to release in parallel with episodes and the time in between.
Core: Base information about the series and non-date specific content.
Daily: News, insights, backstories, release of not specific to episodes.
Episodic: Behind-the-scenes media, references revealed, etc specific to episodes (unlocked after watching episode).
Individual: Specific changes based off the user’s continued use.
Flavor: Social media integration, tie-ins microsites, other forth wall content.
Surprise and Delight: Easter egg styled content for entertainment.
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.
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.
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.