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 1⁄4 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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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.
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.
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.
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.
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.