Overview
CNN's market data web 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 provide users with innovative new experiences, we needed to first build a solid foundation to work from. We manually rebuilt each component, made UX improvements, aligned with and contributed data components to the CNN design system, and spent time doing extensive user research to identify new ways to better serve our very loyal users.
My Role
• User Research
• Design Exploration
• Design System
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.
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.
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.
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.
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:
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.
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.
These market pages are very data heavy, rather than editorially focused, meaning we needed to create new CNN components that would organize large amounts of complex data. Our users liked data to be dense so that they could see a lot of information on one page–so clean, polished design was critical. Here are some of the components that I created to be used across CNN Business, that I worked with the CNN design system team to integrate:
Through all of the research we did for this market page migration, we learned that our users love visualized data. But in order to effectively tell stories through data visualization, we needed to establish a library of data visuals to pull from.
There were some existing–scattered and often times conflicting–data viz rules across the company, so it was a unique challenge to collaborate across teams and make decisions that work in the responsive, interactive environment. T
