Chart Builder

CNN BUSINESS

2021

CNN Business Chart Builder

For CNN Business, data visualization is a key component to storytelling. Charts add valuable context to complex topics like the stock market and world economy, but unfortunately, the existing tools and processes in place did not allow writers to create interactive data visuals in a timely manner. This meant that visual elements were often left out of stories in order to keep up with the news cycle, and CNN readers were missing out on engaging content and the opportunity for deeper data exploration.

My product team worked on a new chart builder tool that could fill this gap, ultimately leading to more engagement from CNN readers.

Objectives

These were the key objectives we kept in mind as we defined tool features and requirements:

Enable Editorial team to quickly ramp up a simple data visual as soon as data becomes available
Enable Editorial team to embed these visuals into stories to create compelling, informative, and timely content
Enable data interactivity to encourage content engagement and data exploration
Allow linking charts to topical dashboards to promote deeper data exploration for CNN Business users
Enable Visuals team to work on more complex visuals and infographics, while automating the process of creating simple visuals within the CNN look & feel
Create a solution that will seamlessly fit into the new CMS when it becomes available

Editorial team interviews

My product partner and I interviewed key editorial team members–stock market writers, CNN Business editors, newsletter creators, etc.–in order to better understand their current workflow, pain points, and feature ideas. Here's an overview of what we learned:

Key Takeaways

The editorial team is busy and often covers breaking news, so efficiency is critical–time is limited
The current process is filing an image request to one visuals designer, and depends on his availability
Most useful data would be stock charts and economic indicators
Chart previews are critical

Pain Points

Current charts are static images, so data is frozen in time
Chart requests go through one visuals designer–depends on his availability
Back and forth approvals process is time consuming
Data is manually pulled from source, which takes extra time

Feature Ideas (beyond MVP scope)

Save common chart settings for re-use
Indicator to CNN readers that chart has been edited
Live updating data (intraday)
Callouts to specific points in the chart
Social share

User Flow

Once we better understood the current situation, we thought through the writers' step-by-step process with this new tool.

Ideally, this chart tool would live directly within the story editor, but the new CMS that would allow for that capability was not yet ready. We decided to start building a standalone tool in order to iterate and gain valuable insight for workflow improvements so that it would be in a good place to seamlessly integrate into the new story editing tool when the time came.

So, for a (short) period of time, this tool would generate a webtag that could then be inserted into an article in the existing CMS. The user flows for both chart tool and CMS are shown below.

Prototyping and testing the MVP

Using the same UI kit being used for the new CMS, I built a prototype in Figma for usability testing with the editorial team. I iterated on this prototype as I discovered most common use cases and "must-haves." The prototype below is the final result of this testing, and helped to define the scope of our first MVP.

Users are able to choose 1 of 6 frequently-used data sets from FRED, customize the time range and units, and add informative copy. The preview live-updates as they make changes in the editing panel. The use case shown below walks through how a writer would create a chart that shows unemployment claims from pre-pandemic (January 2020) to present day.