Xavier Riddle & the Secret Museum
Website & Games Suite
Roles
Art Direction
UX/UI Design
Web Design
Interaction Design
Game Design
Project
Xavier Riddle and the Secret Museum was a brand new property about to air on PBS Kids. 9 Story Media Group needed a Website and suite of games that felt like a digital extension of the show where users feel immersed in the property. The end result was a highly engaging site nominated for Best Website — Preschool at the 2021 Kidscreen Awards.
The Game PLan
Setting goals
Before we began, the team identified several high-level objectives for the website:
Introduce users to an entirely new IP in a seamless and engaging way.
Provide easy access to featured content to drive KPIs
Immerse users in the experience, making them feel like they’re part of the show.
Create a backed robust enough for the client to do marketing and seasonal takeovers.
And above all… it had to be fun!
I am one with the Riddle…
I dove head first and immersed myself in the world of Xavier Riddle. At the time, the Xavier team at 9 Story Media Group had completed about half of the first season. I watched every available episode, studied their series bible, reviewed all approved assets, and absorbed everything I could. My goal was to become a Xavier expert.
Getting to Work
Early explorations
To ensure we explored every possible concept for the homepage, multiple layout options were sketched out, all designed to fit seamlessly within the PBS Kids website framework. This allowed us to find the perfect balance between between essential features and the fun stuff.
Mapping out the flow
Drawing from my extensive knowledge of Xavier, I wanted to develop a flowchart that mirrored the series' narrative flow. So, I mapped out interactions and transitions between pages, mirroring the way characters moved through different sections of the show.
Side Mission
Visiting the studio
Before starting work on the site and games, I was fortunate enough to visit the 9 Story offices with my team to kick off this project. I spoke to the Animation Director of the series and picked his brain about the style, tone, and techniques they were using throughout the animation.
Building the bones
I focused on balancing functionality with fun. Working within the PBS Kids framework, ensuring easy navigation while adding interactive elements that captured the spirit of the show. I tested transitions, mapped out key interactions, left room for character voice over and easter egg animations. All while providing our developers with a clear, easy to read blueprint to work from.
Look & Feel
Landing on a style
I wanted the style of the UI to borrow from the art style of the show. So, as inspiration, I looked to the clean, solid colours and occasional gradients with subtle glows that appear throughout the show. Since the age demographic was pretty low I knew we needed the UI to use icons in most case and not rely on the player being able to read.
Final Product
Behind the Curtain
Updating on the fly
The client needed the flexibility to update the website for any upcoming holidays, new seasons & specials, or to promote new game releases. To meet this need, I helped plan, and document a custom tool within their CMS environment that would let them inject imagery into the site and push it live right away, or on a schedule. I collaborated with the team to determine the best approach, documented the feature thoroughly, and provided the client with a clear written document and visual guide to ensure they could easily manage updates on their own.
Creating the Games Suite
Dr. Zoom’s Portal Quest
A fun, action-packed adventure where kids join Xavier, Yadina, and Brad on a thrilling quest in the White Space to find Dr. Zoom. Play through levels and unlock hero powers to use to reach places you couldn’t before. Get ready for a journey full of excitement, challenges, and easter eggs!
Museum Maker
Players run around and fill out museum exhibits with the help of Xavier and his friends. The game blends education and adventure, allowing you to explore history through four rooms filled with heroes from history. We planned for timed-releases and seasonal updates to keep the game feeling fresh all year long.
Story Creator
Jump into 6 different stories featuring famous writers throughout history. Each story puts the player in the driver’s seat by letting them choose how the story unfolds with fun imagery that matches their selections.
Hero Maker
Using the massive library of assets from the show, we created a game where players could build and see themselves as a hero in the Xavier Riddle art style. Once complete, players see themselves added to the Wall of Heroes right next to famous heroes throughout history.
Hidden Heroes
Players dive in and play through the puzzle platformer that challenges them to collect artifacts tied to famous historical heroes. As you collect artifacts, you'll uncover how these heroes changed the world through repeated mantras from the show. With each level completed, you unlock more levels to play.
