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

TYPOGRAPHY
INTERACTIVE PROTOTYPES
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
Primary
#FBCE07
Mozilla grey
Primary
#FBCE07
Mozilla black
Primary
#000000
Mozilla pink
Secondary
#FF8AC5
Mozilla peach
Secondary
#FF9AA2
Mozilla apricot
Secondary
#003C88
Mozilla lemon
Secondary
#FFEA80
Mozilla mint
Secondary
#B3FFE3
Mozilla lemon
Secondary
#00DDFF
DESIGN

Mozilla patterns

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

More Work

Fidelity

Base