Cartoon Network | Design System (2019)

Cartoon Network's website

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. In my time in Warner Media, I worked closely with other designers, developers located in Argentina, PMs and stakeholders.

Result

I made major improvements in usability and design and also a more effective alternative product. Many aspects of the designs and flows were not right based on the user research created; the design was too complicated for a child and we work closely with PM and users making sure the product is being delivered to its best. We worked the user flow and establishing design rules we improved the user experience.


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 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