Stories on Firefox New Tab

Creating a modular content presentation system.

  • User experience
  • prototyping
  • user testing
  • Experiment Planning

Background

The new tab on Firefox has four sections: Search, Top Sites, Recommended Stories, and Highlights. This project focused on Recommended Stories.

Content in this section was presented as cards in a three-column grid. The default layout was a single row of cards with a periodic ad unit in the third column. Users could choose to see up to four rows of content via settings.

The original layout was a hit with users, however it had limitations…

  • Rigid grid layout with limited editorial control
  • A single-ad unit in a fixed position
  • Only one format for cards

Objective

Increase content engagement and revenue opportunities by showing more content on the new tab.

Product Requirements

  • Create a flexible layout system
  • Support multiple ad placements and formats
  • Support different content types

Stakeholders

  • US Firefox Desktop Users
  • Pocket Editorial Team

Iterating and Testing

Phase 1: Setting the Foundation

We adapted the existing three-column grid and card design to create three grids and a set of cards that differ in size and content configuration. These elements would be the foundation of the layouts we tested with users.

Base grid units.

Sample layout permutations.

Early lofi content module wireframes.

Phase 2: Qualitative Feedback

We used the modules and grids above to generate a set of exploratory layouts. We showed these layouts to a sample of Firefox users to get a sense of what elements resonated with them.

Phase 3: Quantitative Testing

Our findings indicated that users were drawn to the contained card format and simple layouts. At this point we felt confident enough to switch to quantitative testing. Our plan was to test permutations of four above-the-fold and four below-the-fold formats, 16 layouts in total. Key success metrics were content and ad engagement.

Above-the-Fold Variants

Below-the-Fold Variants

Findings

Showing more content in the new tab overall increased the frequency of clicks-per-session in every non-control variant.

These above the fold variants were better at leading users down the page to engage with below-the-fold content.

The hero variant showed the best overall user engagement with content.

These were the top performing below-the-fold layouts.


Launch and Learnings

The new layout system produced a 32% increase in overall engagement.

Reader Feedback

I use firefox and it has this thing where every day when you open a new tab it shows neat little articles and I've been seeing a lot of self-worth articles lately and it's been really reaffirming

—@secondubly

@Pocket shows rec'd articles in my new tabs, I love it…

—@randfish

Advertiser Feedback

Firefox has given us a new scalable channel that achieves the CPA we are looking for, and we are excited to be aligned with the brand.

—VP of Marketing, Arcadia Power

We've seen surprisingly high ROIs and had a great experience working with the dedicated team monitoring performance daily and assisting us with scaling the campaigns.

—Growth Development, Lemonade