The “Firefox” you’ve always known as a browser is stretching to cover a family of products and services united by putting you and your privacy first. Firefox is a browser AND an encrypted service to send huge files. It’s an easy way to protect your passwords on every device AND an early warning if your email has been part of a data breach. Safe, private, eye-opening. That’s just the beginning of the new Firefox family.

Now Firefox has a new look to support its evolving product line. Today we’re introducing the Firefox parent brand — an icon representing the entire family of products. When you see it, it’s your invitation to join Firefox and gain access to everything we have to offer. That includes the famous Firefox Browser icon  for desktop and mobile, and even that icon is getting an update to be rolled out this fall.

Here’s a peek behind the curtain of how the new brand look was born:

Design beyond identity.

This update is about more than logos. The Firefox design system includes everything we need to make product and web experiences today and long into the future.

• A new color palette that expands the range of possibilities and makes distinctive gradients possible.

• A new shape system derived from the geometry of the product logos that makes beautiful background patterns, spot illustrations, motion graphics and pictograms.

• A modern typeface for product marks with a rounded feel that echoes our icons.

• An emphasis on accessible color and type standards to make the brand open to everyone. Button colors signal common actions within products and web experiences.

Meaning beyond design.

Privacy is woven into every Firefox brand experience. With each release, our products will continue to add features that protect you and alert you to risks. Unlike Big Tech companies that claim to offer privacy but still use you and your data, with us you know where you stand. Everything Firefox is backed by our Personal Data Promise: Take Less, Keep It Safe, No Secrets.

The brand system is built on four pillars, present in everything we make and do:

Radical. It’s a radical act to be optimistic about the future of the internet. It’s a radical act to serve others before ourselves. We disrupt the status quo because it’s the right thing to do.

Kind. We want what’s best for the internet and for the world. So we lead by example. Build better products. Start conversations, Partner, collaborate, educate and inform. Our empathy extends to everybody.

Open. Open-minded. Open-hearted. Open source. An open book. We make transparency and a global perspective integral to our brand, speaking many languages and striving to reflect all vantage points.

Opinionated. Our products prove that we are driven by strong convictions. Now we’re giving voice to our point of view. While others can speak only to settings, we ground everything in our ethos.

The end of the beginning

The Firefox brand exploration began more than 18 months ago, and along the way we tapped into many talents. Michael Johnson of Johnson Banks provided early inspiration while working on the Mozilla brand identity. Jon Hicks, the designer behind the original Firefox browser logo, was full of breathtaking design and wise advice. Michael Chu of Ramotion was the driving force behind the new parent brand and system icons.

We worked across internal brand, marketing, and product teams to reach a consistent brand system for our users. Three members of our cross-org team have since moved on to new adventures: Madhava Enros, Yuliya Gorlovetsky, and Vince Joy. Along with Mozilla team members Liza Ruzer, Stephen Horlander, Natalie Linden, and Sean Martell, they formed the core working team.

Finally, we’re grateful to everyone who has commented on this blog with your passionate opinions, critiques, words of encouragement, and unique points of view.

Tell us. We can take it.

As a living brand, Firefox will never be done. It will continue to evolve as we change and the world changes around us. We have to stretch our brand guidelines even further in the months ahead, so we’re interested in hearing your reaction to what we’ve done so far. Feel free to let us know in the comments below. Thanks for being with us on this journey, and please stay tuned for more.

The post Firefox: The Evolution Of A Brand appeared first on Mozilla Open Design.

If you’ve been wondering whatever happened to the Firefox brand identity work we shared in this space last year, and whether System 1 or System 2 prevailed, these new icons offer a clue.  They are not the whole story. We’ll be unveiling an evolved Firefox brand the week of June 10th, so please stay tuned. We look forward to hearing what you think.

The post A glimpse of what’s to come. appeared first on Mozilla Open Design.

With the rapid evolution of the internet, people need new tools to make the most of it. So Firefox is creating new types of browsers and a range of new apps and services with the internet as the platform. From easy screen-shotting and file sharing to innovative ways to access the internet using voice and virtual reality, these tools will help people be more efficient, safer, and in control of their time online. Firefox is where purpose meets performance.

Firefox Quantum Browser Icon

As an icon, that fast fox with a flaming tail doesn’t offer enough design tools to represent this entire product family. Recoloring that logo or dissecting the fox could only take us so far. We needed to start from a new place.

A team made up of product and brand designers at Mozilla has begun imagining a new system to embrace all of the Firefox products in the pipeline and those still in the minds of our Emerging Technologies group. Working across traditional silos, we’re designing a system that can guide people smoothly from our marketing to our in-product experiences.

Today, we’re sharing our two design system approaches to ask for your feedback.

How this works.

For those who recall the Open Design process we used to craft our Mozilla brand identity, our approach here will feel familiar:

• We are not crowdsourcing the answer.
• There’ll be no voting.
• No one is being asked to design anything for free.

Living by our open-source values of transparency and participation, we’re reaching out to our community to learn what people think. You can make your views known by commenting on this blog post below.

Extreme caveat: Although the products and projects are real, these design systems are still a work of fiction. Icons are not final. Each individual icon will undergo several rounds of refinement, or may change entirely, between now and their respective product launches. Our focus at this point is on the system.

We’ll be using these criteria to evaluate the work:

• Do these two systems still feel like Firefox?
• How visually cohesive is each of them? Does each hold together?
• Can the design logic of these systems stretch to embrace new products in the future?
• Do these systems reinforce the speed, safety, reliability, wit, and innovation that Firefox stands for?
• Do these systems suggest our position as a tech company that puts people over profit?

All the details.

The brand architecture for both systems is made up of four levels.

Each system leads with a new Firefox masterbrand icon — an umbrella under which our product lines will live.

The masterbrand icon will show up in our marketing, at events, in co-branding with partners, and in places like the Google Play store where our products can be found. Who knows? Someday this icon may be what people think of when they hear the word “Firefox.”

At the general-purpose browser level, we’re proposing to update our Firefox Quantum desktop icon. We continue to simplify and modernize this icon, and people who use Firefox tell us they love it. Firefox Developer Edition and Firefox Nightly are rendered as color variants of the Quantum icon.

Browsers with a singular focus, such as our Firefox Reality browser for VR applications and our privacy-driven Firefox Focus mobile browser, share a common design approach for their icons. These are meant to relate most directly to the master brand as peers to the Firefox Quantum browser icon.

Finally, the icons for new applications and services signal the unique function of each product. Color and graphic treatment unite them and connect them to the master brand. Each icon shape is one of a kind, allowing people to distinguish among choices seen side by side on a screen.

Still in the works are explorations of typography, graphic patterns, motion, naming, events, partnerships, and other elements of the system that, used together with consistency in the product, will form the total brand experience.

Read along as we refine our final system over the next few months. What we roll out will be based on the feedback we receive here, insights we’re gathering from formal user testing, and our product knowledge and design sensibilities.

With your input, we’ll have a final system that will make a Firefox product recognizable out in the world even if a fox is nowhere in sight. And we’ll deliver a consistent experience from an advertisement to a button on a web page. Thanks for joining us on this new journey.

Madhava Enros, Sr. Director, Firefox User Experience

Tim Murray, Creative Director, Mozilla

The post Evolving the Firefox Brand appeared first on Mozilla Open Design.

 
In July, our Voice Assistant Team will be in France and Germany to explore trust and technology adoption. We’re particularly interested in how people use voice assistants and how people listen to content like Pocket and podcasts. We would like to learn more how you use technology and how a voice assistant or voice user interface (VUIs) could improve your Internet and open web experiences. We will be conducting a series of in-home interviews and participatory design sessions. No prior voice assistant experience needed!

We would love to meet folks in person in:

Paris: July 3 – 6, 2018
Munich: July 9 – 13, 2018
Dresden: July 16 – 20, 2018

If you are interested in participating in our in home interviews (2 hours) or participatory design sessions (1.5 hours), please let us know! We’d love to meet you in-person!

If you are interested in meeting us in Paris, please fill out this form.
If you are interested in meeting us in Germany, please fill out this form.

All information will be held under Mozilla’s Privacy Policy.

Paris, Munich & Dresde : aidez-nous à donner une voix au Web !

En juillet, notre équipe Assistants vocaux sera en France et en Allemagne pour explorer la confiance et l’adoption de ces technologies. Nous sommes particulièrement intéressés par la façon dont les gens utilisent les assistants vocaux et par comment ils écoutent du contenu comme Pocket ou des podcasts. Nous aimerions en savoir plus sur la façon dont vous utilisez cette technologie et sur la façon dont un assistant vocal ou une interface utilisateur vocale (VUI) pourrait améliorer vos expériences sur le Web. Nous mènerons une série d’entrevues à domicile et de séances de conception participatives. Aucune utilisation d’assistant vocal n’est requise au préalable !

Nous aimerions rencontrer des gens en personne à :

Paris : du 3 au 6 juillet 2018,
Munich : du 9 au 13 juillet 2018,
Dresde : du 16 au 20 juillet 2018.

Si vous êtes intéressé(e)s à participer à nos interviews à domicile (2 heures) ou à des sessions de conception participative (1,5 heure), faites le nous savoir ! Nous aimerions vous rencontrer !

Si vous souhaitez nous rencontrer à Paris, veuillez remplir ce formulaire.
Si vous souhaitez nous rencontrer en Allemagne, veuillez remplir ce formulaire.

Toutes les informations seront conservées dans la politique de confidentialité de Mozilla.

Paris, München, & Dresden: Bitte helfen Sie uns, dem Internet eine Stimme zu geben!

Im Juli wird unser Voice Assistant Team in Frankreich und Deutschland sein, um Technologie-Akzeptanz und -Vertrauen zu erkunden. Uns interessiert besonders, wie Menschen Sprachassistenten benutzen und wie Menschen Inhalte wie Pocket und Podcasts hören. Wir würden gerne mehr darüber erfahren, wie Sie Technologie benutzen und wie ein Sprachassistent oder eine Sprachbenutzeroberfläche (VUIs) Ihr Internet- und freies Weberlebnis verbessern könnte. Wir werden eine Reihe von In-Home-Interviews und partizipativen Design-Sessions durchführen. Keine vorherige Erfahrung des Sprachassistenten erforderlich!

Wir würden uns freuen Sie persönlich zu treffen in:

Paris: 3. – 6. Juli 2018;
München: 9. – 13. Juli 2018;
Dresden: 16. – 20. Juli 2018.

Wenn Sie daran interessiert sind, an unseren In-Home-Interviews (2 Stunden) oder partizipativen Design-Sessions (1,5 Stunden) teilzunehmen, lassen Sie es uns bitte wissen! Wir würden uns freuen, Sie persönlich zu treffen!

Wenn Sie Interesse haben, uns in Paris zu treffen, füllen Sie bitte dieses Formular aus.
Wenn Sie Interesse haben, uns in Deutschland zu treffen, füllen Sie bitte dieses Formular aus.

Alle Informationen werden unter der Datenschutzerklärung von Mozilla gespeichert.

The post Paris, Munich, & Dresden: Help Us Give the Web a Voice! appeared first on Mozilla Open Design.

This October, the Mozilla Audience Insights team, supported by Roberta Tassi and Calib.ro will be in Germany to understand the German Conscious Choosers – a group of people whose commitment to clear values and beliefs are driving their behavior and choices in terms of brands, companies and organizations they support and use. Similar to our objective in the USA, we would like to learn more about their experiences and the role that the internet and technology play in their life. This is an important group for Mozilla to understand because we believe people who think this way can also help us with our mission to keep the Internet open, accessible and healthy.

We would love to meet folks in person in:

Hamburg: October 5-9, 2017

Leipzig: October 10-14, 2017

Munich: October 15-19, 2017

We are looking for people who might be Conscious Choosers to conduct 2 hour interviews in their homes. If you are a Conscious Chooser and know someone who might be, please fill up this form to see if you qualify!

Also, please reach out to us by email if:

# You are interested in a group discussion on the role of the Internet in our daily life, as individuals and societies, and why it’s important to keep it healthy.

# You are a group of volunteers, a community or a non-profit organization that believes in creating a healthier internet and/or are targeting the Conscious Chooser audience,

We would like to come visit you and know more about what you do at the local level.

Send us an email at: audience_insights@mozilla.com, we’ll love to meet you in-person!

The post Share with us what it means to be a German Conscious Choosers! appeared first on Mozilla Open Design.

Brand design systems are often managed tightly by internal creative teams, with strict guidelines. The guidelines,  are shared like canons, with outside agencies. At Mozilla, we pride ourselves on our relationship to a passionate community of volunteers who outnumber our employees 10 to 1. With this community, strict control doesn’t work, but we still need to provide a design system that includes their views and results in better designs. Here’s a conversation discussing the process with Yuliya Gorlovetsky, Mozilla’s Associate Creative Director and font expert Peter Biľak of Typotheque who helped with the font design.

Tools not rules

Logo refinement from Johnson Banks and Fontsmith.

Yuliya: When I joined the Mozilla brand team, the new identity was close to completion. The concept relied heavily on typography, and Johnson Banks had chosen a slab serif for the logo. Slab serifs are the less common and less well known serifs. They are often bold, sharper, and have strong personality. We saw an opportunity for Mozilla to build on this by creating a custom font to support the new identity system – a distinct typeface for the identity refresh that we planned to open source for all to use.

Jordan Gushwa, a Creative Lead at Mozilla Foundation, and I both agreed that adding an elegant yet flexible slab serif would help us refine the brand. It would allow us to design experiences that lead with typography and written messages, akin to experiences that you might find in lifestyle magazines or design publications when the opportunity presented itself. Mozilla is investing in content creation, as it becomes more important today to tell the stories about how we stay safe and connected on the web.

To develop the Zilla Slab, we worked with Peter Biľak and Nikola Djurek from Typotheque. We respected their work and valued their expertise in multi-language support. I remember that Peter was surprised during our first call when I said we were interested in Slab Serifs that would be at home in top notch magazines or web publications. He happily added those options to our font explorations.

Peter: Slab serif typefaces, sometimes called Egyptians, are usually angular and robust in construction. They hint at a technological underpinning, with aesthetics that are characteristic of the early 19th century Industrial Revolution.

When Yuliya called us at Typotheque, the decision had already been made to use a Slab serif typeface. I wanted to understand the rationale and possibly consider alternatives. Quickly I came to understand that this was a well-informed decision, looking for less explored areas of typeface categorisation.

Yuliya: Peter pulled together multiple options of baseline slab serifs from his catalog and showed us how they could evolve to support our logo design needs. Looking for a font that could flex from display to body copy, we quickly settled on Tesla as our base font. Tesla had a good balance of original details but also the evenness that would support a variety of subject matter.

Getting into the details

At the start, the main focus was was on the logotype. Peter kept us accountable by illustrating the impact that the decisions we made for the logotype letters would have on the full font family. When showing different logo options, he would extract the letters from the logo and show how the different design decisions would show up in other letters in a typeface.

This way we could consider side by side, not only the logo, but the full typeface we would have. It was a hard line to walk. You want to just focus on the logo, because that is the combination of letters that will appear time and time again, but since we wanted the logo to connect to the font, we had to find a place of compromise. We needed to make decisions that equally supported both, the logo and the font. Most of the exploration played out in the three main letters: m, z, and a. It’s amazing how many people will ask if they can stop coming to meetings when you talk through 10 different ‘a’ options.

Peter: We looked at various Slab Serif models. Earlier models proposed by Johnson Banks, which were typical heavy geometric Slabs, and then we looked at Sans serif typefaces and considered turning them into Slabs. From our collection we looked at Irma Text Slab, Charlie, Lumin, Zico, before settling on Tesla Slab as a starting point. Perhaps too much detailed information here? Yuliya was intrigued by models  that exhibited unusual traits —  shifted axes of contrast of thick and thin strokes, based on cursive writing rather than geometric construction, or even an asymmetric serif structure. The lowercase ‘a’ is a more complex letter that provides clues to how other letters may look in a full exploration of the logotype. We wanted to bring an angled stroke to the top of the ‘a’, mimicking the slashes of the internet protocol. The other letters would then need to follow the same construction principles.

Yuliya: We were able to narrow it down to two design directions:

1. A dressed down simplified slab font with a more geometric “a”. Geometric fonts are created from basic shapes, such as straight, monolinear lines and circular shapes. They lack ornamentation, and rarely appear with serifs. This “a”, that we considered, was more round, upright, and had no serif on the end.
2. A more serifed font that had a more humanist “a” with a very pronounced serif. Humanist serifs are the very first kind of Roman typeface. The letters were originally drawn with a pen held at a consistent angle, creating a consistent visual rhythm. This “a”, that we considered, had a very pronounced two-level serif, that was tilted at a slight angle to respond to the “/”  that came before it.

Peter: Most of the Slab typefaces are static and geometric in construction. “Static” refers here to the axis of contrast. When the axis is 0 degree, typefaces are usually described as static. When there is an angle, they became ‘dynamic’. We experimented with injecting more humanistic values into the traditional Slab model, with the help of more calligraphic stroke terminations, which not only improve legibility but create a more flowing rhythm of letter shapes.

Yuliya: After much debate and 35 rounds of review, we had narrowed the directions down to 2 top choices. We then guerilla tested on folks, we showed the 2 directions to some folks within Mozilla, and some colleagues and friends outside of Mozilla and asked which one they gravitated towards and why. We also asked folks what emotions the different directions inspired in them. These conversation gave us the insight to proceed with the more humanist version, but to simplify the serif on the “a”. The result was an overall simplification of the font, which we lovingly call Zilla Slab. We think that Zilla Slab is a casual and contemporary slab serif that still has a good amount of quirk.

We launched the logo in the middle of January, and applied it to just a few assets; web headers, signage around the office and some print applications. After the launch, Peter and his team continued to work with us through the details of the full font family. Peter regularly shared the progress, which we in turn shared with many designers and fellow type enthusiasts across Mozilla. Turns out a lot of folks across Mozilla self identify as type nerds!

Sophisticated italics

Italics came next, and they are graceful and sharp. As a humanist slab, the Zilla Slab italics are closer to a true italics and add a softness to the overall typography system. There are moments when I’m reviewing work and I have to pause and stare at the curved slant detail in the v, w, x, and y of the italics letters.

Peter: Italics are generally not used for longer texts.  The function of italics is to emphasise short passages, so they offer more space for expression. Since we aimed to make Zilla Slab a more affable typeface with humanistic elements, the Italics offered an opportunity to go fully in that direction. We based the Italic not on a slanted Roman, but on a cursive broad-nib writing style. Diagonals in italic often break the rhythm of writing, so we introduced curved diagonals that work well with cursive italic by maintaining a smoother flow.

Building in the highlight effect

Yuliya: Johnson Banks originally modeled the highlight effect for the identity system on the functional act of highlighting a piece of type with your mouse on a screen or within software, or code inspector.

From the original guideline from Johnson Banks. The red rectangle is the size of the colon rectangle in the logo.

We continued to expand and ask people for feedback on the identity system internally. As we put it to use we quickly discovered that typing out the words and manually drawing out the highlight box to contain those letters not only took a lot of effort, but also created visual inconsistencies. Sizing the letters and the highlight box separately and having them come together in the same way time and time again, requires a lot of math and visual tuning. Following our idea of focusing on tools that enable people rather than rules that restrict, we asked Typotheque to create a true highlight version of Zilla Slab. The highlight weight would show the counter shapes between letters rather than the letterforms themselves. These additional weights of Zilla Slab make it easy for anyone to contribute to the brand identity and not to be limited by design software or design knowledge. Building the logic and rules into the font makes it a seamless part of the system.

Peter: Crafting a wordmark or a logo is usually a different process from developing a functional typeface. as Wordmarks can create more context specific design and brand solutions, which may not work well in a font. With Zilla Slab, we worked on a wordmark and the typeface at the same time, and had to anticipate how the wordmark features could be translated to other glyphs not present in the original wordmark. This extended possibly to other writing scripts.

Typing “Mozilla” in Zilla Slab Highlight Bold

Yuliya: The final touch on making the font a completely functional tool for the brand started by asking Peter if it would be possible to automate Zilla Slab so that it would be possible to type out the Mozilla logo using the bold highlight weight of the Zilla Slab. This would allow browsers and native applications to  turn “Mozilla” automatically into “moz://a” in specific cases. This would free people from needing to place and attach a static image version of the file, and frees us from managing those files. A logo for an open source company, typed out in its open source font.

Peter: Since the Zilla font is used to create the new Mozilla logo, we included the OpenType substitution feature triggered by the Ligature function that replaces the ‘ill’ letters by ‘://”. This should only replace the “ill” when intended —  not in a word ‘illustration’, but always in mozilla or ‘Mozilla’, for example.

Looking Ahead

Design work from the design team. Special attribution to Patrick Crawford.

Over five months of development, as Peter’s team worked through the font details, our design team worked in parallel to test Zilla Slab in a broad range of design applications. It has proven to be as unique and flexible as we had hoped it would be. Zilla Slab has taken its place as the unifying component of our design system. After all, it’s through typography that we see language, and at Mozilla we all have a lot to say.

The roll out of Zilla Slab has also helped to unite our different design teams and give all of our Mozilla contributors a shared visual voice. We are launching Zilla Slab with support for 70 European Latin based languages, and we can’t wait to continue our work with Typotheque and localize it to additional alphabets.

This is one of our first shared tools within our identity system. We will keep adding more tools, writing about them, and designing these tools in the open with you.

Download Zilla Slab on Github or Google Fonts.

The post Zilla Slab: A common language through a shared font appeared first on Mozilla Open Design.

The Mozilla Audience Insights team, with the help of our good friend and researcher Roberta Tassi, and the remote support of information designers Giorgio Uboldi and Matteo Azzi, will be visiting your cities to understand more about Conscious Choosers – a group of people whose commitment to clear values and beliefs are driving their behavior and choices in terms of brands, companies and organizations they support and use. We would like to learn more about their experiences and the role that the internet and technology play in their life.  This is an important group for Mozilla to understand because we believe people who think this way can also help us with our mission to keep the Internet open, accessible and healthy.

We would love to meet folks in person in:

Atlanta: July 11 – July 14, 2017

Kansas City: July 15 – July 19, 2017

Austin: July 20 – July 25, 2017

A few options to participate:

# Are you interested in meeting in person and contributing to the conversation with other people in the community?

Join us for a group discussion on the role of the Internet in our daily life, as individuals and societies, and why it’s important to keep it healthy.

# Are you a group of volunteers, a community or a non-profit organization that promotes some sort of activism and are targeting the Conscious Chooser audience as well?

We would like to come visit you and know more about what you do at the local level.

# Do you know your city and community well and want to learn more about human-centered design?

Join us as a local guide and participate in the whole research process.  You’ll get to experience a real field activity and synthesis with an expert team of designers and researchers.

If you answered yes to any of the above, or if you know anyone who fits the description, please reach us at audience_insights@mozilla.com

One more possibility:

# Are you someone who has strong personal values and beliefs and you expect the companies you support to have the same standards? Have you rejected a brand because you do not believe in their company values and business practices? Do you carefully research a product and company before you purchase?

Join us for individual interviews and help us better understand the values that drive your decisions and the motivations behind them.

We believe a healthy Internet is diverse and inclusive, so we would like to connect with a diverse group of participants. If you’re interested, start by filling out this form, so we can learn a little bit about you.  We will handle your information as described in the our Privacy Policy and will delete your information if you are not selected as a participant. We will contact you by July 22 if you have been selected.

For those who are not located in these US cities, you can participate in the discussion online on GitHub.

If we encounter an interesting nugget during our discussion, we will be sure to post it to try and gather more thoughts from you all!

If you have any questions, please feel free to reach out to us at: audience_insights@mozilla.com.

The post Join us on our research trip to learn more about Conscious Choosers! appeared first on Mozilla Open Design.

MDN’s switch to new branding reflects an update of Mozilla’s overall brand identity, and we are taking this opportunity to update MDN’s visual design to match Mozilla’s design language and clean new look. For MDN that means bold typography that highlights the structure of the page, more contrast, and a reduction to the essentials. Color in particular is more sparingly used, so that the code highlighting stands out.

Here’s what you can expect from the first phase:

New MDN design

The core idea behind MDN’s brand identity change is that MDN is a resources for web developers. We realize that MDN is a critical resource for many web developers and we want to make sure that this update is an upgrade for all users. Instead of one big update, we will make incremental changes to the design in several phases. For the initial launch, we will focus on applying the design language to the header, footer and typography. The second phase will see changes to landing pages such as the web platform, learning area, and MDN start page. The last part of the redesign will cover the article pages themselves, and prepare us for any functional changes we’ve got coming in the future.

Today, we are launching the first phase of the redesign to our beta users. Over the next few weeks we’ll collect feedback, and fix potential issues before releasing it to all MDN users in July. Become a beta tester on MDN and be among the first to see these updates, track the progress, and provide us with feedback to make the whole thing even better for the official launch.

The post MDN’s new design is in Beta appeared first on Mozilla Open Design.

MDN’s mission today is to provide developers with the information they need to build things on the open Web. However, when MDN was first started, it didn’t differentiate between Web standards documentation and product documentation for Firefox, Gecko and other Mozilla products. Over time, as Web documentation was expanded on MDN, it became clear that it provided value to a much larger group of developers than our internal product documentation. We have been investing to improve the Web documentation ever since.

Changing the Name

MDN is clearly a web documentation reference, and in no way is it a developer network. We want the name to clearly reflect the purpose and mission of MDN, and so we’re going to be updating it to: MDN Web Docs.

“Mozilla Developer Network” simply isn’t accurate. Furthermore, pretty much no one refers to MDN as “Mozilla Developer Network.” It’s always “MDN.” However, there is a lot of love for the name “MDN” and we don’t want to get rid of all of that, which is why we’re giving it the IBM / KFC treatment and keeping the iconic abbreviation and commonly used name, while no longer using the words that the acronym used to stand for. We’re not getting rid of MDN, we’re being clear about what it is – it’s MDN Web Docs.

We’re already working on what the MDN Web Docs logo will look like when rendered in the system of the new Mozilla brand, and here’s an early look:

Separating Product Documentation

Currently the home page of MDN has links to both web documentation and product documentation (like Firefox, Developer Tools, Add-ons and more), but about 95% of traffic goes to the Web documentation. Additionally, many searches can be confusing because a Web developer looking for something about CSS may end up on a page about XUL, for example CSS Grid vs XUL Grid, and ultimately can’t find the thing they were looking for. We will be splitting out the navigation for the product documentation so that MDN can be fully dedicated to helping people find the Web docs they need. We will also be investigating ways to ensure that search results direct users to exactly what they were looking for without confusing Web and product documentation.

Site Design Refresh

Along with a brand identity refresh, we’ll also be refreshing the site design. You will be able to see as pieces of this get completed, and you can also give feedback as we work over the coming weeks by becoming a beta tester on MDN. We’ll also follow up with future articles once there is some work to share about the new look of the site.

More Content and Features To Help Web Devs

Lastly, but most importantly, we will be working to add more content and features to help Web developers. We’ve already started a couple of experiments like putting examples at the top of the article, and looking at including editable code snippets within the articles. Research has told us that our documentation is excellent and thorough, but often Web developers are looking for quick examples before having to read through extensive articles. Doing more to help developers find faster and more efficient ways to learn from the documentation is a critical area where we hope to improve, and you can expect to see more experiments like this. If you have other ideas about ways that our documentation could be more valuable or easier to use, we’re open to hearing more ideas!
We’re incredibly excited to make MDN officially about Web docs, and to make it more comprehensive and easier to use and learn from for all of the web developers who have come to love it as a resource.

The post The Future of MDN: A Focus on Web Docs appeared first on Mozilla Open Design.

“I am not required to make the world a better place.”  -Reality Bites 1994

“I can’t keep quiet.”  -MILCK 2017

The 1990s and 2000s were framed by a clear sense of ambivalence, self-interested technological growth, wanton materialism and projected idealism.  We’ve entered a new world – a world with a tangible surge in people who approach their affiliations and consumer decisions carefully, with a great deal of thought; a new world of people who care. Whether it’s a focus on environmental issues, civil rights, or sustainable sourcing, individuals’ commitment to clear values and beliefs are driving their behavior and they are holding brands, companies and organizations to the same set of standards.

From recent boycotts of #deleteuber, #BoycottBudweiser, #NoNetflix to the success of Small Business Saturday, Everlane, Seventh Generation, Mary Kay and Ben & Jerry’s, we’re witnessing a trend in human behavior that aligns day-to-day decision making with consumers’ moral compasses. This group of consumers is willing to invest research time, manage inconveniences, pay a premium to support the organizations that align with their personal values and even reject brands whose values do not align. In a 2015 Nielsen global survey, 66% of respondents say they’re willing to pay more for products and services that come from companies who are committed to positive social and environmental impact. They’re making a conscious choice to put their money, their influence and their actions where their heart is. As a result of technology, these Conscious Choosers can not only vote with their purchases, but also hold brands responsible on social media – this public megaphone increases consumers’ power and forces companies to be more socially accountable.

At Mozilla, we recognize that this cohort of Conscious Choosers are critical participants in our movement for Internet health. We believe that the Internet is a global public resource and we’re committed to keeping it open and accessible to all.  We need help in this work, the way World Wildlife Fund needed help 30 years ago; we need the public to understand that the Internet is at risk and worth fighting for.

Hypothesis

This idea of the “Conscious Chooser” consumer started with a hypothesis. We believed there was a cohort of people who exhibit signs of “everyday activism” in their offlines lives.  They vote, recycle, read labels, are involved their community, and can see a connection between their individual actions and the overall “health” of their community. However, we also believed that these same people may not yet be applying these values and behaviors to their online lives.

Research

Our initial research in Germany, Brazil and the US reinforced our hypotheses. The notion of “conscious choosing” emerged as a common behaviour in 20-30% of Internet users we surveyed. We found that Conscious Choosers are hungry for information and details, and are willing to invest time to make decisions that align with their values.  They believe in the power of the collective and that their influence can go beyond just their own personal buying power to impact others’ decisions and the world around them as well. We also met people who struggle to connect their offline lives with their online lives but are open and eager to find ways to do so. As as we suspected, Conscious Choosers see the Internet as a platform for their connections and causes but find it hard to translate their values into practice online because of the internet’s intangible nature.

An internal research study shows that amongst the respondents who are familiar with the work Mozilla does to support the Internet, including web literacy, policy and advocacy programs and technology innovations, 69% are more likely to be engaged users and supporters of our Firefox browser (compared to respondents who have no knowledge about our activities, only 33% are engaged).  In other words, the values and behaviors of a public interest “parent” company are a differentiating factor for the product brand.  Based on this insight, we also believe that Conscious Choosers are a growth market for our Internet Health movement, as well as products from Mozilla, like our Firefox browser.

Implications

We recognize that our consumers exist in an imperfect environment—where there is asymmetry of information, financial and social constraints and inconsistencies in human behavior, both offline and online. We are curious to explore why, understand the reasons for inconsistencies and define the thresholds. We also recognizes that “personal values” can vary from country to country and culture to culture, as seen with research from World Values Survey. We need to explore further to understand what values are important in different countries and cultures.

At the heart of it, we believe that Mozilla’s target consumer audience is community-minded, driven by their personal values to take action, and these values influence the products and services they use, the purchases they make and organizations they support.  And we believe that this group is not unique just to Mozilla, but represents a growing segment of important consumers, users, and advocates that other organizations will be interested in learning more about, especially as brands are expected to take more of a political stance by savvy consumers.

In the upcoming months, we will be embarking on further research – through quantitative studies, ethnographic studies as well as participatory session across the globe – firstly in the US, Germany,Taiwan and then will look to expand to other geographies over time. Staying true to our open source roots, we will make our process, insights and findings open and available to all.

Please help!

We want to invite individuals, communities and organizations to participate through a variety of activities. For example, you can support us by being a fixer or a guide in-field, or recommending people we should talk to or letting us interview and run participatory exercises with you or attending an interactive workshop to add to the wealth of knowledge. To help us off the ground, we would love to connect with you so send us an email if:

• You are a researcher and would like to get involved
• You are an advocate for Mozilla and want to support our discovery process
• You are actively are making choices and supporting causes, but technology might not be your thing
• You are skeptical but would like to see a non-profit, independent corporation succeed
• You are rooting for Mozilla because you think a healthy, widely used web matters

If you like to engage, have questions about our research approach or would like to receive updates, please email audience_insights@mozilla.com.

Watch this space to learn more about where all of the resources will be made available.

The post Making a Conscious Choice appeared first on Mozilla Open Design.