Firefox Browser

Role: Head of Design
Year: 2019

My responsibilities

As Head of Brand Design at Mozilla, I led the team in redefining Firefox’s visual identity, ensuring consistency across all touchpoints. A key focus was the Firefox Browser landing page—a high-traffic entry point designed to drive downloads through clear messaging and compelling visuals. I guided the team through the process, integrating user insights at every stage to validate decisions and minimize risk, ensuring an effective and engaging final experience.

The Team

Jennifer Rouse - UX Design Lead
Mark Weaver - Brand Design Lead
James Dybvig - Motion Design
Rob Antley - Copy Writter

Project context

The Firefox browser is the flagship product for Mozilla, and the desktop browser download page is the key page of the website. Any updates to the page had to be approached with caution, knowing that the smallest change could make a big impact, positive or negative, on user needs and business goals.

What we knew

This page performed well for non-Firefox users who already wanted to download the browser, but it didn’t do anything for those non-Firefox users who needed more information before making an informed decision. Nor did it help current Firefox users learn anything new about what the browser had to offer. It was also clear that this page needed SEO optimization.

Previous Design

Process

Reserach

Research & Insights

Our process began with a deep dive into the current user experience, analyzing data to uncover what was and wasn’t working for both Firefox and non-Firefox users. We studied user behavior, engagement metrics, and SEO performance, collaborating closely with the SEO team to develop a solid hypothesis for improvement.

To ensure Firefox stood out, we conducted a competitive analysis, identifying effective strategies from competitors and exploring how we could create a more compelling and uniquely Firefox experience.

User Testing

Our priority was user-centric design, so we ran a series of qualitative tests to understand how non-Firefox users perceived our landing page compared to competitors. This research highlighted key elements that resonated with users and areas for improvement, guiding our design decisions.

Tested 9 non-Firefox users on both the current and redesigned landing page.
Tested 10 non-Chrome users on our page.
Tested 10 non-Brave users on our page.

These insights helped us refine our approach, ensuring the final design effectively engaged new users and reinforced Firefox’s unique value.

Whats Working

👍 Bright colors are appealing
👍 Easy to download
👍 Message focusing on privacy

Whats is not Working

👎 Lack of information
👎 Hero image is confusing
👎 No clear reason to switch
👎 Users were confused about what is a feature of the browser and what is not

Areas for improvement

The page primarily catered to users already inclined to download Firefox, lacking persuasive information for undecided users.
Did not provide enough differentiation for users on the fence—no strong reasons to switch.
Lacked essential keywords and phrases that users search for when looking for a new browser (SEO optimization needed).
Content breadth did not match competitor pages.
Hero image was unclear and led to confusion.
Users struggled to distinguish between core browser features and other information presented on the page.

User Experience

After extensive research and testing, we moved into wireframing and content strategy, ensuring a seamless experience for all users. Our approach focused on:

Minimizing friction for users who arrived with the intent to download Firefox.
Guiding new users by providing clear, relevant information to help them make an informed decision.

This foundation set the stage for a landing page that was both intuitive and effective.

Design Iterations

With a solid UX and content foundation, we transitioned into visual design and copywriting, focusing on clarity, engagement, and performance. Throughout the process, we:

Ensured accessibility compliance for an inclusive experience.
Optimized design and copy in collaboration with SEO experts.
Refined through iterative testing, making data-driven adjustments with the design team.

This continuous feedback loop ensured a polished, high-performing final page.

The Finished Product

After multiple rounds of qualitative testing and refinement, we conducted a quantitative A/B test to validate the new design’s impact on download and install conversion rates. Once the results confirmed success, we rolled out the new landing page to all en-US users.

This case study showcases our iterative, user-focused approach to optimizing Firefox’s landing page—delivering a seamless, engaging, and high-performing experience for potential users.

The results

At the time when I left Mozilla, it was still too early to measure the full impact of this redesign, but the results so far were promising. Our final round of qualitative testing showed that users not only discovered new insights about Firefox but also expressed a higher intent to download compared to previous tests. Additionally, we've seen a 10% year-over-year increase in installs from non-Firefox users, a trend we expect to continue improving as the page gains traction.