Firefox Homepage

  • UX Design
  • UI Design
  • User Research

When I joined Mozilla one of my first asks was twofold: 1) explore ways to improve the download experience for our users and 2) look at opportunities to increase our session to download ratio.

Most of our users are coming to our browser download page via search; not through our site navigation.

Before this redesign, the /new page consisted of a hero section and three content buckets whose content cross-promoted other Firefox products. I learned through our analytics that the majority of our users were landing on this page directly from search results. Users were not discovering this page through our navigation or any other page on the site. They were landing here cold, without any prior or contextual information about the browser.

Annotated Page Design Wireframe with specific feature callouts.

Over several weeks I worked with a data analyst to help draft a testing framework that would help us iteratively test the page design while carefully monitoring changes in download numbers. A series of user tests helped me understand which features our core demographic seemed to respond most positively to; which features mattered in their decision making process.

The redesigned page was going to be significantly longer that its predecessor, and we knew from prior research that users often lost steam as they moved down the page. With the help from our copywriters, we tested our way to performant headlines for for each section. These headlines were more effective at drawing the user down the page and keeping engagement up as they did so.

Finally, the new page was comprised of distinct feature sections, each with a theme: new features, key features, performance related, privacy related, and a competitor comparison section. Several testing rounds were conducted to determine which order of sections was the most performant without sacrificing the overall pacing and brand narrative of the page.

Brand elements were used strategically to draw attention to key content that we new from testing interested users.

Once we had the pacing, composition, and section order of the page locked, the brand language began finding its way into the page design. Our "Noodle" shapes had proven effective at generating interest, so we began using them as a background element layered behind content that we knew, through user testing, was important to users.

Our brand Noodles lent themselves to creating novel moment where lifestyle photography and brand language could intersect.

What makes Firefox unique from its competitors is its dedication since day one to user privacy and security and its corporate structure: its parent, Mozilla, is a company owned by a not-for-profit, the Mozilla Foundation. This is the throughline of all our products, and it's something that all our users respect and find unique. It's also a key part of our brand story and, as such, deserved to be included in our new download page. A section that talked about our history, mission, and dedication to privacy was accompanied vignettes of people that combined a nod to the human side of our technology with the playful shapes of our brand's design language.

The hero section is the initial entry point that most users have with our brand before choosing to download.

Hero sections are quite the norm on most marketing sites. It's a macro-pattern that been applied ad nauseam. And for good reason: their structure is familiar to most users and they work. Product logo, primary headline, image of product, and a primary call-to-action. Et voilá. Ours is no different. However, given that most users end up here directly from search this is also most likely their first introduction to the brand. It was important that, while not deviating too much from the norm, we introduce a few key brand elements that would not only set the stage for the rest of the page, but also leave an impression. The use of our brand noodles as a background element to frame our browser and the inclusion of the Zap to emphasize a key position did just that.