Responsive Daily News Portal UX/UI

Company:
FolhaPE

My Role:
UX/UI Designer

Team:
1 Product Owner, 2 front-end developers, 2 back-end developers.

Situation

The Folha PE, one of the biggest news portals of the State of Pernambuco (Brazil), decided to redesign the portal aiming to increase its audience to become even more relevant.

Tasks and Challenges

How might we motivate the user to visit the site every day?
How might we increase the audience and relevance of the portal?
How might we provide a better user experience on a mobile device?
How might we engage the user, increasing their spending time in the portal?
How might we increase the portal’s revenue?
How might we highlight special content such as blogs, radio, and videos?

Actions

Worked with BI team to identify what we could learn from Google Analytics.
Reviewed the sitemap to identify opportunities to simplify the navigation.
Scheduled design sessions with the editors and journalists.
Scheduled sessions with the development team to discuss requirements, clarify questions and check if the proposed design solutions were doable.
Sketched initial ideas and created wireframes.
Ran usability tests with different profiles of portal users.
Created a high-fi prototype.
Presented the project to the stakeholders.
Worked closely with the developers supporting them during implementation.

Proposed Solution

Frictionless user experience with global fixed navigation that allows users to navigate through the main sections with just one click.
Sections organized by color helping the user identify the subject of the news quickly.
Responsive design with smaller images for mobile devices making the portal load fast.
Smart hero where the editor could change the layout of the portal to display the “cover” of the portal based on the "mood" of the day.
Content is king: Explore a variety of news highlighting news from sections such as politics, economy, sports, and entertainment.
Real-time transmissions: Start covering events such as soccer games, elections, etc.
Social Media Integration: Provide options to share the news easily through social media. Integrate daily videos from the youtube channel. Publish the latest news automatically on Facebook and Twitter.

Results

In just 6 months, the new portal had an increase of 86% in its audience, becoming even more relevant in the state.
The organic traffic increased by 92%, direct by 64% as well as the traffic from social media that increased 62%.
After 6 months, it was verified that the sections “News”, “Politics” and “Sports” were in the Top 5 viewed contents. This is evidence that the news content became more relevant to the audience.
The content organization by colors helped the users to realize the variety of news and content provided by the portal. It also helped them to localize themselves during the navigation.
The “Smart Hero” proved to be very effective by adding emotion to the content. A powerful feature capable of transmitting to the reader in seconds if a tragedy was happening or if it was a regular sunny day. It became loved by the editors and a signature of the identity of the portal.

Record of the newspaper announcing the launch of the new portal in the Folha de Pernambuco. — Newspaper announcing the launch of the new portal in the Folha de Pernambuco.

"The new portal is a modern product, agile and that dialogues directly with the concerns of our readers, who are always looking for innovations". " With the new portal, we are not only expanding and strengthening our presence in the digital environment, we are reaffirming that Grupo Folha has quality and credibility and that makes us respected content generators in real-time "
Patrícia Raposo, Chief editor of Folha de Pernambuco

"You can now navigate more fluently through the portal, print newspaper, blog, and column content and listen to Rádio Folha"
Roberta Rêgo, Editor of FolhaPE

"We also gained our own real-time streaming feature, which will be adopted in football matches and factual news coverage"
Roberta Rêgo, Editor of FolhaPE

Design Process

Research

Insight from Google Analytics.

The most important finding was that some blogs had a bigger audience than the portal. Only the section "Daily News" was among the top 5 viewed contents. All the other news sections such as economy, politics, sports, and entertainment had a small audience at that time. We had to find a way to make the news more relevant.

Ideation

Low-fidelity Prototype

Designing a daily news portal home is a huge challenge. Defining hierarchy information is critical for the portal's success. The wireframing exercise was essential to define the content organization, combining sections such as regular news, economy, sports, politics, and entertainment, among others. It was also essential to determine advertising spacing. The portal's home page was so long that it took six 6 A4 sheets to draw the entire wireframe.

Smart Hero Drafts

The “Smart Hero” was a functionality that gives the editor the power of changing the first section of the portal by selecting one of the 5 templates available. This feature would allow the portal to transmit the "mood" of the day based on what is happening.