In 2016 I worked at Globo, the largest media group company in Latin America, and my product was GloboEsporte, the #1 sports website in Latin America. We were responsible for the web experience of the Olympic Games in Brazil. Our business goal, in a general view, was delivering the most complete online coverage, with more data and live broadcasts. In numbers, the goal was an increase of one-third in the average of visits per day during the games.
The Globo Group had exclusive rights coverage, and the project would leave a legacy of structured data for the products. On the other hand, it was a partnership among 3 group companies, the experience had to be delivered across 4 different brands, and there was an external data provider, which would provide all the data through external pages, not through APIs – we had to use their front-end solution.
In summary, we had to deliver a smooth experience across the different products, an integrated plan with the brand’s communication, customization of the external pages, and fluid navigation across the different environments. Plus we had a very straight schedule; any delay could be vital for the project.
Understanding the audience
It is hard to find the user goals related to this kind of sports event because their consuming behavior is not regular, and technology and habits change a lot between one event and the next one. We started analyzing the most visited pages of the last big sports events we covered. Focusing on the top of the list, we perceived a pattern: four specific contents were always among the largest audiences.
We cross-referenced that analysis with what we collected from user interviews we did in the previous months. We identified a lot of user needs connected to each other:
- Being aware of the highlights;
- Following the changes in the Medal Board;
- Checking the event schedule;
- Checking match scores and results;
- Knowing what is happening right now at the Games;
- Following and watching Brazilian athletes;
- Following the Games on any device;
- Following matches and competitions anywhere.
As an insight, we thought we had to ensure the user would be impacted by the live feeling at any point in the ecosystem.
Getting deep into the problem
Focusing on the challenge, there were different products, different brands, external pages, different navigation structures. About the external pages, we could customize the CSS by applying our visual patterns. But there were various technical limitations for that customization: the third-party pages had a different structure in their mobile and desktop versions that we couldn't change.
From the business goals and user goals, we set up the main navigation flows from the most visited pages. Sadly we could not connect with GloboPlay, Globo's streaming service, because of a different product strategy. So it was agreed that flow would be primarily driven from Globo's portal page.
To bring consistency and reinforce navigation through those different contents, we proposed two components. The first one was the Olympic Bar. Based on a former component for breaking news, it had a privileged position, it could be implemented in the external pages, and it reinforced the Olympic branding. The other component was the Olympic Card. Like the bar, it used the same product card structure, and we planned it to display the Medal Board, the Olympic Schedule, and Coming Next highlights.
Summing up: mobile-first and responsive components, consistent in code, interaction, and branding. Plus, they could bring the live feeling, different from the highlights across the pages. With a low prototype, we tested the navigation through the websites, and we validated the flows and findability of the most important content.
After that validation, I worked on the different coverage scenarios for the Olympic Card. Since the Games had a very clear schedule, we could implement all those versions and set them for automatic displaying. A nice detail: every event with a Brazilian athlete participating there was the Brazilian flag next to the event name.
A huge setback
Until then, everything was going well. We were on schedule, having weekly meetings with stakeholders, and with the external provider. However, a few weeks before the Games, the external provider warned us they would not be able to deliver the live game pages. Considering our live strategy, that was the core of the project.
We'd already had a complete live coverage platform inside GloboEsporte called “Tempo Real”, but it was exclusive for football matches. We had to think about plan B.
As Globo had a news coverage platform, I suggested we build a scoreboard widget. With that, we could cover other sports matches by sticking the widget inside that news coverage solution. I worked with 2 engineers on a proof of concept to validate the viability of that idea.
We used the external provider's API with data from Handball, Basketball, Volleyball, Beach Volleyball, and Tennis matches. We built a new component for the news coverage CMS, allowing the editors to manually update the scores during the matches. The engineers created an auto-push solution, which automatically updated the widget on the coverage pages.
After implementing the widget, we participated in some tests on production to verify any technical and experience issues. Gladly, everything worked well, we solved the issue for live coverage.
We had problems implementing the Olympic Bar. There were performance issues and we couldn't show the scoreboards within it. On the other hand, we guaranteed quick access to the Olympic Games’ main page, the highlight was always in constant updating – reinforcing the live feeling –, and we applied the bar on the whole website, including the external pages, bringing consistency.
The Olympic Card was filled with the schedule and Medal Board, it was applied to the entire sports website and more: we delivered the card as SSI (Server Side Include), a simple way to allow more customization, so it was provided for Globo's portal page and G1, the news website, too.
The Scoreboard Widget was delivered and integrated with the news coverage platform, ensuring the live coverage of the most important sports in addition to football.
During the Olympic Games, we followed the audience and finished them with very good results. The average of visits per day in GloboEsporte increased 43% during the Games, and for SporTV.com, that raise was 46%.
GloboEsporte reached 4 audience records, beating the former one, from the 2014 FIFA World Cup. A major part of that audience was in the live streams. 54% of the visits in GloboEsporte passed through some Olympic page. The Olympic Bar and the Olympic Card, applied in different Globo products, were responsible for 42% of the visits to the Olympic main page. Globo.com’s portal page was the main traffic source of GloboEsporte's Olympic content, and the major part of this traffic was through the Olympic Card.
Rio 2016's web experience was very successful. In this kind of complex project, with a lot of constraints and a very strict launching date, being close and aligned with stakeholders, partners, and users is crucial. Even then, problems can occur. It's safer trying to anticipate possible rupture scenarios. By preparing a backup plan, unnecessary risks are avoided and a better execution is assured.