TNT Go | Design System (2019)

TNT's new website

Role: Lead Product Designer

Background

I lead the Product Design for 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.


TNT Go

The product

TNT is a responsive website that presents a curated collection movies and series. We can upwards of 250 games to play, both on desktop and mobile. They also have a live tv shows like TNT Storts and other channels.


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:

“tnt games videos”
“tnt videos”
“tnt games”


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.




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.

We created a library with responsive components ready to use in website and mobile apps and tablets.


Next: FilmStruck