Case Study
CNN - Content Distinction
CNN publishes an astounding amount of content, of all types, every single day. So let's give our audience what they expect. The first step, of course, is to set that expectation clearly.
In 2020, our product teams were committed to regaining user trust by improving the core experience. This improvement is incredibly tactical on it's surface, but it was extremely efficient in delivering value for effort. This collaboration, within our cross-function team, leveraged the skills of each of our leads; often doing the actual work together.
During a discovery exercise for another initiative, we found evidence of users being confused by video entity pages. This left some of our audience asking: "Where's the article?" A simple icon optimization was our immediate hypothetical solution. This is a story about proof, fast decision making, and streamlined delivery.
Role
Lead Product Designer Design Strategist
Delivery Type
Optimization in Production
Brief
Research for another effort provided the jumping-off point. We learned that an astounding number of people were entering video pages from our home page, and then quickly going back without starting the video. The team immediately began answering two questions:
1
Is there evidence of real confusion?
Were these actual unintended clicks of video headlines, or is this something else?
2
Can we clear up the confusion with a better icon?
It's possible that people aren't seeing the current video indicator; which was very light, and positioned to the right of the headline text.
Process
A variant of my baseline process that is used to quickly test hypotheses and ship optimizations.
Validation
We easily found existing qualitative studies that supported our hypothesis. Two primary conclusions emerged:
-
Some users did not expect a video page after tapping on a video headline. Thus, validating a miscommunication.
-
Many users were not aware of a difference between articles and video entity pages. A much larger problem which was investigated during another effort, but this is partially because of a weak distinction of our content at the headline level.
Resulting Hypothesis: Optimizing our video indicator, adjacent to headlines, will decrease unintentional clicks by users who don't intent to watch a video. Better representation of content types should result in a higher ratio of video starts to page views.
Testing
I immediately began drafting a test overview, designing new headline treatments that met brand guidelines, and working with the team to build the variants for testing. This would be a live multi-variant test intended to create clear proof of the improvement with objective data.
By the conclusion of the first day, the Tech Lead (one of my closest collaborators) and I were sitting together as he hacked the CSS to stand up real, working homepages; each with a different headline and icon treatment. The tests would be executed with our live audience using Optimizely.
Results
We got clear results that showed a few options that created positive impacts to our key metrics: video starts per page view, and time spent. Since we wanted to make an objective decision for our users, we selected the clear top performer (shown above, red play icon). While, it may not have been the option I would have chosen from a pure aesthetic, subjective point-of-view, we prioritized clear communication.
Visible on CNN.com
In addition to implementing the update, we demonstrated to the larger core news team that we can learn, empathize, and execute meaningful improvements quickly. This inspired other teams to dig further using the same lens, and many of the same tactics.
