Skip to content
Twenty Nine

Brief

Create a home on the web for Mozilla Design. It should highlight the design program across the Mozilla and Firefox brands.

Solution

We created a site that was recognizably Mozilla but still flexible enough to accommodate their different brand systems. We positioned the site to publicly speak to Mozilla’s commitment to keeping the web free and open, while also being a practical resource for their globally distributed design teams.

Slowly moving shapes in the Firefox brand colors

Research driven design

To understand Mozilla’s relationship with the design community, we surveyed a range of designers and technologists about their perceptions of the organization.

Hero animation from the Firefox brand landing page, with the headline ‘Firefox brand’ over an orange-to-magenta gradient.
Hero animation from the Mozilla brand landing page, with ‘moz://a brand’ wordmark over a glitched red-and-blue waveform background.
Mobile screens of mozilla.design, showing Firefox brand, brand-blob illustrations, and the Mozilla brand introduction page.
Result panels from the Mozilla designer survey, showing word clouds, a pie chart, and quoted single-word responses.
mozilla.design Resources page, with a centered ‘Resources’ headline and large tiles for Protocol and Photon design assets.
Visuals section of the Firefox brand site, with a colorful composition of overlapping blob shapes and a section index of brand topics.
About section of the Firefox brand site, with the headline ‘From Browser to Parent Brand’ set in purple gradient lettering.
mozilla.design homepage tiles for Firefox brand and Mozilla brand against a glitched red-and-blue waveform background.
Screens of early explorations in the design process

Efficient by Design

Early in the process, we explored editorially driven directions that borrowed from the visual language of ‘default internet’. In the end, though, we settled on a fast and efficient site for centralizing design resources for Mozilla’s distributed design team that would itself be representative of the brand’s design language.

Validation

Related Projects