mozilla.org

Heuristic Evaluations

When I joined Mozilla in 2021, one of my first tasks was conducting a Heuristic Evaluation of mozilla.org using Nielsen’s 10 Usability Heuristics for User Interface Design.

What I discovered was a fascinating reflection of Mozilla’s 20+ years of evolution — various strategies, changing priorities, and a mix of old and new content. Some pages contained outdated information but remained important as historical markers of the early web. Others were remnants of past marketing campaigns, no longer relevant but still findable.

To bring clarity and consistency, I documented all usability issues and shared my findings with the team. From there, I categorized them into fixable bugs and larger structural challenges that required prioritization. One issue that caught my attention was the inconsistency in interaction patterns; color, style, and pattern varied widely across mozilla.org depending on shifting branding and time period in which it was created.

Determined to improve the experience, I worked within our design system to standardize our patterns, ensuring a more cohesive, accessible, and user-friendly approach across both existing and future pages. This process wasn’t just about cleaning up—it was about preserving Mozilla’s legacy while making mozilla.org more intuitive and usable for everyone.

Iterative Design Process

For most projects on mozilla.org, I followed an iterative design process, ensuring that every solution was thoughtfully developed and continuously improved.

Teams across Mozilla would approach our team with a need or a challenge, and we’d start by discussing the best approach to meet their needs. I worked with my director and project manager to scope the project and define a timeline. From there, my process adapted based on the project’s needs:

  • If clarity and alignment were the priority, I focused on user flows and low-fidelity sketches to ensure everyone was on the same page.

  • If we needed a new page or component, I created high-fidelity mockups and prototypes to bring the vision to life.

At this stage, I collaborated closely with developers to plan implementation, discussing strategies, technical considerations, and potential challenges. If a new feature or functionality required validation, I would design and conduct usability studies, gathering insights to refine our approach.

Once a project launched, I tracked its performance through analytics, identifying areas for further optimization to ensure each update truly improved the user experience.

Information Architecture

During my four years managing UX for mozilla.org, I navigated major shifts in marketing strategy including rebrands, website redesigns, and the retirement of various products. Each change presented a crucial opportunity to refine the site’s architecture and navigation while ensuring users could always find the right product or information with ease.

I regularly conducted audits of mozilla.org, assessing how users navigated between our products. From there, I developed strategic recommendations to improve navigation and user flow, making it easier to showcase Mozilla’s offerings in a way that felt intuitive, engaging, and aligned with our evolving vision.

Site Navigation

Site audits and evaluations helped me identify opportunities to improve navigation and user flow, ensuring our content was clear, engaging, and effectively showcased Mozilla’s offerings.

After proposing new navigation structures or optimizations, I conducted user research to validate that key items were easily discoverable and had a strong information scent, guiding users smoothly to the content they needed.

Remote Collaboration

Mozilla is a remote-first company. Being remote-first meant that we always had access to diverse perspectives and had opportunities to collaborate with people from around the world. However, working remotely also presents challenges—especially when it comes to aligning teams and brainstorming at scale.

One of my favorite ways to bridge this gap was through digital whiteboarding. I used FigJam to map out proposed designs or navigation structures, providing clear instructions on how to collaborate.

I then shared the board with my team and contributors, gathering feedback both in real-time and asynchronously. While asynchronous feedback can be tricky at first, with the right guidelines, it became a powerful way to capture a wide range of perspectives—ensuring every voice was heard and thoughtfully considered.