Hearst: A/B Testing

A content testing tool that runs a combination of headline and images in real-time to users. It measures click-ability and share-ability, so editors can deliver the most effective articles to their readers. (Cosmopolitan, Elle, Seventeen, Good Housekeeping, etc.)


DEFINE

The testing system was going to launch within an article in the Hearst CMS. Hearst Digital and Emerging Tech teams diefined a workflow for the tool. I drafted and iterated on the workflow from our collaborations.


DESIGN

To display an article’s clicky-ness and sticky-ness, I created a series of graphs that would display on the top of a test article. In the end, as a general conses we went with the last graph (raw data) as it had the most insight for an article.

Hearst’s CMS was responsive with an existing design library. Using the current patterns, I added modifications specific to the A/B testing tool. I created high fidelity mocks, since the patterns were readily available. Below shows creating a test article from the article, and pushing it live.

Hearst-ContentTesting-Mobile.png

Once the mobile mocks mimicked the workflow, I designed for desktop.

Hearst-ContentTesting_create.jpg

ADD TO PATTERN LIBRARY

New patterns were shared across Hearst and added to the design system.


Project

A/B testing tool for Hearst Content

Goal

Add a new testing feature for articles in the Hearst CMS.

Timeline

2015–2016

My Role

Interaction Design