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.
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.
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.
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.
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.