Dair Massey
Product Designer

Cheat Sheet

The Cheat Sheet

Skim This. Skip That.

 

The Cheat Sheet originally emerged as an innovative digital product, presenting a concise, curated collection of ten insightful paragraphs. These "Beasty" takes offered a fresh perspective on global news, each accompanied by a link to its original source. The debut of The Cheat Sheet was marked by a streamlined one-pager featuring ten meticulously selected paragraphs, setting a high standard for content curation. However, recognizing the evolving needs of monetization in the dynamic web space, The Cheat Sheet underwent a strategic transformation outlined below.

 

My Role:
User Research, Stakeholder Alignment, Wire framing, Interaction Design, Visual Design

Platforms:
Web, iOS, Newsletter

Tools:
Figma, Sailthru, Piano

Team:
Executive team, Director of Product, VP of Engineering, Newsroom, VP of Analytics, Ad Operations

 

KEY PERFORMANCE INDICATORS

Understanding The Requirements

I worked with Product and Analytics to understand the KPIs that we were trying to improve. We jotted quick design takeaways for each section.

  • Increase Pages Per Visit
    Entice scrolling and or a second click 

  • Increase Cheat to Article Views
    Review Recirculation and scroll components

  • Increase Value of Session
    Review ad density layout and sponsor placement

  • Introduce Commerce Posts
    Determine ideal list order

 
 

USER RESEARCH

Who We Were Solving For

Loyal Scrollers
Stats: 13% of Users | 4 Pages per Session
Origin: Homepage or Newsletter
Primary Contributor to Partner content due to scrolling and list familiarity.

Direct Bouncers
Stats: 87% of Users | 2 Pages per Session
Origin: Social, Yahoo, Flip-board, Google News, Apple News
Primary Consumer of pages and most likely to bounce after reading what they came for.

 

Heuristic Evaluation

Reviewing The Status Quo

No Convenience in the time it takes for users to consume content.

Lack of Contextual Cues around utility of the product for unfamiliar users.

Missed Revenue Opportunities in layout and the organization of ads on the page.

We brought up that our newsletter product gave the entire excerpt and suggested testing out a description only solution.

Key Insight: description replacement in newsletter would drive a 300% improvement in click through rate from the newsletter to the site.

 

Screenshot of page to be updated. Served over 3 million users a month.

 

from Data Hunch to Data Insight

Revisit Loyal Reader Behavior

To understand user behavior around the list, I examined an old scroll depth map of the previous homepage version. Unfortunately, the new homepage lacked this tool, so I had to improvise. 

Collaborating with a colleague in ad ops, we discovered that users reached the 300 pixel scrolling threshold for loading the ad. However, almost 5% of users were leaving the page before scrolling to the ad positioned below the list.

Key Insight: Scannable lists influence user scroll depth factoring into both the 1.5x bump in page views and 2x bump in ad impressions.

Left: Homepage v1 scroll map. Right: Homepage v2 home brew scroll map.

 

Competitive Research

Surveying the Landscape

For Mobile, utility branding and contextual clues, like numbering, were crucial to give user context that they were experiencing further into the product. Floating action buttons and progress indicators served as great way finding tools in popular design systems.

For the Desktop, left gaze-bias and f-pattern concepts fueled how I would go about shaping user experience to introduce the product’s audience to a scannable context rich experience. ESPN, Google, and other publishers provided a great foundation to start building wires on.

Not all concepts would see wires but all served as tools to build a share knowledge amongst colleagues across the organization.

 

Wire Framing

1. Rudimentary wires to Review Functions, Features, and Monetization.

2. Annotated wires for Pros, Cons, and References.

User Interface Design and Execution

Leveraging Patterns to Build Results

By tapping into internal and external conventions, we designed an experience that allows users to skim and dive deep into content at will, while increasing impressions, viewability and inventory of the Beast’s ad offering.

Page Performance:
1.5x Page View Increase on Desktop
1.3x Page View Increase on Tablet
1.1x Page View Increase on Mobile

Ad performance:
2x Overall Impression Per Session
1.3x Ad Inventory Increase