Cartoon Network | Design System (2019)

New website for Cartoon Network

Role: Lead Product Designer

Background

I lead the Product Design Team on projects such a Cartoon Network, TNT and Filmstruck, working with components based on the Atomic Design methodology and also leading the UX of new features within the website, mobile app, and TV app.

Result

We have finished a design system that we can use in several company products, with reusable components. I managed to organize the design team and find the right direction to grow the product towards a more solid direction.


Cartoon Network

The product

Cartoon Nework is a responsive website that presents a curated collection of the games, videos and apps. We can upwards of 250 games to play, both on desktop and mobile. The game content is presented alongside other digital content such as videos, quizzes, competitions and apps.


First things first

Our design files

We use a system that makes it easy for us to find what we need quickly, and for other people to navigate our files too.Each of these folders is a repository on GitHub, which we use for our syncing and versioning. At the top level, we have folders that contain the various platforms and it looks like this:

Inside, they look like this:

We use clear, descriptive names that refer to the part of the app and the flows it contains. This means we can find our files easily using Spotlight, and engineers and product managers can discover them through Spotlight’s search. For example, if I want to find the flow for editing Games, I can search in Spotlight for:

“cn games videos”
“cn videos”
“cn games”


Information Architecture

The problem

I worked closely with PM and stakeholders to create the sitemap and defined everything we need it to cover the site business goals but the timing wasn't enough to hit everything on time.

The solution

Create an MVP with the business and requirements that were needed for launch and get it ready to improve it after v1. It would look like this:


Atomic Design

A component library was created across all platforms using an Atomic Design System that can be assembled together to build any number of applications within Turner.


Design System

Sketch libraries

As part of the process we select which library we want to use so we can start working on the design.

A complete Design System ready to use with atomic design components. When we have to create a new screen for Cartoon Network we start dropping components into the screen.




Design Cards

Problem

Most of the game thumbnails were quickly taken from the home screen of the actual gameplay, as a result, the quality suffered; clutter, poor information hierarchy, no clear hero character and unnecessary call to actions like “play, mute or settings”.

Solution

I worked with the design team in Buenos Aires (Argentina) to achieve better cards in the prominence of hero characters, contrast on a game logo, the contrast of foreground vs background, etc.


Wireframes

We create the prototypes with wireframes with Marvel where the engineers can see with handoff the information necessary to build each page in all the resolutions.


Documentation

Confluence

As well as the design prototypes, we created to help with the build implementation, documentation for content, creative and commercial teams to teach others how to use the platforms that we were building for.

We show the rules for working with some components like the cards. We define the behavior for big and small resolutions and the documentation looks like this:


Interactions

Included small animations in the documentation to see the interaction for the components. They look like this:

And the interaction for the header it's shown like this:


Next: Saluspot