FilmStruck | Design System (2018)

Calling all
film lovers

Role: Lead Product Designer

Background

I led the Product Design for 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. I created user journeys, new features and new design UI working close with Marketing Team, experts in independent cinema and stakeholders.

Result

We 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. The Product was release on the web, mobile, tablet and TV devices. Unfortunately, FilmStruck was discontinued on November 2018.


FilmStruck

The product

FilmStruck was a film streaming service from Turner Classic Movies which catered to cinephiles and focused on rare, classic, foreign, arthouse, and independent cinema. It launched in November 2016 and succeeded Hulu as the exclusive online streaming home of The Criterion Collection.

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:

“FilmStruck Featured Movies”
“FilmStruck Settings”
“FilmStruck Curzon IOS”


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 continuously tested our designs to validate our ideas with users in-house. We tested early on in the process, this always helped us stay on track and make sure that the final product was in line with our user's expectations


Landing Page

I worked closely with the Marketing team in creating a few variations for the landing marketing landing page. We used the the new components and the new design system for it.


Bonus content

One of the ways to create engagement with our users was creating a bonus content exclusive for FilmStruck. Our film experts created quality content for the movies, and the following screen is one example of how one of them looks like.


Components

We created a complete style guide in order to share with third parties and internally so we were aligned.

These are the buttons that we created.

The elements for forms look like this.


Next: Liquid Healthcare