Project R7 10 Years

Update on the layout of one of the largest news portals in Brazil celebrating its 10th anniversary

Client: News portal R7.com

Challenge: The project made a turning point for a new era of the R7.com portal. There was an urgent need to update the interface of the site to make it more modern and dynamic to follow the highlight of the different news published during the day.

Date: 09/2019, São Paulo

Function: UI/UX Designer Full Adj.

The R7 10 Years project won the award Audience Honor in UX/UI on the 11th Annual Shorty Awards.

This award honors the implementation of UX/UI into a social media campaign or overall social presence. Design elements used in posts, to enhance social profiles, and as part of integrated campaigns and mobile experiences are eligible. Creative integrity, strategic integration, and effectiveness will be considered.

For more information: R7 10 Years Shorty Awards

In September 2019, RecordTV's R7.com portal reaches its incredible 10-year mark. And along with this mark comes the time to revisit the entire structure of the portal so that it could meet the demand that came with the evolution of the portal and the way the user consumes news today.

Old Version of the Website

---

First Steps

The first step was to make a large survey of all the data sources on the portal to raise the main chances of improvement, and to create the personas that represented our audience that changed a lot over 10 years.

Hypothesis Survey and Card Sorting

After the research stages with external audiences (readers of the portal and viewers) and internal audiences (writers and stakeholders), we came to the main problems that justified not only a visual change that would mark the anniversary of the portal but a complete change in the publication structure and user interface.

---

Internal Public

The greatest difficulty found by the writers was with the plastered form that the current structure presented itself. After studies with this audience and tests from paper prototypes to high-fidelity mockups, we came to a modular structure that was based on the urgency of the news. For a portal, it is important to differentiate between breaking news from everyday news. For this purpose, a structural projection was created starting from a news unit, which grouped to others generated a news format that fits pre-defined grid modules.

Construction of Components

To create this base, we expanded the base of our grid to a 24 column structure that also made it possible to reflect each format of the mobile version.

Design System Components

---

External Public

With the popularization of smartphones and the mobile internet, consumption, mainly of news, became mainly mobile. This was the first point to be raised the pages needed to be more dynamic, as formats and interactions closer to what the user already consumes in social networks and applications. The portal still presented some content only in the desktop version. So among the main changes was that the mobile and desktop versions were exactly the same. Another important point is that each desktop format has a version as the same format and news weight in the desktop version thus presenting a complete multiplatform consumption. In the researches and usability tests, the need for image highlights became evident. In addition to these changes, a tag navigation system provided a more fluid mobile experience and increased user retention on the desktop. Card sorting helped reorganize the Editorials making the portal content better categorized. With these changes combined the main feature of the portal that is to provide content close to your reader was the new version of R7.com

Desktop Version

Home Page Desktop Version

Home Page Desktop Version

Mobile Version

Home Page Mobile Version

---

The project with R7 10 years was developed to always follow the evolution of new demands such as new types of content and features on the home page. Besides being a base for the development of internal pages such as complete articles, image galleries, and videos.