Mozilla Developer Network (MDN) Website Design Brief

Project Goal:

Create a new identity for our developer communities by redesigning the current http://developer.mozilla.org (MDC) website to help establish the new Mozilla Developer Network (MDN) brand.

Project Background:

Our current MDC website is primarily used for developer documentation, including info about browser features and web technologies, as well as news and tutorials for developers.  A lot of the content is new, but the model for MDC was the old Netscape Dev Edge website that was built over many years at Netscape in the 1990s and was a very popular resource for web developers and open source developers contributing to the Mozilla project.  Over the past few years, we have added developer notes for Firefox releases, contributed web standards specs, and provided the latest developer news from around the Mozilla community on MDC. 

While we plan to retain those documents as a valuable resource for our developers, we want the new website to reflect the growth of Mozilla's product offerings and the diversity of our developer segments, which now include Web, Mobile, Firefox, Labs, and other niche communities within the Mozilla project.  Instead of just developer documentation, we are moving to a place where we can address the immediate needs of new visitors and point them to the information they will find most useful.  We also want to establish a new home for Mozilla's developer marketing efforts and provide a channel for sharing key messages and promoting various campaigns and initiatives that impact developers.

The new brand identity should reflect the open Web and community spirit that Mozilla represents, but also resonate with a more tech focused audience that includes a diverse set of developer segments. 

Project Scope:

This is a complete website redesign - all elements of the current site are candidates to be changed, removed, rethought, etc.  The goal is to NOT look like a simple wiki-based website with a custom header, but instead to create a unified look and feel without sacrificing the ability to use any given wiki or cms framework to create, organize, and manage information throughout the site.  Therefore, it is crucial that all graphics and visual elements be created with a modular layout in mind that is still aesthetically pleasing, user friendly, accessible, and localizable.  We should integrate our new MDN logo into the site design so we have a well coordinated web presence that represents our developer community.   The overall scope will be 10 pages that share the same visual style, but reflect the unique nature of the content and sections outlined below, which we can accomplish through illustrations, icons, and other images in the appropriate places.

The pages we need designed include:

All other pages we may create in the future will be able to borrow from the general layout and style of any of the pages above.  In terms of content, a lot of it is already hosted on the current site, and will be reorganized to fit the new website design in the appropriate places

Target Audience:

The new MDN will be a resource that brings together various developer communities within the Mozilla project.  It will provide a platform for developers to learn, share, and collaborate.  Given Mozilla's current goals and initiatives, we have segmented the developer audience into 4 major groups:  Web developers, Mobile developers, Add-on developers and Application developers.  While some of those groups will share resources on MDN and have similar needs, we want to be able to provide a flexible network of pages and mini-sites within MDN that cater to each of them individually as well.

Primary: Mozilla Developer Communities

Secondary: Mozilla Marketing, Tech Evangelism and Documentation Teams

Brand Direction:

We want to be the destination for everything developer related within the Mozilla project, but also for the open web that we strive to keep open and collaborative.  The MDN brand will serve to unify our diverse developer communities and represent the innovation we bring to the world through the people, products, and technologies that define Mozilla.  The MDN website and brand needs to be established within the broader Mozilla community and this is a huge part of that plan.

While many of our developer communities have their own identities and websites, we want the MDN brand to serve as the foundation that will allow us to tie them together.  Once the MDN is more recognizable and accepted within the Mozilla organization and our community, we can consider rebranding other sites or migrating to live under a single MDN portal.

For more context, here are some thoughts on authenticity and values when it comes to Mozilla and our brands:

Advertising legend Dan Weiden has said "Authenticity comes from having a real passion for the thing," and nearly everything about the way Mozilla operates exudes a genuine passion for the internet and the principles we espouse. Throughout our history, one of Mozilla's greatest strengths is that we've remained true to these core beliefs, which gives the Firefox brand a degree of realness that many other companies would gladly pay millions for (the irony being, of course, that such street cred can't be bought at any price).

Other core values of the Firefox brand include:

Website Design Direction:

We want to create a completely new MDN website that can stand on its own next to our major web properties for Mozilla and Firefox, while at the same time reflect the strengths and values of both brands in a unique way.  The MDN needs to be fairly independent and universal to the web, but should clearly have Mozilla DNA.  With so many names, logos and website designs out there for our developer communities, we really need to create a website that resonates well with our diverse developer segments.  This means clean lines and simplicity where possible to help them find and digest the information they need, but enough variety in the appropriate places to give each segment their own space within the MDN. 

The MDN will represent many people and programs, but we want to focus on how it will impact our relationship with developers, our competitors, and the press.  We hope the new MDN identity and website redesign will help us share all of our accomplishments with the world and create new channels to communicate and collaborate with the developer community.

Given our audience, we want to stay away from the consumer design approach we have taken with mozilla.com and spreadfirefox.com, but don't want the site to look as plain as the current developer.mozilla.com.  The challenge is to find a good balance to combine the clean interfaces that developers expect with some marketing friendly design touches that will work well for new visitors and non-technical community members.  While illustrations will be helpful, layout and user interface will be even more important.

We want something with a little edge to represent our focus on innovation and moving the web forward.  It will also be nice to build on the Hack art from the early days of Mozilla.  While we don't expect the MDN identity to be created from a remix of existing assets, the dino head, the star, and the black, red and gold are good starting points for inspiration.  We already did a remix for the Hacks blog, but found the original mozilla colors are a bit limiting, so we should explore a new, more flexible color palette.

The MDN will have a much broader reach than other community sites and the brand will be recognized as an important Mozilla asset going forward, so this project needs to be treated a bit differently than previous design projects for communities like AMO (add-ons), QMO (qa), and SUMO (support).  We need to create something that will make an immediate impact on our developer marketing initiatives and quickly build awareness so that the MDN becomes a permanent fixture within the Mozilla universe.

Other Considerations:

Additional Resources: