7x audience boost: the redesign of news website Agência Brasil
The mission: improve layout and content to increase audience.
The result: +120 million pageviews in 8 months.
The result: +120 million pageviews in 8 months.
Agência Brasil is the main government news agency in Brazil
About
EBC, in Brazil, is similar to BBC in Great Britain: a public communication holding with several media types: TV, radio and digital. Agência Brasil is EBC's news agency - like Reuters or Associated Press. In 2018, a Sprint Process occurred to set priorities to achieve the goals of the company. The main objective of EBC was to reach more people increasing the audience of Agência Brasil's website.
Role
Product Manager, throughout the project cycle from planning and requirements gathering to strategy, wireframing and content management. Also collaborated with the development team to implement front-end and problem solve.
Challenges
As EBC is a big company (almost 2k employees) with no data-driven culture at all, the decision-making process, aligning information, building the layout of each component and meeting for client approval would take a long time. So, we choose a space to be our "collaborative design room", where we could sit down with the client and discuss the metrics and their impact on the layout itself - while designing it in real time.
Marcelo Nogueira, Lead UX Designer, running the microtests with clients
Two different targets
In this project, we needed to serve two different types of users who visit the site daily: journalists from other press companies who seek updated information about the government (20% of our visitors) and also the general population (the other 80%), who reads our news in general due to Google results or sharing on social networks.
The audience didn't need to be built from the ground: in 2018 and 2019, Google Analytics was already showing that we had almost 20 million unique visitors per year. But Brazil's news ecosystem is filled with successful competitors. The amount of content produced couldn't be higher at the time, because the company was passing through a strong budget decrease, which made it impossible to hire new journalists.
The old website was quite outdated
Outdated, you know what I mean?
Therefore, the application was heavy and took a long time to load - especially on mobile devices.
But at the same time users were very used to the old version.
So, we looked at the relevant amount of information we had about our users, seeking to guide our decisions based on these data.
Brand update during the project
While running the project, the brand of the company (logo, colors, everything) was updated. So, we developed several layout versions, using the old Design System and the new one.
Primary components created before the brand update, when everything was still so blue
New color spectrum based on Brazil's flag
Process
To increase the audience, the team decided that we needed to be oriented by the audience we already have at the time. As we already had a lot of users data, we relied on Analytics and Heatmaps to identify users behavior standards and give them what they were looking for, instead of letting inside assumptions take over the whole layout.
So, we figured out that:
Even though most of the access came from news pages (second level) based on Google searches, a relevant part of our audience used the Home Page (other media companies). Using Hotjar's Heatmap, we identified that these users were looking for the government's latest news.
Look at the center of the image: "Últimas Notícias" means "Latest News". And it was all people were looking for. The strong red dot at the end of the component was a link to the "Latest News" list page.
That's why, today, the first menu item is "Últimas Notícias" (latest news).
In addition to the menu item, sure was that we needed a killer Latest News page. With a as simple as possible layout, we even suggested that it would be the homepage of the site, but unfortunately this suggestion was not accepted by the client.
The new "Latest News" page
The editorial highlight at the approved version
We also defined that these news needed to be at every internal news page, to decrease bounce rate from organic traffic.
The desktop "News Page" with the whole scroll movement
To improve performance, we developed minimal mobile pages to be loaded as fast as possible, with just the content, company's brand and nothing else. To do so, we used technologies like AMP and promoted changes to the CDN settings.
Normal page with all elements
Minimal, lightweight AMP version
If you'd like to view this page live, use this link: NBA: Obama aplaude liderança de LeBron na quadra e na arena pública.
SEO
As designers and developers, we understand that content and SEO are the base to improve audience metrics, and not "just" the site redesign. That's the reason why we customised, translated and installed a SEO module for the website. Thus, journalism managers could identify which stories were in line with good SEO practices and which needed improvement. This caused a huge change in the way content professionals deal with daily news production.
Results
On February, 10th 2020, we launched the new website. Long story short: year to date, we had more than 70 million unique visitors and 126 million page views at Agência Brasil.
Compared to the same period last year (10 million unique visitors) we had an increase of more than 7 times the number of visits.
Compared to the same period last year (10 million unique visitors) we had an increase of more than 7 times the number of visits.
The Latest News page today is the most visited page at "direct traffic" on Analytics.
The strong increase on march 2020 on Google Analytics graph
Right after we launched, we received some user feedback that some design changes we did were actually still weighing the site. Se we decided to go through every interface element and remove every single piece of component that was not necessary. The main one was this guy right here, made to be our loading.
And then it was removed. The cool part of this was to show clients that they were not the only ones who need to emotionally detach from old or heavy components or take care of the photos size. That's was everyones concern, including us. Minimalism wins.
The most important result of the project was not only the huge increase in audience metrics, but the fact that people in the company realised that an opinion without data is just another opinion. And that decisions on such important projects need to be guided by data.
Secondary highlights of the home page
Next steps
To gather more data to convince client that the Latest News should be the Home Page, as well as create a media repository for improve user experience of other press companies when downloading photos, videos and audios from Agência Brasil to replicate in their websites. The project will be called Media Central and I'll be glad to share here when it's done.
Did you like it? I will be very happy to discuss the project in depth as well as to explain better about the processes and work tools.