Globo · Globoplay · 2020

Globoplay Highlight

The home's prime component was a monolith. I helped rebuild it into a modular system, then ran the experiment that proved a new format drives engagement and sales.

Role Product Designer, Home squad + Design System Lead
Platforms iOS, Android, Web, TV
20+ Modular variants
+75% CTR
+2.7% Avg. playtime
11% Home-originated sales

Context

Globoplay is Brazil's largest streaming product. In 2020 it was turning into an all-in-one platform: the video-on-demand catalog, simulcast of 17 live TV channels, live news and sports, and dozens of live cameras for the Big Brother Brasil reality show. The pandemic pushed streaming and cord-cutting to a peak, and Globoplay carried the group's largest investment and revenue expectations for the year.

At the top of the home sat the Premium Highlight, the most contested space in the product. It was first in impressions, first in click-through rate, and the origin of more than half the clicks on the home page. Every channel director wanted their content there.

A monolith that couldn't scale

Fast growth had multiplied squads and designers, and the product had drifted into inconsistency across iOS, Android, and web. The Highlight itself was a single block of code with business rules nested inside it. The new plan asked it to behave as many different things, each with different actions for subscribers and free users. The old structure couldn't carry that without breaking consistency.

The home: a Premium Highlight on top, followed by rails. Each component was one large block of code with business rules nested in.

Re-founding the Playkit

I led the first effort to compile Globoplay's guidelines into a single source of truth and rebuild its components as a real design system, the Playkit.

I started with the foundations: a hierarchy of design tokens where each variable links to the next. A single decision, like the primary color, then propagates through every component.

Design token hierarchy. One variable links to the next, so design decisions are mirrored in code.

Then I rebuilt the home's components with atomic design, composing larger components from smaller ones. The key move was turning components into shells: visual elements with no business logic inside. A component simply declares what kind of asset it expects, and each team configures its own business rules in a separate layer against the documented component. UI and business rules stopped being tangled.

An agnostic visual component, ready to receive parameters. The backend layer fills it with data.
Component documentation: use cases for the 'Actions' molecule, with primary and secondary buttons.

On that foundation, the variant explosion became manageable.

Highlights
Base: Program
Variants created: Live video, Simulcast TV, Channel, Category, Promotional
Rails
Base: Poster, Thumb
Variants created: Live Thumb, Channel Thumb, Category
Updating the shared library in Figma so every team builds from the same source.

From system to experiment

The modular foundation changed what was possible. Instead of editing a monolith, we could try new formats for the Highlight quickly and safely.

We had noticed that users barely scrolled the home. Their clicks concentrated on that first component.

Bringing more content into the prime area could drive content discovery and lift engagement.

Hypothesis

Research under a deadline

There was no time for a usability test before the new plan launched, so we did two things. We benchmarked how other streaming products surfaced content on their home, and none of them used a carousel there, which made it a bold bet. And we leaned on what they already knew about carousels from e-commerce and news, using published Nielsen Norman Group research to set our guidelines.

Designing the Carousel Highlight

We bet on interactions people already knew from social media, close to the model Instagram popularized, and kept the part of the Highlight that worked: full-bleed media filling the background. The change was deliberately minimal, which also protected the launch timeline.

Consistency across platforms did not mean making everything identical. It meant having a reason for every difference. On web we used hover. On TV, where the remote drives bidirectional navigation, the carousel switches automatically until the user moves focus to the controls, then hands control back to them.

The carousel interaction, built on a familiar social-media model.
Every interaction documented so engineers could implement the design.
Smart TV prototype: automatic switching hands control back to the user after the first interaction.

The experiment

A/B test · 50/50 · Aug 2 – Sep 2, 2020

The cleanest way to test a component variation was an A/B test. Half the base saw the conventional Premium Highlight, half saw the Carousel, with the standard Highlight kept as a fallback so nothing could break the page. With millions of monthly users, one month was enough to reach significance.

Results

The impressions surprised us. Carousel research usually warns that content past the first slide gets buried, but most users were reaching the third slide.

Impressions held up across slides on every platform, beyond what carousel research predicted.

+75%

CTR

+2.7%

Avg. playtime

+5%

Titles per user

The CTR lift was expected, since the carousel offered three clickable items against one in the control. The lift that mattered was in playtime and in the number of titles each user watched, both part of the engagement index.

More content in the prime area led to discovery, and users engaged more. The hypothesis held.

Result

From engagement to revenue

Because the Highlight was now componentized, we could ship a new variant aimed at sales without rebuilding anything. We launched it with the Disney+ bundle in November 2020.

The Sales Highlight variant, launched with the Disney+ bundle in November 2020.

15.8k

Sales in first month

11%

Of home-originated sales

+21%

Vs. previous month

The year in context

2020 was Globoplay's strongest year, and it became the most-watched streaming service in Brazil. The company numbers below reflect the work of every team, well beyond this project. I include them as context, not as my result.

Globoplay full-year results · company-wide, all teams

+145%

Subscribers

+336%

TV series playtime

+403%

Movies playtime

Next case

Real Estate Transactions enabled by Web3

Netspaces · 2022–25
Soon