The design team at the Mozilla Foundation is Nancy, Rebecca, Sabrina, and Kristina 👋 . We are proud to be a tight knit, all female, remote team of multidisciplinary makers. We love everything design — from research and UX to UI, colours and typography, branding, marketing and social media. We strive for our work to reflect an open and inclusive ethos. Design at a nonprofit is different from a startup or tech company. Mozilla Foundation is building a movement for internet health. A diverse set of staff, partners, and volunteers working on programs to ensure that AI in consumer tech enriches the lives of human beings. Design plays an important role in visualizing our work for these many programs and initiatives. We inspire people to take action alongside us and enable our supporters to use our digital products to share their work and organize in their communities. We face unique challenges and constraints, with unique opportunities and areas of exploration. For this reason, we are sharing some of our lessons and learnings from 2021.

Project: YouTube RegretsReporter

Mozilla has been raising the alarm on the dangers of YouTube’s video recommendation algorithm for years. We’ve advocated for them to disclose how their AI system operates and enable independent researchers to study their systems so they can flag biased, polarizing or destructive patterns. In the face of YouTube’s constant resistance to openness, Mozilla built RegretsReporter, a Firefox and Chrome extension that turns YouTube users into YouTube watchdogs, enabling them to donate data about their YouTube recommendations to Mozilla researchers. In 2021, Mozilla published its findings.

Context

It is an extremely important issue that influences not just people's viewing habits but also how their worldview is influenced/reinforced by the videos they watch. Many millions of people watch content on YouTube everyday but understanding how the algorithm works is complex and highly technical so people feel unsure about the degree of agency and control they have over it or what they can do about it. Our goal at Mozilla design is to make the underpinnings of the internet tangible and relatable to our audience through metaphors and human elements. In this case, our design work has helped people, and policymakers, characterize how the algorithm is going awry.

Our Approach

We sought an appropriate visual metaphor for an algorithm that people may think is 'intelligent’ but is actually quite chaotic, leading to the problems our campaigns highlight. After exploring several directions around the theme of “feelingless automation” we landed on the metaphor of a factory, with viewers on the assembly line. The line moves on, in accordance with its own goals, conveying people from video to video, with little regard to their humanity or agency. The visual metaphor helped to quickly portray the research findings on our report page.

Impact & Learnings

• The average time spent on the findings webpage is 3:57 minutes which indicates people are reading the entire page.
• The campaign was recognized by the Shorty Awards, winning an Impact Award in the Grassroots Efforts category. The findings received 175+ stories in the press, 2,902 mentions online and 2,696 engagements with social content.
• Our collaboration across product, design, engineering and campaigns/policy/research yielded lessons around emerging internal needs for more robust page templates that could feature our important research work, and bridge to action. Based on this we are in the process of evolving this custom build into a CMS-editable design.

Project: *Privacy Not Included

*Privacy Not Included is our buyer’s guide for internet-connected products. Mozilla researches hundreds of products and apps, delving into their privacy policies and public documentation, and peppering companies with questions so you don’t have to. *Privacy Not Included gives readers a fun look into how products, platforms and services protect your privacy and identity online - or don’t. It’s an evergreen product that is continuously updated, with traditionally 1-3 guides released per year.

Context

While we produced some extremely popular updates to the guide in 2021 (a dating apps & sex toys guide for Valentine’s Day, and a refresh of our acclaimed guide to video call apps), with the growth of the guide (reviewing 100+ more new products in 2021) we knew wanted to take a step back for our marquee November “holiday guide” edition to ensure we were in fact listening to our audience responding to their needs. Through user testing, some insights emerged:

• Supporters wanted more actionable advice to make better decisions
• Supporters didn’t understand how products were organized on the homepage
• Supporters had trouble searching for products they were looking for and how the search worked wasn’t clear to them
• Supporters thought it was an online store or wasn’t sure what the site was for
• Supporters wanted to know how products were reviewed to understand how credible and reliable the information is

Our Approach

Based on the growing number of products on the site and audience feedback via our user testing, we prioritized improving scannability of product information, search usability, and improving the information architecture.

1) Scannability: We put in place a number of UX interventions to enable supporters to easily find what they were looking for, navigate around the site, and use the site more effectively.

• We added category tabs to act as “breadcrumbs”, helping supporters move through our site and navigate to points of interest.
• We reduced complexity by collapsing criteria questions into tabs, removing walls of text and surfacing criteria that would be most relevant to a supporter.
• We added a slew of typography updates for scalability, and worked with the content lead to articulate a content hierarchy.

2) Search Usability: We worked with our engineering team to create global product search across the site (vs page specific) - and added the search bar to a place of prominence in the top banner - reflecting how most users would want to interact with the site.

• We developed category tags and enabled category filtering, helping supporters navigate and find products easier.
• We enabled link sharing for specific categories so readers could share entire categories of products externally.

3) Information Architecture: We revised and improved interactions related to the Guide, making it more navigable and ensuring important touchpoints (like our about page, which provides important rationale and framing for *Privacy Not Included, and important/actionable info on product pages) were easy to find.

The Impact

The Privacy Not Included holiday guide was, again, one of our biggest website traffic drivers of the year. We ran an additional round of user testing after our updates too which validated our assumptions - supporters understood better what the site was about, and felt supported by context.

A robust retro process yielded some important learnings that we’re going to carry forward into future work:

• User testing before and after the updates to PNI enabled us to rapidly see the impact of our design interventions.
• We began the project early, but also kicked off collaborative processes, tools and rituals early - enabling us to ensure steady pacing for the project team, and got buy-in and alignment early for changes.
• We’ll require ongoing investment on content strategy and structure as the site will continue to grow and expand.
• Working on mobile-specific features is a must given the large percentage of our traffic coming from mobile devices.

Project: Shifting from an internal service agency model to coaching and empowering colleagues

Context

Design at Mozilla lives on the Digital Engagement team. With the evolution of Digital at the Foundation over several years, Design took on a unique, but increasingly unsustainable role in the overall volume and diversity of tasks. Not only did we have to take on versatile design tasks from product design to rapid response graphics to IRL event signage and wayfinding - we also acted as project leads, product managers, and engagement strategists.

Our Approach

We saw that the way we were positioned in the organization was creating a disproportionate dependency on us to move a whole range of projects from different teams forward. We were working extremely hard, yet felt we were a bottleneck to our colleagues. To address this, we took a realistic look at our capacity, and with the support of management and other teams, rolled out three approaches:

1) We focused on work that empowered internal creators to quickly put together compelling visuals themselves:

• We created a roadmap of CMS components for our Wagtail instance that would enable creators to build more visually impactful landing pages, with full-width images, video and audio embeds.
• Demand for visuals for research reports (traditionally released as PDFs) increased - we designed a CMS template that would work for short to 100 page reports, enabling staff to create multi-page, content-rich, SEO-friendly publications directly on our site (more on reasons to avoid using PDFs.)
• We moved staff away from a reliance on Google Forms to engage with supporters, instead building out several templates for Typeform, and working with developers to enable Typeform embeds on pages in our CMS.
• We saw a need for directly-editable/creatable infographics and charts, and added support for data visualization with Datawrapper.
• For less complicated graphics and visuals, we supported our social team to use tools like Canva to create content themselves. We built a Library of Rapid Response Graphics in Google Drive so staff could source imagery to accompany their content directly.

2) We created documentation and user guides to support creators, and streamlined processes for working with us:

• We created a library of CMS streamfield blocks and page types
• We opened up our process with How to collaborate and work openly with us and Our UX/UI process
• We crowdsourced an approved list of contractors with increasing consciousness about diversity of region, race, and culture
• We developed documentation to improve processes in working with developers. (e.g. Pre-launch Checklist & Design & Dev Meeting Notes Template)

3) We decentralized visual design to a loose collective of aligned external contractors:

• We saw an increasing demand for visuals to support content - often this was rapid response or quick turnaround work that pulled designers off other projects and required context switching. To address this we:
  • Systemized and “productized” common requests, enabling us to collaborate on them more quickly. We’ve done this for both visual design requests like for marketing, social media, and graphics for our website, as well as for our website and its CMS capabilities.
  • Set up systems and processes to support the onboarding and retention of a growing roster of freelancers and creators who partner with us on the development of content.
• For example, in 2021 we collaborated on a video series Mozilla Explains. We worked with the producer to establish a style guide and consistent intro, outro, and bumper animations that external contractors could apply to each video without our involvement. The producer was then able to work with a range of editors and videographers to create finished products that adhered to our standards.

The Impact

Last year, staff created 870 new pages on our website and our site had over 3 million page views. Our work to empower colleagues is an ongoing initiative, however coming into 2022 the Design roadmap at Mozilla felt much more sustainable and manageable - we’re proud of the systems and tools we’ve put in place for our colleagues.

What’s next?

The above projects represent a small portion of the work Design collaborated on this year - thank you to our team - Nancy Tran, Rebecca Lam, Sabrina Ng, Kristina Shu, and all of our collaborators! Collectively we learnt a ton from our work this year, and we’re excited to take those learnings into projects this year:

• Publications: We’ve worked to move staff away from putting out reports as PDFs, as using our CMS template instead, and this has had great response - 8 publications were released on this template last year, with more lined up this year. We’re continuing to add features and customizations to the template, with different hero layout options, accordions, content sliders, and friendlier navigation.
• Blogs: Between staff across several programs and our network of Fellows, leaders and thought partners, our blog is a hugely popular internal tool. We’ll continue to add user-focused improvements like search, dynamic category pages, and action call-out templates.
• *Privacy Not Included: Building on our findings from launching this year’s holiday guide, we’ll be rebuilding the home page of Privacy Not Included to become more editorial-driven. We will make feature content rather than product reviews, the focus, highlighting curation and opinionated editorial that will support the credibility of the guide and connect it better to our broader mission and vision.
• Enduring metrics: As designers, we constantly seek to understand the impact of our work, and how effectively it supports the advancement of Mozilla’s mission. This year we’re pegging key design projects against a wider set of common KPIs that the wider Advocacy and Engagement teams are putting in place - for the first time cross functional teams will have common ground to assess impact.

We look forward to our continued learning - if you’re interested in collaborating more with us, reach out to Kristina at [email protected]