Globoesporte.com / Globo.com · 2020
A minimum viable experiment to highlight live content
Context
Globoesporte.com is the #1 sports website in Brazil, with over 7 million unique users per day. Its reputation as a trusted news source about soccer and other sports has consolidated it as the #1 top-of-mind website for sports news in Brazil.
Business Strategy
Grupo Globo is moving towards a business model that focuses on subscription, capitalizing mostly on video content. In 2020, Globoesporte was going through a transition phase – from a trusted news portal to a complete digital hub for sports.
The challenge
Highlighting Live Content
Highlighting Live Content
Highlighting Live Content
Highlighting Live Content
The live match is Globoesporte's premium moment. However user research showed that most users used the product for a more informational purpose and did not perceive the product as the best place to watch live matches.
When matches are happening simultaneously, the website's homepage acts as an important aggregator for all live content. However, the highlight component was created for news features. It did not emphasize the liveliness of the matches and was not efficient in using imagery to engage users emotionally.
Because of the championships' structures, it's quite common for matches to happen at the same time. In these cases, the website's homepage acts as an important aggregator for live content.
However, the homepage's old highlight component was created for news features. It did not emphasized the liveliness of the matches and was inefficient in using photography to engage users emotionally.
The app and mobile versions were inconsistent with the desktop versions – there was no highlight component. Live matches were displayed in the first positions of a chronological feed but in the same format as other news.
Crafting an iterative experiment
Crafting an iterative experiment
Crafting an iterative experiment
Crafting an iterative experiment
Before completely changing the design solution on the product's most accessed page, the design team created a plan to evaluate the user's response to this new format. I was responsible for designing a responsive modular system that encompassed the headline text and elements, their relationship with the overall component and page structure and how they would be displayed in each match scenario.
The team
Lena Sotto Mayor (UX/UI), Ana Paula Miranda (IA/UX), William Berwanger (UX/UI), Marcela Maués (IA/UX) and Jonatan Zylberstjen (Design intern)
The final solution
Definitions and Applications
Definitions and Applications
Definitions and Applications
Play for video
Play for video
Play for video
Play for video
Nothing says live content like pictures in motion!
Media priorization
Media priorization
Media priorization
Media priorization
Because the content was sensitive to several conditions (availability, user subscription status, geolocation, the match's timeline, etc.), it was necessary to establish a set of rules to define which media would be displayed in each scenario.
Careful image selection
to fit the moment of the match
Careful image selection to fit the moment of the match
Careful image selection to fit the moment of the match
Careful image selection to fit the moment of the match
Straightforward and emotional
Responsive and Multi-platform
Responsive and Multi-platform
Responsive and Multi-platform
Flexibility
Adaptability to the match's timeline
Adaptability to the match's timeline
Adaptability to the match's timeline
Pre-match
Before the match begins, the warm-up
Pre-match
Before the match begins, the warm-up
Post match
Comments, analysis and live interviews
Results