top of page
Screen Shot 2017-04-25 at 3.21.07 PM.png

How to build a video player for a variety of products and scenarios of use?

A scaleable and standardized, yet flexible system  

that unifies the cross-platform experience

transparent-fade-black-gradient-5.png

stage

GLOBO

a video consumption platform

the project

what

A multi-device video player platform meant to be applied on  a variety of digital services on *Globo's portfolio (consisted on many leader brands on the entertainment, news and sports market in Brazil).

* Globo is the biggest media company in Latin America.

why

Globo aimed to provide a more consistent video consumption experience across its different products. At the same time, they also needed to enhance the flexibility of the platform, so it could be easily customized by products according to specific needs. As requirements, the stimulus for binge watch and the responsibility to design a structure in which we would optimize future development & maintenance costs.

how

Through a redesign of the platform. First, restructuring of the video player architecture (improving scaleability and customization flexibility), alongside a new graphic user interface system that offers a consistent experience throughout a range of products and contexts (always having in mind the usability specificities of different device categories). 

goals & needs

      .      

people           

easy to use

      .      

consistent experience

contextual recommendation

business      |    

multi-product platform

systematized flexibility

reduced maintenance costs

      .      

      .      

a thorough analysis of the system

mapping, categorizing and prioritizing features & components 

An effort to map the anatomy of the video player, assessing the most strategic parts to work on according to its systemic functionality.

I

identifying the main categories

media
info

playback
controls

playback
settings

display
platform

product
integration

II

strategic prioritization of categories

focus on video consumption

 .png

III

arranging interface elements & features by category

Elementos detalhadas.png

IV

strategic prioritization of features by categories

media info

playback controls

playback settings

nivel 2 funcionalidades.png

a platform service for many products and contexts

understanding where the video player is distributed in Globo's digital ecosystem

The Player could be inserted in a variety of components, pages and products. It would also interact with several other services as the user account, for example. So, it all needed to be mapped.

CASO 1 - Jornalismo_Telejornal.png
CASO 3 - Esportes_F1.png
CASO 2 - Entretenimento_Novela.png

Lack of consistency

 

The Player presented an unpredictable behavior in variety of contexts, displaying itself in different manners on similar scenarios.

Sistema_proposto_01A.png

A new proposition aiming for consistency throughout the whole ecosystem

new set of rules for:

  • redirecting across products

  • consumption page configuration 

  • insertion on news feed

to simplify chaos

unifying Globo's video consumption experience

A proposal of consistency by adopting only one Video Player for all of Globo's digital products. A platform flexible enough to attend to different scenarios and solid enough to offer systemic efficiency and brand recognition.

a structural challenge

redesigning the player architecture for more flexibility

In order to develop a more dynamic video player for an ecosystem of products, we made a new project to deliver a system faster to install, easier to customize with specific features and faster to evolve.

Captura de Tela 2021-04-19 às 23.09.27.

a new rationale for the positioning of elements

The Video Player screen area was divided in order to group elements according to their specific role on the interface. 

improving usability

a new design for the user interface

A project meant to build a brand feeling and unity on the video consumption platform across devices and products.

00_dektop_nova_UI.png
Player_desktop_Release_05_2017.jpg

studies to find the best image size for thumbs

Several tests were made to find the sweet spot where the image size would represent the best performance mixing great legibility, rendering quality and data size for different devices

Captura de Tela 2021-04-20 às 01.11.58.

low complexity image

medium complexity image

high complexity image

TESTES01.png

expanding to new displays

smart tvs

The interface should work on both 'pointer remote control' or 'focus navigational control'.

TV_V05_N.png

keeping the flow

a dynamic 'next video' format

After the end of a video, users could interact with previews from other content. The goal was to increase video plays and total consumption time per user session.

Mobile_Landscape_iPhone6_Teste1.png
Desktop - stage03.png
Screen Shot 2017-04-25 at 3.21.02 PM.png

globo player keeps on telling stories

with a reach of more than 100 million people 

general info

company

globo

my role

ux / ui designer 

client

globoplay
globo.com
g1
ge
gshow
& others

skills used

information architecture 

interface design

prototyping

next project

© 2023  diego brito

bottom of page