Globoplay

Globoplay

Episode Program Guide: Designing a multiplatform system for content discovery

Episode Program Guide:

Episode Program Guide: Designing a multiplatform content discoverability system

2019 • Globo.com • Interaction and Visual Design

2018 • Globo.com • Interaction and Visual Design

Context

Globoplay is an online video streaming product, created and developed by Grupo Globo. From famous Brazilian novelas to Hollywood movies, Globoplay is an entertainment hub for the whole family. Since its launch in 2015, it has grown to reach over 67 million unique users per year. It now expands over web browsers, Android, iOS, Smart TVs, Android and Apple TVs.

Business Strategy

Grupo Globo is moving towards a continuous business model focused in subscription. As the company's only video streaming service, Globoplay is a key player in this strategical change.

As a freemium product, Globoplay attracted a lot of engagement from free users but offered limited benefits for subscribers. It was necessary to devise new ways to enhance the products appeal for subscribers and expand its user base.   

The challenge

Organization, Discoverability and Consumption

Adding the live stream of cable TV channels exclusively for digital subscribers was the chosen strategy to make the subscription more appealing. Translating this strategical change to the product's experience was necessary to guide the user through this process.

With the addition of new TV channels and programs, two cases became more pressing for users watching the live stream:

• Choosing what and when to watch
• Discovering new content

Given these scenarios, we had the hypothesis that a Program Guide was a reasonable environment to start addressing theses demands.

The solution

Understanding the Problem

The solution had to be adaptable to multiple conditions:

EPG-DIagram1

In order to achieve the strategic goals and to meet the users expectations for each job to be done, the solution had to deliver different layers of information density.

EPG-Diagram2

01   What is on now? When will this program be on? How long until this program ends?

02   What is this program about? When will it air again? Is it age appropriate?

03   Is this program exclusive for subscribers? Can I watch this program now or do I need to wait until it airs?Can I watch what has already aired?

Competitive Analysis

Competitive Analysis

Analysing similar contexts and solutions established the common patterns and provided visual and interactive vocabulary to start drafting solutions.

Analysing similar contexts and solutions gave me the visual and interactive vocabulary to start drafting solutions based on the mapped problem.

Exploration

Exploration

Exploration

Due to the solution's multiplatform nature, I decided to start creating alternatives for the TV application, since the navigation model with the remote control presented the biggest limitations.

Definitions and Applications

Thumbnails for live content to allow quick channel browsing

Thumbnails for live content to allow quick channel browsing

Thumbnails for live content to allow quick channel browsing

EPG-live-thumbs

Discoverability and more information upon selection

On click, a pop-up window appeared with the available actions

On click, a pop-up window appeared with the available actions

On click, a pop-up window appeared with the available actions

If the content was exclusively for subscribers, the pop-up window would provide a shortcut for login or subscription

If the content was exclusively for subscribers, the pop-up window would provide a shortcut for login or subscription

If the content was exclusively for subscribers, the pop-up window would provide a shortcut for login or subscription

EPG + Upsell

Consistent,

Consistent,

but not identical

but not identical

The multi-platform applications of the final design respected each platform's navigation model and capabilities

Using principles from Gestalt, I was able to create a line highlighting the current time without actually including a new element in the layout

Using principles from Gestalt, I was able to highlight the current time without actually including a new element in the layout

Using principles from Gestalt, I was able to highlight the current time without actually including a new element in the layout

Interaction details for the mobile version

Adapting to a single channel context

Adapting to a single channel context

Because this solution was part of a system that would be available for other video products, it included a single channel application.

For a single channel on mobile, browsing through a horizontal timeline required a lot of effort from the user and did not optimize content viewability per scroll.

To solve these issues, I designed a vertical timeline that incorporated the same design patterns as the other applications of the system.


Because this solution was part of a system that would be available for other video products, it included a single channel application.

For a single channel on mobile, browsing through a horizontal timeline required a lot of effort from the user and did not optimize content viewability per scroll.

To solve these issues, I designed a vertical timeline that incorporated the same design patterns as the other applications of the system.


In a single channel context, I adjusted the horizontal navigation for the desktop versions. By removing one step to showcase more information about the content, I was able to provide a more straightforward experience.

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!