CNN Business
2019-2021

CNN Business Market Data Experiences

During my time at CNN, I worked with the CNN Business product team on some long overdue improvements to their market data experience. Essentially, these pages were so outdated that many links and data points did not work, layouts were non-responsive, and pages were created entirely of iframes provided by our data vendor. We “owned” none of it and did not have control of the content in order to iterate and improve.  

If we wanted to reach our users and provide them with innovative new experiences, we needed to first build a solid foundation to work from. In moving the old market data pages to a new tech stack, we manually rebuilt each component, made small UX improvements where possible, aligned with the new CNN design system, and tested along the way to be sure we were not alienating loyal users in the process. As we did this, we spent time doing extensive user research–developing personas and identifying pain points, as well as opportunity areas to better serve them.

Where we started: Pre-markets

We started with one of our more popular pages, pre-market trading. This page had an average of 221K daily unique visitors, and many loyal users who returned to the page multiple times per week.

This is what the page looked like.

Wireframes + Exploration

As I explored different layout variations, the focus was to not stray too far from what users were used to, but create usability improvements where possible. Initial surveys told us that futures data, quote search, and investing news were top priorities when visiting the page. I was also tasked with implementing a new ad experience that would serve as a template for pages to come.

After presentations with key stakeholders and discussions with market experts on the editorial team, we moved forward with variation 1.

Variation 1: Futures data pulled to the top, right rail ads.
Variation 2: New ad footprint, with more data in one screen.

The first launch

After visual design exploration and the addition of design system standards where applicable, we launched the new pre-markets experience to just 10% of our audience, with a short feedback template for users to tell us what they thought. 

Negative feedback

Because our users were so loyal and this page went unchanged for so long, this first launch received a lot of negative feedback. The overwhelming majority of users mentioned that they now had to scroll and there was too much white space, especially on mobile. They did not agree with our responsive design solution.

Addressing feedback

We moved through a series of iterations as we tweaked the page to meet user and business needs.
Some of the improvements from initial launch include:

  • Condensed data that fits more content above the fold
  • An updated container title design to make sections clearer
  • Removal of the newsletter sign up that looked too much like an ad
  • More accessible typography and colors
  • Explored anchor links on mobile to allow users to “jump to” the sections they care about quickly
  • Moved the quote search lower on mobile so that futures data was visible on load
We used a toggle to allow users to opt in to the new experience on their own time.

The user-approved experience

By responding to user feedback, as well as adding a toggle that allowed users to opt-in to the new experience on their own time, we managed to ease our loyal users to the new experience without a decline in page visits.

More importantly, we had a great base (that we had full control of) to start building new experiences on.

VISIT THE SITE

Continuing to build the foundation

The pre-markets page was only the beginning. One by one, we applied an iterative, user-focused process to the rest of the CNN Business market data experience, launching pages that users loved and at the same time set us up for growth.

Below is a sample of some chart and layout exploration I built into prototypes and tested for Commodities, leading us to the launched page that follows.

Variation 1
Variation 2
Variation 3