Helping Users Discover Graphics
By: Ft Product
Tags: UX, Graphics, Data, Journalism, Financial Times

By Rasal Sesay

Introduction

Amongst our readers, both digital and print, visual journalism is viewed as a way to add value to an article, in a digestible and easy format which enhances their reading experience.

We’ve invested in rich journalism through interactive graphics, editorial production, data and charts, however we were faced with one problem: our graphics, as ‘stand alone’ pieces, were not discoverable.

Previous research we‘ve conducted on rich journalism showed that, on FT.com, readers use learned or inferred visual cues to give them an idea of what type of format to expect/discover. For example, Opinion pieces are displayed in blue and include headshots; Short stories (FastFT) are in the first position on the Homepage and right below the navigation bar; and Longer reads are accompanied with a review or analysis tag, special colour or style and a large photo.

However, when it came to infographics/charts, users knew they existed but finding them was a more haphazard experience. Adding visual components to stories takes time and effort, and is usually reserved for our best stories. So we definitely want users to be able to discover and refer back to these pieces, which tend to be among the best of what we produce.

The birth of the charts hub

In 2017, our annual Hackathon saw a team aim to solve this problem by creating a “charts hub”. The goal of this was to extract embedded graphics from within articles and make them visible. By doing this we would enable our readers to find our best graphics quickly but also make the news more accessible, by helping them to form a better understanding of the news in a quick, rich and engaging way.

The charts hub on ww.FT.com

This sparked wider interest across the FT, particularly amongst editorial staff, who wanted an efficient way to identify and showcase graphics posted in articles. The rich journalism elements we’ve investing in are not standalone assets and cannot be separated from an article.

Despite the investment of time (and money) there’s no unified way to expose our visual journalism pieces. Products are disjointed and there is a lack of visibility of what content is produced by various teams across editorial, resulting in missed opportunities to use, enhance and expose our visual journalism pieces to the best of their ability.

A single unified place where all graphics we produce are discoverable, would resolve this issue and reduce duplication.

In order to make this proposition viable we set out to build a deeper understanding of our customers’ needs in order to determine how best to overcome this issue.

Discovery — What do our readers think of Visual Journalism?

They like it!

We conducted a short discovery survey among our readers to explore and understand the value of visual journalism, how readers currently use or would want to use visual executions and practical examples of who does this well.

The feedback was clear: FT visual journalism is very highly regarded as a way to enhance and add value to their reading experience as well as increasing their sentiment towards the FT. Responses also showed an appetite for more charts, graphs and data visualisation to be displayed within our articles.

Results from our reader survey on what they want to see more or less of

Building our understanding around user expectations

In order to explore attitudes towards visual journalism more deeply we spoke with a number of users face to face. Key insights from the sessions showed that although they would value a single place where all of our charts would be stored, issues around discoverability (how would they get there?) and the ordering, if we fail to display our charts in logical way, could hinder their likelihood to use it.

Validation through user research and usability (Prototype 1)

Based on these insights and a hunch from the team (due to the success of FT’s social graphics on Twitter and Instagram), our next round of user research explored whether users would value our charts as stand alone pieces of visual content, through a number of usability sessions.

A chart on homicides in London as a stand alone piece of journalism

The feedback from these sessions showed that although the visual stand alone pieces were understood, they were viewed as ‘incomplete’ and all users expected to be taken to an associated article. Ultimately, they craved context around the graphics. Users turn to the FT for breadth, depth and rich content. Without it they would go elsewhere.

We also used this as an opportunity to explore competitor websites in order to understand how they were perceived and understood in terms of layout, content and likelihood to use. Overall this short review echoed earlier feedback from within the sessions. Users don’t value charts as stand alone content, their preference is for text and visual features together which provide the depth and context they need. However, they do view graphics as a useful tool to aid their understanding on a topic.

The Economist

The Economist’s graphics

Users favoured the layout of this page and felt the topics displayed were ordered in a logical way. The infographics, to the left of the text displayed, provided users with a teaser to click on and see more information. They also liked that the articles and graphics were linked, enabling them to go through to the full story. However the adverts displayed to the right of the screen, and at the top of the search results, were unappealing.

Atlas

Most popular charts on The Atlas (by Quartz)

Users struggled to orientate themselves when exploring this page. Immediately, they noticed a lack of hierarchy and order (in terms of date, topic, sector etc), and there was a sense of confusion. Due to its density, their interaction with the page in terms of the value the graphics could provide was quite difficult for them to grasp.

Bloomberg

Bloomberg’s Graphics page

There was a stronger sense of frustration when users reviewed this page. They felt the graphics displayed were overwhelming, due to the various lengths and sizes shown. The lack of consistency, order and hierarchy also made the page feel cluttered, hard to understand and confusing. Ultimately, it was a frustrating experience.

Soft launch of Graphics Beta Page (version 2)

Building on our findings the team developed the beta version of the explorer page.

The featured graphic, ‘editor’s pick’, allows our graphics editorial team to showcase the best of their work but also highlights and aids readers’ discovery of high value content.

All pieces of visual journalism are stored in a list and sorted to have the most recent at the top. By ordering our charts in this way readers can easily explore and filter these.

Providing a ‘teaser’ detailed view, when users click on a graphic, provides a short synopsis and a link to the full article. Readers can also navigate from graphic to graphic using this view, enabling them to gauge their interest at a glance and click through to the full article for more, or continue to discover further graphics on the page.

Editor’s Pick — Graphics

Users can explore charts by searching tags of interest or by clicking on a short list of pre-selected trending tags provided. This alternative search function was introduced as a way to inspire readers, who may not be sure what they are specifically looking for, to explore our content.

In order to improve the discoverability The Graphics Explorer page is visible to 100% of visitors. However, only subscribers will be able to go on and read the articles as normal, those who are not registered will hit our paywall when they click through to articles.

In addition to this, a link to the explore page is also included in our hamburger menu.

Our ‘hamburger’ menu

What’s next? Iterate, iterate, iterate

The onsite survey shows that so far, 80% of those who responded find the beta version of the graphics explorer page useful, with the option to click into a graphic and see further information (56%) and the ability to search graphics (46%) as the two most useful features on the page. But there’s still work to be done and we’ll use this feedback to help us iterate and improve the page.

The ability to filter by trending ‘topic tags’ isn’t entirely understood by users, which can cause confusion and is a feature the team will improve by enabling full text/ intuitive search. This will allow users to search using an article heading and surface visual content of relevance.

Further iterations could also see the graphics explorer page added to our mobile app.

If you haven’t yet explored this new feature check out our graphics page, here.