Mozilla

A dev portal for all things dev Mozilla can offer

Services:

Product Design

Year:

2019

Link:

mozilla.dev

Project Summary

Project Overview

The Challenge

The Process

User Research

Information Architecture

Design

PROJECT OVERVIEW

The Mozilla way

The Mozilla brand pledges for open, global and healthy internet. The brief for this project was to design a new home for all things dev that would eventually replace the popular MDN (Mozilla Developers Network). For the dev community, MDN has always been the first go-to destination for everything web development related.
THE CHALLENGE
The new mozilla.dev design not only had to align with the Mozilla visual language but also make also to make sure the new design doesn't feel disconnected from the old MDN. The majority of the audience was coming from MDN or organic search.
Part of the task was to design components and templates for the topics, events, profiles, news articles currently hosted on MDN.
THE PROCESS
The project kicked-off with a workshop with the involvement of some senior stakeholders from Mozilla HQ. There have been discussions around the strategy for the project, UX requirements, timeline, design direction and vision, and the development phase.
Our team consisted of: 2 UX/UI designers, 2 front-end devs, 1 back-end dev and a project manager.
The team worked in 5 days sprints with the workload being divided in tasks and monitored on Gitlab.
USER RESEARCH

Validating the assumptions

With a set of assumptions brainstormed during the workshop, the next logical step was to validate them by interviewing some of our future users.
Together with a moderator a set of interviews has been organised with developers to understand the behaviour when searching for web developments topics and articles. All the answers have been cumulated in themes and to highlight common patterns.
INFORMATION ARCHITECTURE

Guiding the user step by step

The website navigation has been designed in a simple and linear way. The main entry points were easily accessible from the homepage or top main navigation.

Design system

THE FOUNDATIONS
Being an established brand the project typography and colour palette had to align with the Mozilla brand guidelines. The Mozilla official typeface is Zilla Slab.This has been used in combination with the Inter font for the body copy text.
Together with the colour palette and design components this has set the foundation for our design system for the project.
TYPOGRAPHY
MOZILLA COLOUR PALETTE
Mozilla white
#FBCE07
Mozilla grey
#FBCE07
Mozilla black
#000000
Mozilla pink
#FF8AC5
Mozilla peach
#FF9AA2
Mozilla apricot
#003C88
Mozilla lemon
#FFEA80
Mozilla mint
#B3FFE3
Mozilla lemon
#00DDFF
DESIGN

Mozilla patterns

A set of patterns have been designed that matched the Mozilla brand visual language.

Product growing faster than the design?

Time to catch up. Let's chat.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

While you're here…

A few more projects worth a flick through

AuumAI

AuumAI is the first agentic AI platform built exclusively for institutional investors — automating the end-to-end workflow that LP investment teams use to source, diligence, select and monitor fund managers.

Learn more

Diriyah

A bespoke iPad app experience that equips Diriyah's sales team to walk clients through one of Saudi Arabia's most ambitious giga-projects. Combining Unreal Engine environments, live unit availability, and a luxury-grade design system across every district.

Learn more

Shell Settlements: optimising the Life Cycle of a Deal

A high-performance operational dashboard designed to unify Shell’s fragmented energy trading back-office.

Learn more

Junction — PwC Deals Platform

Designing a cloud-based deals platform that brings AI-powered analysis, real-time collaboration, and live financial insights to PwC practitioners and clients across 27 countries.

Learn more

Regus.com - a flexible workspace experience

De-cluttering complex user journeys across a global portfolio of workspace solutions, making it easier for diverse business clients to navigate, discover, and commit to flexible office products.

Learn more

Amarula: unifying a global "Free Spirit"

This digital overhaul focused on consolidating Amarula’s fragmented online presence into a single, high-performance global flagship.

Learn more

Fizz Social: scaling an authentic social media app

This initiative focused on evolving the Fizz iOS platform from a localised messaging app into a feature-rich community ecosystem tailored for university environments.

Learn more

Fidelity: navigating the career architecture

This initiative focused on the digital transformation of Fidelity International’s internal career mobility, replacing a fragmented framework with a structured Career Pathway Blueprint.

Learn more

TPT Pensions: modernising the employer management portal

This initiative focused on the end-to-end digital transformation of TPT’s employer portal, shifting from a manual, complex legacy system to a streamlined self-service management hub.

Learn more

Mozilla: evolving the global developer ecosystem

Transitioning the renowned Mozilla Developer Network (MDN) into a new, unified home for the global web community: mozilla.dev.

Learn more

BT Business: a content-led digital experience

This redesign focused on turning the BT Business "Insights" platform into a more engaging, editorial-style destination for the UK business community.

Learn more

Bastion.AI: powering AI-native investment research

Bastion AI platform has been built to help investment teams cut through market noise and scale their proprietary research..

Contact for details