GLOBO.COM
news framework
a publishing platform
Consistent
& scalable experience
flexible enough to work on multicontexts
How to build a design system for the most accessed news products in Brazil?
users per day
40 million
visit sessions per month
half a billion
country
brazil
year
2017
the project
what
A design system for Globo's publishing platform, enabling its brands (G1, Gshow, GE and Techtudo) to lead the brazilian digital news market for sports, entertainment, technology and hard news. All of these brands are part of globo.com, the biggest news portal in Brazil.
why
Globo needed to evolve its products and platforms to reach a more agile production and cost-efficient structure, at the same time resulting on a more compelling consumption experience throughout its digital services portfolio .
how
By designing a multiplatform framework, (based on a system of elements, components and templates), flexible enough to be used by multiple products and consistent enough to reduce development costs, so optimizing the production capacity.
The project consists of interfaces for both the end consumer and the editors responsible for content production and distribution. An essential pillar of the design was to let the nature of the content (its media type, the subject itself and its inherent characteristics) influence how components reacts to different moments, from exploratory navigation to deep reading context.
goals & needs
people |
news
.
information
.
leisure
business |
.
cost reduction
production scalability
.
consumption increase
the ux design process
I. Discovery
Focus on research to truly understand the problem, the users and the whole context through:
-
quantitative data analytics
-
user interview
-
user journey
-
user profiles & personas
-
competitive analysis
II. Definition
Focus on synthesizing research insights and defining the design approach through:
-
problem definition
-
opportunities map
-
project guidelines
-
experience premisses
III. Development
Focus on designing and iterating upon user feedbacks through:
-
user flows
-
wireframes
-
graphic user interface
-
prototyping
-
usability tests
IV. Delivery
Focus on prioritizing features, scaling launches and measuring performance through:
-
design specifications to dev
-
scale launches
-
quality assurance tests
-
usability tests
-
metrics monitoring
context
delivering effectiveness on a complex structure
The project focused on systematized solutions to strike production at scale and, at the same time, staying committed to tell compelling stories through a wide-range of offers.
120
million
users/month
in 2018 elections
70
million
users/month
in 2018 world cup
1.5
billion
votes in a single dispute (2020)
a platformic service meant to support
an ecosystem of leading brands
Globo is the largest media company in Latin America and home of a diversified business branches. The project focus on a single and robust publishing platform for a variety of news products.
many stories to tell through
a wide range of
content types
From hard news and sport matches to reality shows and soap operas, the design system should appropriately address different subjects and formats.
editor's interface
consumer's interface
from content editors to end consumers,
ux design for different user perspectives
The publishing framework contemplates not only the interface in contact with consumers (for instance, news feeds and articles), but also the backstage environments for editors (such as the content management system).
persona
user journey on the news service
opportunity evaluation on the user's daily journey
user interviews
initial research results
focus on users
Quantitative and qualitative data from both product's analytics and ux lab sessions led to a better understanding of user's behavior and desires.
Research results showed that users wanted:
greater content freshness
higher performance in slow internet bandwidth
structural change
one framework for several products
An improvement in agility and cost efficiency by leaving behind an expensive model, in which each product had its own framework, to a scalable model in which there is only a single and robust framework that adapts itself to different contexts.
stage 01
launching a new multiplatform homepage
My role was to evolve a previously conceived concept of a new user experience approach targeted for production efficiency, consumption continuity and increased commercial results.
my contribution
concept review . design optimization . new launch communication
interface design . prototypes . usability tests
original
desktop
new version
desktop
original
mobile
new version
mobile
the new version enhanced the perception of 'content freshness' on users (improving visit frequency) and also increased engagement per session by means of a continuous scrolling feed and a stronger visual appeal
live coverage
breaking news in exclusive details
continuous navigation
all the content to be explored on an infinite feed
constant updates
the world latest news always at hand
optimization for multiple screen sizes
interface flexibility on a breakpoint & grid system
homepage grid
Layout responsiveness by breakpoints
touch friendly
focus on smartphones & tablets
'click' friendly
focus on notebooks & desktops
small
320 px - 640 px
highlights fullscreen
feed fullscreen
cards fullscreen
medium
641 px - 960 px
highlights 24 columns
feed 14 columns
cards 10 columns
large
961 px - 1366 px
highlights 20 columns
feed 18 columns
cards 11 columns
xlarge
1367 px ...
highlights 20 columns
feed 18 columns
cards 11 columns
mobile first design
More than a theoretical approach, our design team prioritized mobile devices due to majority audience of our services on small screens.
small
medium
less than 5%
large
second most relevant audience
xlarge
a small but steady presence of a wide screen audience
more than half of the audience
project's dilemmas
some decision points...
1. Should main news be blended or detached from the feed?
In order to encourage user engagement and foster a higher number of post and ad views per session, the interface should blend main, regular and complementary news into a single and simple interaction dynamic: the vertical scroll*.
* info gathered on quantitative and qualitative data
2. Should a post display secondary actions or just be a trigger to its full content ?
A reflection about complexity and effectiveness. From the complexity point of view, our team decided to adopt simplicity and to focus the solution on the stories being told, with no noise on the experience, and with nothing claiming for attention besides the main content.
On the effectiveness side of it, we found out by testing that the share buttons presented a better conversion when applied on the article itself and not on the post. So, it was an addition not worth to be implemented on the news feed.
3. Should news feeds be manually or automatically assembled?
It should be set through a mix of editorial and automatic engines, varying the balance of these input types depending on the context which the feed is applied on (if it is a homepage or a specific section on the product) and the product's strategy.
So, at the same time editors could manually pick the most relevant news and fix them on certain positions of the feed, an artificial intelligence system could pile up and recommend posts according to a page's theme, news chronology and user's personal preferences.
stage 02
expanding the system
My role was to define a systemic logic between components and to prepare the framework to gain scale for multiple types of contents & products.
my contribution
framework systematization . creation of new components . interface design
information architecture . prototypes . usability tests
a multi-brand approach
visual system
A highly platformic approach to equalize the experience across products, at the same time adopting a standard font type for all of its components while also allowing brand customization through variable header, footer and primary color.
Typeface
open sans
The open sans font type has a balanced character due to its humanist nature which mixes personality (for brand recognition) with functionality (focus on readability)
Aa
bold
700
Aa
semibold
600
Aa
regular
400
Aa
light
300
Spacing
Optimized cost development through consistency. The stronger the relationship between elements, the smaller the spacing between them.
Color palette
The system is designed for scale. So, when the framework's color palette is applied on different products, it changes only the primary color according to the appropriate brand.
a mix between scalable functionality and branded personality
sport news product
hard news product
entertainment news product
Elements of the post
The post structure is based on the functionality of its elements.
mobile phones
tablets & desktops
Mobile post sizes
How the content is presented through different hierarchy and contexts in the feed for mobile devices.
high contextual relevance
Large
The news highlights are always prioritized and shown at the top of the feed
Medium
The standard post format for regular news.
A reduced format to tell a story through multiple posts.
Small
low contextual relevance
Extra-small
The minimum format to enrich standard posts.
LARGE & MEDIUM POSTS
SMALL POST
EXTRA SMALL POST
Lead
Title
Body text
Annex
Metadata
Elements behavior throughout post sizes
An element may be displayed or hidden and even change its visual form according to the post format.
the relation between
content & post format
To design a solution for a group of posts, we must understand how different consumption moments and the environment in which a content is offered affect how it is displayed to the public.
keeping context by
grouping posts
To tell multiple stories of the same topic, we needed to deal with the a subject with care, in order to guarantee that the new component would be harmoniously integrated in the feed. So, usability tests were essential to gather feedback from consumers and to guide us on adopting the most suitable solution available.
Usability test result
Grid and spacing system
The inner elements of a grouped post follow a set of rules in order to provide scale and responsiveness to the component
Expansion and navigation
In order to keep a fluid and balanced experience on the news feed, the grouped post can be expanded to show more posts of the same theme only once . After the expansion of the post, a link to access more content about the same theme will be presented on the bottom of the post.
Behavior through screen sizes
The group card remains on its structure despite the screen width where it is shown.
tablets & desktops
mobile phones
a vast set of content
variety of components
Form follows function, suitability for the context, scalable use by content of similar nature... and content behavior throughout different stages of consumption (elements hierarchy)
main variations
variations by types of media and content status
article
video
playlist
live coverage
advertisement
complementary specializations
systematization of themed chunks of offers
regional news
sport matches
ranking
financial market
entities
most read
group of playlists
enhancing affordance
a new format
for video posts
As the company heavily relied on its video type of content, the project needed to leverage this media consumption by increasing video post visual appeal and facilitating its recognition.
Before
Generic display
A solution based on standardization (a post uniquely for videos presents the same form of a post representing an article) and on highlighting the type of media inserted in the post.
New version
Immersive storytelling
A component that stands out due to its personality and by adapting its form to fully represent the nature of the content, focusing on the story to be told.
Before | post format
unknown outcome
A single post format for different content types. No graphic difference between posts that lead to an article with a video attached to it and posts that directly open a single video content, results in a interface that lacks clarity.
New version | post format
clearer affordance
A suitable post format for each content type. Differentiation between post according to the nature of the content. An article with a video is displayed differently than a stand alone video content.
Before | thumbs
underutilized potential of images
On this approach, the main message is about the media type and not the content itself. The video thumb was 'hidden' behind a dark overlay and a play icon (displayed right on the middle of it). As a result, the thumb presented an overall low visibility and an obstruction of the main focus point of the image.
New version | thumbs
higher graphic impact
The focus is absolutely on the story being told, on the content itself and it is only complemented by the information about its media type. A complete inversion of approach. Now, the image is prioritized and displayed on a bigger canvas, unlocking its graphic potential.
Before | playlist
only an indication of multiplicity
This first version was heavily based on reusing the standard post format, only implementing minor changes to indicate the type of media and quantity of content. But, It demanded a click and a new page loading for the user to continue to explore the contents offered, resulting in an unnecessary step and in hiding the richness of the content on the feed.
swipe
New version | playlist
direct access to the contents
This approach enables the user to directly interact with contents still on the level of exploration: the feed. Therefore, it is no longer needed to click on the post to continue to explore its offers on a new navigational level. It is all easily at reach at first sight. So, the action of click will be focused on content consumption, simplifying the navigational comprehension.
stage 03
a concept of evolution
My role was to envision what could be the next step of Globo's publishing platform by applying the recently updated design principles of our team.
my contribution
concept creation . interface design . prototypes . usability tests
framewok 3.0
enhancing the experience
In order to review the system's experience, we adopted Globo's new design principles to guide our approach. The users interacted with a high fidelity mobile prototype, in which we worked our rebrand, new features to dialogue with the user, better text readability, an engaging video experience and more harmoniously inserted advertising content.
interactive components
objective 01
rebrand of digital services
Improvements for better legibility and a more elegant application of the brand color. In this version, color is no longer an overwhelming issue throughout whole interface with an excessive use on main elements, such as titles and page header.
understanding preferences
objective 02
open new dialogues with consumers
adoption of dynamic feedbacks, micro-interactions and touchpoints with consumers
objective 03
a far more immersive video experience
a more blended and responsive video experience all around the framework
immersive video experience
prototype of the new concept
slim & dynamic
A high fidelity prototype was created to materialize our strategy and to interact with consumers, so the team could gather insights and opportunities.
increase in legibility
in-article video preview
live match coverage
match scores in real time
sponsored video posts
into the feed advertising
The tests consisted of interviews, exploratory navigation, brand perception quiz and a comparative analysis between the current and the proposed version.
I
II
exploratory navigation
interview
III
brand perception tasks
IV
comparative testing
invited test users
10 heavy users
men & women
18 - 50 years old
variety of social classes
_edited_j.jpg)
original
vs
_edited_j.jpg)
new version
according to users, the new version is
clean
organized
comfortable modern
original
vs
new version
a qualitative validation
9 out of 10
users preferred the rebranded version (lighter and more elegant) instead of the current one.
increase in motivation & satisfaction
a richer video comsuption experience
users felt more attracted and leaning to interact with video contents due to the new dynamic consumption experience, specially concerning the preview feature on feeds and articles.
usability test
Nowadays, Globo's Publishing Framework
is continuously being evolved by talented designers
and so,
daily stories are
still being told to millions of brazilians
project info
company
globo
my role
interaction designer
clients
g1, ge, gshow & techtudo
skills used
information architecture
interface design
prototype
ux research
design team
ana christina bringuente
diogo cabral
igo mayama
raphael araújo
former design team
daniel rabuga
jéssica galvão
felipe luize
gustavo osório
cainã nunes
and more
next project
© 2023 diego brito
