New navigation model for novelas

2016 / 17

Context

Gshow is the entertainment website of TV Globo, the second-largest commercial TV network in annual revenue worldwide. Gshow has an average of 135 million monthly visits and is one of the websites of Globo.com, one of the 10 most visited portals in Latin America.

In 2017 all Globo.com websites had the goal of migrating to a new publishing platform. In this transition, all public pages were analyzed to verify if they should be kept, adapted to the new framework or discontinued.

Some critical problems were discovered on one page in particular, which was recognized as the heart of the navigation for all novela content. Novelas are the most popular television programming in Brazil and its content generates about 75% of all Gshow traffic.

The audience and the nature of the problem required a complete redesign of the navigation flow in novela content.

TL;DR

  • We found a complex navigation problem in a Google Analytics analysis.
  • The prototype presented in a usability test was approved by the participants, but an A/B test indicated that the alternative wouldn’t work in the real world.
  • Final alternative simplified the ecosystem with the flow immersed in the content.

My participation

  • Google Analytics data extraction and analysis
  • Wireframes and user flow charts for new navigation models
  • Usability test script co-writing with lab team
  • Usability test prototypes
  • A/B testing plans
  • Minor user interface iterations

Project

With an in-depth Google Analytics study, we discovered that, among other findings, the chapter page (where users could find videos of previous episodes, content related to next episodes and summaries of following days), known for its high page view count and session time was, in reality, a dead end bottleneck in the navigation.

Google Analytics analysis

Key findings from Google Analytics analysis:

  • Our main entrance door was strong and relevant. We would like to keep it this way. VPA (Vem Por Aí), “Coming Up”, is the description of a scene from the current days episode and was accessed mainly via globo.com homepage and Facebook.
  • The chapter page was difficult to find despite users’ high engagement with the content.
  • The summary page was outside the ecosystem, existing only for organic search.
  • A visit with a chapter or summary page on it generally finished on these pages. They were basically dead ends.

First alternative

With the previous information, we prototyped a new navigation model that eliminated the chapter page. In this new flow, users would find all pages of the ecosystem on a timeline under any content page. This alternative followed a low-cost strategy of the company, where the objective was to design into the framework (content + feed), avoiding the creation of new and specific templates or elements.

New user flow

Fist alternative - Before and After

The prototype was tested in a usability lab with 12 users and had positive results. The majority of testers understood and enjoyed the new format, giving us green light to the next stage of the project.

Usability test participant

One thing that I liked is that I didn’t have to leave the page to find the videos from yesterday; they are already down here. ‘Vem Por Aí’ is also here! That’s really cool!
Usability test - Mobile
Usability test - Participant
Usability test - Activity

A/B Test

To validate the efficiency of the solution in the real world and to ensure that we weren’t damaging Gshow audience, we planned an A/B test comparing the click rate of this model with a recommended version of the flow already in use.

To our surprise, the clickthrough rate of our structured flow was considerably lower than the recommended version, making it unfeasible.

Click-throught rate
Mobile -5&, Desktop -21&

Despite the unfortunate results we learned two very important things that gave us great insights for a second alternative:

  1. Weekly summaries, which was one of the contents presented in both flows tested, had more clicks than all other offered content.
  2. We didn’t notice before but the chapter page was mainly visited by heavy users. We understood that their mindset would never change from the current, very linear format, to a structured flow at the bottom of content pages. Our new model would need to use the content itself to keep users browsing.

Second and final version

Our second and final alternative maintained the low-cost premises of the project using the framework and avoiding the creation of new pages. This version used the weekly summary, previous discovered highly attractive, as the new navigation hub. Doing so, the summary page was finally inserted into the ecosystem, no more existing only for organic search.

The lifespan of VPAs is really brief. They are posted in the same day the episode airs and are irrelevant on the next day. To attend this behavior, we designed the page to automatically change during the day prioritizing the most premium content available: videos of previous chapters, scenes of next episode and the summary of following days.

Final flow

Summary changes over the week

Beyond the new summary as the content hub, we also designed a “bait” on VPA. In this element users can start reading the current day summary and, clicking on it, they can access the full week summary with all the most relevant content available for those days.

This is the new novelas ecosystem:

Full final ecosystem

Work in progress. Results coming soon :)

Project created at Globo.com. Design team: Igo Mayama Kramarz and Thamires Falcão.