Overview
Charts add valuable context to CNN Business stories, especially on complex topics like the stock market and world economy. 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.
Results
My product team aimed to fill this gap by creating a quick and easy-to-use chart builder that allows writers to create interactive data visuals right in the story-building tool, ultimately leading to more engagement from CNN readers.
My Role
• Sole Product Designer
• User Interviews
• Prototypes
• Visual Design
These were the key objectives we kept in mind as we defined tool features and requirements:
My PM 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:
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.
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.