Completed
September 2017

Just
Press

Abstract
Product, branding and platform design

Delivering free entertainment to millions of users everyday.

FIG. 1
Video courtesy of Tubi, Inc.
Tubi
Abstract

Overview

I was brought to Tubi with the ambitious taks of establishing a design culture and growing a design department at an engineering and data driven company; whilst redesigning the entire app ecosystem: iOS, Android, responsive web, tvOS, Roku and HTML5-enabled OTT platforms (Amazon Fire, Samsung TV, Tivo, etc.)

Needless to say, I had my work cut out for me.

Most of my time at Tubi was split between two parallel workflows.
The first half consisted in supporting legacy systems (the clients versions which were already implemented and out on the market at the time I joined the company), while the second half focused on establishing a new design system which would be shared across platforms — all of this while tackling one or more clients redesigns at a time.

Oh, and I also rebranded this thing over a weekend. NBD.

The work shown below is about 14 of what was designed over the course of 16 months by myself, with the partial help of Artur Napierajczyk, who owned Android and non-functional prototyping (After Effects).
This is the portion of work that actually shipped.

Tubi
Design fundamentals

Design Fundamentals

The first step was to define some design building blocks, which would inform the design process.
Traditionally, most design teams are siloed and focus on a single product vertical.
With that context in mind, the design challenge at hand was to establish a unified design language, utilizing a minimum but constant set of rules across all platforms.

Grid & Baseline

Designers know that every layout should be designed around the content that its going to host.
In Tubi's case, the majority of the content is represented by poster tiles, so the grid was optimized around their specific form factor and the interactions which surrounds them.
For each device, I established the optimal size at which a tile should be displayed at, and used that measurement as a guideline to extrapolate the relative grid for that platform.

The exercise proceeded by normalizing the column numbers across all platforms in order to make sure that we would be able to account for modules that were wider than a single column and provide the necessary scalability.

FIG. 2
Responsive column ripartition between resolutions of 320 - 1920+ px. Column grid shown on mobile devices and 10-foot experience.

The baseline was derived from the grid unit.
We chose 4 pt as our grid unit, as its small enough to enable us to round up or down modules that have a fixed aspect ratio to the next grid increment.
From there, we defined our baseline as a multiple of the grid unit (as its good practice to do so) and settled on 8 pt increments.

Typography

A similar approach was taken in defining the type scales used across Tubi.
Product teams usually choose different type ramps for differnt platforms, due to the specific nature of the environment they design for.
What's often overseen is that devices are usually complementary of each other in their use, and therefore they can all adhere to one, more comprehensive type ramp.

Tubi’s type scale is set at 1.25x (4:5, major thirds) and normalized for each type set. This allows us to achieve a consistent type scale, which will work across all platforms and applications. OTT platforms only use type sets between 67-27 pt.
Mobile only uses 22-11 pt type sets, while web uses the full range.

I chose Vaud as our primary typeface. Its an austere san serif, whose proportionate x-height improves legibility at small sizes or on handheld devices.
Its modern look and the abundance of weights (40) make it an exceptional font family, suitable for product UI as well as corporate or marketing materials.

Vaud is a typeface created by Ian Lyam and used under license by Tubi, Inc.

FIG. 3
Examples of typography in use across the product ecosystem.

This typescale creates 8 unique permutations based on size alone, or 11 unique permutations based on size and weight; allowing for enough granularity to be used consistently across the entire ecosystem.
The benefit of this approach is ease of use and implementation: one typescale works across web, mobile and OTT instead of having to support and implement a different typescale for each one of the platforms

This initial exercise set the design foundation which enabled us to start designing a unified product across all platforms.

Tubi
iOS and Android

Mobile Experience

Mobile properties were tackled first, as they were significant drivers of traffic and revenue for the company.

Before tackling the design portion of this exercise, I spent some time breaking down the existing apps into a list of features and interaction patterns, so that they could be examined closely as we were approaching the re-design.

The majority of the user experience exercise consisted in consolidating the to utilize common patterns already defined by the OS.
For most of these interactions alternative UX solutions were proposed and product and engineering weighted the cost as well as the pros and cons of each.

From a visual design point of view, I explored a series of iterations, without limiting myself to the existing feature set. This allowed me to avoid designing myself into a box, and ensure that the desing system would have a certain degree of scalability.

Redesigning the app, at feature parity resulted in a complete rebuild of the iOS app

FIG. 4
A motion prototype showing some of the core interactions of the iOS app.

Launched in August 2017, the Tubi app for iOS maintains a strong 4.5 star rating (with over 2,5k ratings) and is rated in the top 20 apps within the Entertainment category on the App Store.

4.5

I Can't believe that it's free!! ★★★★★ Oct 27 Wishfullthinkin

I'm really enjoying this app and its absolutely free. I also have Netflix, but this one is almost better. No techinical problems, I watch on my iPad or through Chromecast on TV. It has an Awesome selection of movies and I'll probably spend the next few years watching them. You won't be sorry and nothing to lose and everything to gain on this app. What a wonderful surpise. 🎉

YAY! For Tubi Free App ★★★★★ Oct 15 cw2gtc

I've had the Tubi app for a few years. In that time it has greatly improved. Both in form & function. While its still supported by commercials, they've improved the delivery format of commercial so as to be less obtrusive.
Tubi has a very good lineup of shows. All crystal clear, some HD quality. While their bread & butter is newer releases, they are also a decent selection of classic B & W movies as well.
Get your popcorn and remove. Settle in and off ya go with Tubi! 🍿

Tubi
tvOS, Roku and Amazon Fire

10-foot Experience

Over the top boxes are the platform where video services like Tubi need to shine.
Given that the biggest burden of any OTT box is navigation, we built a frictionless experience, where users are always able to one click to play

Given that the OTT spectrum is so broad, we used specific platforms to champion different UX choices, and after learning from them, adopted the same choices on contiguous platforms.
For example, tvOS features an experience that is completely consistent with the navigation paradigm established on the iOS app. The present of the tab bar on both apps, allows users to feel immediately comfortable in either environment as they recognize a familiar component.

FIG. 5
A motion prototype showing some of the core interactions of the tvOS app.

On Roku, we maintained a more familiar pattern, establishing a master / detail relationship between the tile selected and the metadata associated.

The selector is also a component which behaves in a familiar way: it has fixed positioning until the overflow items reach the bottom of the list, at which point it becomes relative.

FIG. 6
A motion prototype showing some of the core interactions of the tvOS app.
Tubi
Online Presence

Responsive Web

Web is probably the largest project we completed at Tubi, given the variety of purposes that the tubi.tv domain serves.

Establishing an enticing first-time experience was one of the KPIs which drove the redesign. The narrative behind the landing page is simple: introduce the main value proposition (Tubi is an alternative streaming service that provides you with free entertainment), then reinforce that statement with two other propositions: a vast catalog and the portability of the service.

FIG. 7
A motion prototype showing some of the core interactions of the iOS app.

We moved from a fly-out model to a self-contained tile approach.
This allowed us to use hover states on web in a more tactful way, whilst keeping a high level of consistency across platforms.

Crime TV

The Wire
TV-MA
cc
(2002– ) · 59 min
Season 1
4
Underbelly
NR
(2008– ) · 60 min
Seasons 2, 3, 4
Criminal Minds
TV-14
cc
(2005– ) · 42 min
Season 2
Scandal
TV-14
cc
(2012– ) · 43 min
Season 1
Add Series to Queue
Bones
TV-MA
(2005– ) · 42 min
Seasons 3, 4
FIG. 8
A working prototype of the tiles we designed for mouse enabled experiences.
FIG. 9
Some of the ancillary screens of the search and browse experiences.

While all of the design framework is complete, some of the ancillary properties (blog, press releases) are still being built by Tubi's internal team.

Tubi
Rebranding Tubi

Elegante

We knew Tubi needed a rebrand if we wanted to establish ourselves as a legitimate business, but there was not a strong drive or understanding of what branding meant internally.
I kicked off the initiative by conducting a workshop around branding fundamentals (mission, vision, brand values, tagline) with the company's stakeholders and worked on the outcome to define actionable brand values and an overall brand strategy.

Experience entertainment.

Tubi's working tagline. It embodies the four brand values which were defined in the workshop: accessible, personal, delightful, reliable.

A large part of the design exercise completed for Tubi was the redesign of the brand.
Elegante is a hybrid between being a design system and a brand book. It basically consolidates all the design thinking generated through the last year or so.

While being mostly a techinical manual, Elegante's main goal is to evangelize a design culture throughout the organization.

FIG. 10
The new Tubi wordmark, designed over a weekend during the cold month of February.
FIG. 11
Excerpts from the Elegante Brand Book.
FIG. 12
Preloading and wordmark reveal animations.