Odd Squad Website

Clients
Fred Rogers Productions
PBS Kids
Team
Sinking Ship Interactive
Peth.io
Roles
Strategy, Creative Direction, UI/UEX, Design
Launched
2016-2021
Created as a mini-site for PBSkids.org, this site was anything but small. The concept was to create an operating system (OSos) that Odd Squad Agents would use as part of the training process. As such, the games on the site were presented as "simulation cases", where the user would play as an avatar of themselves. Additional activities on the site included lists of Agents and Villains, a Gadget Lab where users could interact with an assortment of Odd Squad gadgets, and a Hall of Doors, each of which opened to an odd activity or game. One of the most popular was an activity called the Ball Pit, where players could scroll endlessly through the depths, exploring the world below OS Headquarters.

Once a user became an Agent, they were able to personalize the website with their own skins, as well as earn virtual awards by completing missions throughout the site.

Seasons
1 & 2

Homepage skin: Waffles!

Homepage skin: Ball Pit

Homepage skin: Time to mow the lawn...

<

Homepage skin: Popcorn time!

Games page showing modular design for individual game badges. The hexagonal grid allowed for game badges to be moved around for promotions.

Odd Squad Gadget Lab: Where users could explore 3D rotations of each OS gadget and view its specs.

Hall of Doors

More doors. There were 11 in total with plans for more.

The endless ball pit game. A counter tracked how deep the player went. Within the first month, fans had scrolled the equivalent of two trips to the moon and back!

Oddstagram: An "unfiltered" look behind the scenes at Agent life.

Agent Ohlm's Pots & Pans game. He loved a good cookie sheet.

Mini-site for Odd Squad's favourite band: Soundcheck.

Oddtube: A weekly vlog filled with integrated UGC activities for fans.

TEAM
Gavin Friesen - UI/UEX Designer
Andrew Ebert - 2D Artist/Animator
Leo Kouvaris - 2D Artist/Animator
John Parker - Front-end Developer
Drew Eastmond - Developer
Ronald Ruslim - Project Manager
Mark Cautillo - Technical Director
Dave Peth (Peth.io) - Producer

Season 3

For Season 3, Odd Squad the series was rebranded Odd Squad Mobile Unit (OSMU). Whereas Seasons 1 & 2 saw the Agents fight oddness in their local community, OSMU had the Agents travel the world in a super high-tech van. As the new HQ for the Mobile Unit, the interface of the van itself became the foundation for the design of the website's UI.

Season 3 homepage with Van interface UI.

Games page.

Video player.

Season 3 brought a second season of OddTube with a new host: Agent Orla.

TEAM
Gavin Friesen - UI/UEX Designer
Andrew Ebert - 2D Artist/Animator
Drew Eastmond - Developer
Ronald Ruslim - Project Manager
Mark Cautillo - Technical Director
Dave Peth (Peth.io) - Producer
Open to onsite work in the Greater Toronto Area and remote work within N. America.
gfriesen@gmail.com
Home
Burlington, ON Canada
gfriesen@gmail.com
quick links
© 2022 Gavin Friesen. All projects copyright their respective owners.