The Mozilla Foundation Site

An editable site for employees to house and promote work of the Mozilla Foundation.

View the live site

Client

Mozilla Foundation

Role

UX/UI Designer

Year

Ongoing since 2018

The project overview

The Mozilla Foundation Site features stories, projects, blogs, and news related to the Web. It also showcases the work of Mozilla outside of Firefox including campaigns, fellowships, initiatives, and ways to participate in creating a healthy internet. For the past year, our Foundation design and production teams have been creating the Mozilla Foundation site to showcase the work of Mozilla along with relevant web-related news. The site began over two years ago with the intent to provide Mozilla employees with a more feasible way to post and contribute to the site and allow our audience to connect with Mozilla’s objectives and news related to a healthy internet.

My role

During 2018, Sabrina Ng and I updated the design of the site along with the brand materials and guidelines associated with the Mozilla Foundation. Updates to the interface allowed us to strengthen the Mozilla and Foundation brand. While auditing the previous 2017 design iterations, we felt that there was room for improvement in terms of the use of color, photography, typography, and icons.

In 2020, I was responsible for the interface redesign of the homepage. Taís de Souza Lessa and Rebecca Lam reviewed and redesigned the IA and created initial wireframes for the site update.

I also worked with the Fundraising and Email Strategist to improve and implement the email sign-up and donation features on the Foundation site. Our goals were to increase subscriptions and improve the sign-up feature experience.

The Mozilla Foundation works to ensure the internet remains a public resource that is open and accessible to us all.

Mozilla's guiding manifesto

The Mozilla Foundation site

The problem space

Prior to the Foundation site, Mozilla employees and community members housed their content, projects—and any related child or partner sites of Mozilla—independently. This made it difficult to gain a collective perspective of Mozilla’s work as the organization is much more than solely Firefox.

12+

the number of different sites hosted independently, but all related to the Foundation

30,000+

approximate number of unique visitors coming to the site each month

10

average number of monthly campaigns and initiatives Mozilla is promoting

70+

number of staff requiring use of the Mozilla site in order to upload their content

Audiences

As the site hosts many different projects pages and Mozilla initiatives, it was important to consider the varying level and kinds of audiences using the site. Much of the Mozilla audience originates from our emails and campaign work, along with fellows, community members, and persons searching for more information about the organization. As Mozilla is also a not-for-profit and non-profit, we researched various non-profit identifying organizations to better understand how they present their missions and work.

For the purposes of the landing page, we focused on new, novice, and returning audiences. New audiences may be coming to the site to find out more information about the organization and the work we do. A lot of our audience is also from Firefox or users familiar with Mozilla—but unsure of what current issues we are tackling.

Goals

1. Allow employees and Mozilla community members to easily create pages on the site depending on their needs (e.g. campaign, blog post, petition, information, etc.).

2. Showcase and house the work that Mozilla completes outside of Firefox.

3. Promote a movement around internet health by providing timely and relevant web-related news and content for our audience.

4. Improve the email sign-up features to attract new audiences.

5. Grow donations to the Mozilla Foundation.

Getting started

With a small team and many other projects on the go, we had to continually prioritize what was necessary in terms of features and branding or visual updates.

In terms of the interface updates, we wanted to balance the appearance of a news-related site with that of a non-profit organization. The initial 2017 design felt quite busy and color and type competed with the content within the site. Taís de Souza Lessa and Rebecca Lam (fellow UX designers working on the site) conducted qualitative user testing to determine people's struggles on the site. From their findings, we were able to better understand the current issues with the landing page and information architecture.

Brand and UX library

In order to streamline our design process and updates to the site throughout 2019 and 2020, our core design team collaborated on brand updates and a UX library housed in Sketch. I worked with Sabrina Ng to update and refine the Mozilla Foundation brand elements and provide illustration and photography guidance for visual integrity.

Design Methodology

The UX library was structured under the atomic design methodology. Once the library was created we then worked with our development team to set up CSS styling properties to be used across all our sites for brand cohesion. Further documentation of this can be found here.

Solutions

I was responsible for updating the design of the site and landing page based on the wireframes from UX designer Taís de Souza Lessa. It was important to consider the imagery, design elements, and the reading journey, as prior user testing showed that novice and new users were having difficulty understanding our work.

Usability updates

Language and navigation
The navigation and IA was restructured in order to provide more easily understood language for our audience. 'Who we are,' 'What we do,' and 'What you can do' were found to create an easier understanding for people wanting to find out more information about our work, leadership, and how they can get involved.

We also worked closely with the Content Team at Mozilla to establish the best language for each section.

Content Strategy
I structured the content of the landing page to include a main CTA with our latest campaign, then flow into our mission, what we focus on and then funnel further into the sections of News, Take Action, and Partnerships. It was important to have a variety of entry points into our work, as we have large and diverse audiences. We also wanted to showcase the scope of what the organization does.

Visual design
The design of the page was updated to include our new brand colours and updates to typographic styles. To reduce visual clutter, I removed rules and gradients and unnecessary elements.

Email sign-up

Within the 'Take Action' section, I added an email sign-up in order to allow users a low barrier task to getting involved with the Foundation.

Our email list has a yearly ask for donations to the non-profit, so it was significant to make this more prominent on the site.

Donation CTA

After the user scrolls through the page to find out more information, they are able to make a donation to fund the work we are doing.

Measurable results

After the updates of our IA and the landing page, the Mozilla Foundation saw measurable improvements in:

  • 10% reduction in our bounce rate from November 2019 of last year
  • 8% increase in users visiting multiple pages
  • 50% increase in campaign page creation by our staff—which means a doubling of our audience reach for campaigns
  • 9% increase in End-of-Year donations to the organization

Learnings and next steps

  • We are currently in the process of adding the changes to the site in the last few months of 2020.
  • Next steps will be to update the visual design of the other pages to align with the homepage.

 

Next Project  →

Using Format