Cartoon Network Arcade - Connecting TV and Play Through Interactive Collectibles

Company: WarnerMedia
Project Timeline: 2017–2023
Teams: Design (3 Product Designers, 1 Motion Designer), Product, Games Producers and Creators, On-Air Marketing, User Research, Developers, Editorial, Brand, Legal
Status: App was live from 2019–2023 (My work was for both the Initial Launch + Feature Expansions)
My Role: Product Designer responsible for UX, visual design, and art direction across key areas of the app.

Project Overview

Cartoon Network Arcade was designed to extend TV storytelling into an interactive mobile platform.

The app rewarded viewers for watching episodes by unlocking characters, collectibles, and mini-games tied to specific shows — creating a new engagement loop between broadcast programming and mobile play.

As a product designer on the team, I helped shape the product’s collectible ecosystem, visual system, and post-launch feature expansions that allowed the experience to grow over time.

The Challenge

Cartoon Network wanted to deepen viewer engagement by connecting on-air storytelling with interactive mobile gameplay.

The goal was to create a digital experience that rewarded kids for watching shows while encouraging them to explore and play within the Cartoon Network universe.

Internally we referred to the product as a “hub” app — a central place where fans could interact with characters and stories beyond the TV screen.

A key challenge was synchronizing broadcast and digital moments. During TV episodes, new collectible figures were teased on-air and revealed live in the app, meaning the digital experience needed to align seamlessly with broadcast programming.

Goals

• Connect live programming with interactive collecting
• Create a clear, safe, and rewarding experience for younger users
• Build scalable systems for continuous content releases

My Role

Product Designer responsible for UX, visual design, and art direction across key areas of the app.

I joined the project during the early concept phase and contributed through launch and several feature expansions, helping shape the experience across its full lifecycle.

I led design for:

• The collectible figure and island ecosystem powering the app’s engagement loop
• The visual system and art direction for characters, environments, and collectibles
• Design sprints that defined the player progress hub and mini-game expansion
• UI frameworks and interaction references used by internal and external game developers

Early concept ideas from our design team

More early concept ideas from our design team

One of my first flows for the figure section (how would they look in different views, etc.)

Another sketch for how figures could work. The user could have a 'squad' of figures and even decorate their rooms.

The user could 'play' with their chosen squad figures in our games and level them on.

An example quick sketch of how you could send your figures on missions/jobs and doing so could grant the user games.

Designing the Collectible Ecosystem

Figures & Islands: Creating the World of Collectibles

One of my primary responsibilities was designing the collectible ecosystem that powered player motivation and discovery.

Each island represented a Cartoon Network show, while collectible figures represented characters from that universe (Ben 10, Gumball, Adventure Time, and others).

To establish this system, I:

• Defined the visual language for figures and environments
• Designed both the “undiscovered” placeholder states and the fully revealed collectible states
• Created template systems for islands and figures that allowed freelance illustrators to produce new assets quickly while maintaining consistency
• Art-directed illustrators post-handoff to ensure each new asset aligned with the established visual style

This system allowed the game world to expand from a handful of islands at launch to a continuously growing library of collectibles.

My early sketches for figure animation concepts

Final Figure Displays - Unfound and Found states

Page from Figure Creation Guidelines I worked on for our freelancers - How to draw the wireframe states

Early sketches for figure islands (surprisingly close to how it ended up looking)

Early artwork to display figure island visuals

Final states for island. Undiscovered and Discovered

Page from Island Design Guide I worked on for our freelancers

Designing the Collectible Ecosystem:

Key Art, Branding, and Promotion

In addition to in-product design, I helped shape the app’s outward-facing visuals in collaboration with our digital–on-air liaison.

My contributions included:

• Concepting visual directions for app key art and promotional imagery
• Contributing to app icon design and App Store presentation
• Designing marketing screenshots and cross-promotional graphics

During new show premieres, Cartoon Network aired promos teasing the day’s collectible figure — and the app revealed those figures in real time, linking the excitement of broadcast with gameplay.

Final app icon and showcasing how we could use it alongside character art for special events (kids love character art!)

Chosen sketch and the outcome from working with an illustrator that could accurately draw characters

I also created a more pattern-based key art to use in places where the character-based one wouldn't work

Worked with our writers and marketing team to decide on our launch app grabs for the app stores

Example PSD we'd share with our On-Air team for Promos

Feature Expansions

Player Hub & Mini Games

After launch, I led design for the “You” section, a personal hub where players could:

• Track progress and achievements
• View upcoming rewards
• Play mini-games to earn in-game currency and exclusive figures

Before defining these features, I organized and facilitated cross-team design sprints involving designers, engineers, producers, researchers, and marketing partners.

These sessions explored:

• Player mission systems
• Progression and reward mechanics
• Improved onboarding for first-time users

The outcomes of these workshops helped define the structure of the player hub and guided the next phase of the product.

Once direction was set, I designed the UI and visual frameworks for these new features and created templates for the games team to share with external developers.

These templates standardized UI hierarchy and reward visuals so every mini-game felt cohesive within the app.

Following implementation, I art-directed integrations across new releases to ensure visual consistency and alignment with the Cartoon Network Arcade design system.

Many of these updates were timed alongside new TV episodes, reinforcing the connection between broadcast storytelling and in-app gameplay.

Image from the design sprints (that's me on the right!)

I drew inspiration from Google's design sprints to create my own mini version to run with my teams

Team flows from the design sprint for user progression

Sketches and more early concepting for game elements

Final views for the game homepage, game pages and the you section of the app

A page from the graphics guide I created for our games team to share with our game creators for final graphic exports

Interaction and Feedback

Interaction design was a close collaboration between product design and motion.

I worked with our motion designer to shape how collectible reveals, transitions, and feedback animations felt throughout the app.

I created lightweight motion prototypes to explore timing and interaction behavior before final animation production.

These prototypes helped the team evaluate interaction concepts early and provided references for final animation production.

Together we focused on:

• Smooth transitions between collecting, playing, and rewarding
• Motion that clarified hierarchy and guided user attention
• Micro-interactions that celebrated success without overwhelming younger users

Animation on how the figures would pop in

Animation on how users would collect coins in the app

Showcasing how the user could browse and scroll through different games

Key Takeaways

System thinking meets storytelling: Design templates allowed the world to grow while staying consistent.
Art direction and collaboration: Partnering with illustrators and guiding style ensured every update felt brand-new yet familiar.
Cross-team alignment: Working through our digital–on-air liaison ensured visuals and timing aligned perfectly across platforms.

Final Reflection

Cartoon Network Arcade was an incredible blend of product design, art direction, and storytelling.

From designing the first collectible systems to creating frameworks that powered years of new content, the goal was to build an experience that felt alive — where TV, play, and creativity came together in a seamless world.

THIS CASE STUDY REPRESENTS DESIGN COMPLETED DURING MY TIME AT WARNER MEDIA.
ALL INFORMATION SHOWN HAS BEEN ADAPTED AND GENERALIZED TO PROTECT CONFIDENTIAL DETAILS AND INTELLECTUAL PROPERTY.