eko: Wizard School Dropout Interactive Series
Wizard School Dropout is an award-winning twelve episode interactive show made for the eko platform. Part live-action television, part choose your adventure, and part videogame, I worked to gamify cinematic video content to keep viewers active and engaged.
MY ROLE:
Client Partner, Strategy, Lead UX Designer, Art Director
I was involved in every step of the process since the start of conceptual development. I storyboarded with the writers, designed gameplay mechanics, developed shot recommendations, and worked with the post-production house on visual effects. I then developed a visual and UX library whilst managing a team of in-house motion and visual designers. I also hosted a number of user-testing sessions with eko both pre and post launch and worked to adjust the experience based on testing findings.
Designed at Bluecadet for eko.
The Magic of Interactive Storytelling
Wizard School Dropout interactive show with gameplay that centers on magic spells cast by rapid swirling, tapping, tracing, and other simple mechanics. Spells fail or succeed, changing the storyline, based on the user’s actions. Each viewer’s interactions are tracked across twelve episodes to show progress, narrative callbacks, and accomplishments. How the show progresses along the 598,617 possible storylines depends not just on the choices they make, but also on how well they play.
Gameplay
I designed the gameplay mechanics and worked closely with the Wizard School Dropout production team to overlay them onto the live-action scenes. Unlike traditional game development, we had to sync the gameplay, associated animations, and UI displays with actors’ movements and the video timeline of each scene.
I also introduced the idea of progressively more complex magic gameplay in the series. As the story unfolds, players encounter new challenges like harvesting multiple mana circles and throwing mana balls at specific targets. These additions aim to engage users and provide diverse experiences as they advance in the series. We had to do a lot of pre and post launch user testing in order to really dial in on the difficulty of gameplay.
Prototype and Test… Early and Often
Sharing our early prototypes with the rest of eko’s team was critical in learning how best to support the show’s complex branching storylines, provide a consistent experience on multiple platforms, and optimize performance on mobile.
We also conducted some initial user testing with these earlier prototypes, making sure we could gauge how users felt about general gameplay and storylines before committing too much to our interactions and story-arcs. A number of positive changes were made after these initial user tests, including a few gameplay tweaks and the addition of “midtros”— pieces of animation and narration placed in episode breaks to provide gameplay tips and explain certain show lore.
UI Zoning: Shot recommendations for the director
Effect and UI layering diagram
Help Andy make some rent— 3 strikes and you’re out!
Fog, Zap, Orb-Throw, Rune-Tracing magic
Testing assumptions: Our initial tech prototype vs the final finished interactive
A Unique Kind of Design and Development
One of the greater challenges of the show was seamlessly integrating multiple technologies and tools together (ie We used React for most of the UI, Pixi for more advanced visual effects and graphics, post-house for other effects, etc.) to create a unified product. Tackling this challenge led to a one-of-a-kind design and development approach, marrying elements of web development, game design, film production, and post-production. As the Design Lead, I had the crucial task of comprehending the strengths and constraints of each framework to build a unified design system.
A Cohesive Design System
I created a flexible design system that spoke to the vibrancy and magic of the show. I spent time developing a color system that would easily identify the five different types of elemental magic. We were also tasked to design our own custom emojis which allowed me to get back to my illustration roots.
Illustrations for the show
Color logic + palette
Despite not having a ton of user drop-off even with ‘failed’ mini-game missions, we decided to continue tweaking game difficulty post-launch which resulted in easier gameplay and more total users getting to the last choice
Post-Launch Learnings + Tweaks
In the realm of interactive media, the conclusion of a show need not mark its finality. Eko's platform operates akin to a video game, affording us the ongoing opportunity to refine and enhance the user experience. In preparation for the show's launch, I worked together with the eko team to prioritize and design the development of comprehensive data dashboards. These tools enabled us to look at collected data immediately post-launch, facilitating the identification and mitigation of user pain points. Continuous optimization was integral to our commitment to delivering an ever-improving interactive entertainment experience.
TEAM:
Executive Creative Director: Brett Renfer, Rosalind Paradis
Producer: Katie Lannigan, Jay Chen
Lead UX Designer: Janet Lu
Art Director: Janet Lu
Designer: Janet Lu, Emily Lin
Motion Designer: Wenchi Huang
Tech Director: Benjamin Bojko
Developers: Nick Bartzokas, Jihyun LeeAWARDS:
Telly Award for Scripted Webseries
Telly Award for Interactive Video
FWA of the Day
Awwwards Honorable Mention