Firefox New Tab

Creating a modular content presentation system for recommended stories on New Tab.

  • 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, but had the following limitations:

  • Fixed layout with limited editorial control
  • A single-ad unit in a fixed position

Prior version of Firefox New Tab.

Objective

Increase content engagement and ad revenue 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 layout grids.

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. Our findings indicated that users were drawn to the contained card format and simple layouts.

Phase 3: Quantitative Testing

We tested permutations of four top section and four bottom section formats, 16 layouts in total. Each permutation included at least 3 ad units. Key success metrics for the test were content and ad engagement.

Top Section Variants

Bottom Section Variants

Findings

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

Top Section

These top section variants were better at getting users to scroll down the page.

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

Bottom Section

These were the top performing bottom section layouts.


Launch and Learnings

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

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

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