1 of 26

MDN

Product Strategy

October 2016

Mozilla Corporation Confidential - Internal Use Only

2 of 26

MDNs position in the market and why it has to change

Background
Objectives
Audience and Market
Strategy
Investment
Impact on KPI

A browser compatibility strategy that leverages MDNs strengths

Background
Strategy
Tactics
Objectives
Investment

Agenda

Mozilla Corporation Confidential - Internal Use Only

3 of 26

A large web developer segment is currently not served by MDN. Serving this segment can potentially double MDN’s reach

The most proactive way of influencing developers to test for browser compatibility is to intercept them when they are coding web pages, within their editor. This would maximize impact on our corresponding topline KPI.

Summary

Mozilla Corporation Confidential - Internal Use Only

4 of 26

There are no reliable numbers for the size of the web developer market. Our estimate is 15.5 million globally. With 4.5 million visitors/month, MDN has about 30% of that market.

MDN’s market share

MDN’s market share assuming 15.5 million web developers

Mozilla Corporation Confidential - Internal Use Only

5 of 26

Opportunity gaps

Opportunity in Evans survey:

Our main competitors are cited as best resource for web devs twice as often as MDN

Mozilla Corporation Confidential - Internal Use Only

6 of 26

Winning the market for web dev mindshare

Mozilla Corporation Confidential - Internal Use Only

7 of 26

Objective: We want to be the highest rated resource for web devs

Example Key Results:

18M successful sessions per month
11M visitors per month
NPS of 9.0

2017 OKR

Mozilla Corporation Confidential - Internal Use Only

8 of 26

Adam is a concept oriented developer. He likes to learn by getting a high level overview first and builds his mental models before exploring the API further.

MDN serves him very well when he is learning a new API. Adam represents about half of the developer market.

The Web Developer Audience

Sarah is an action oriented developer. She learns by reading code examples. She starts with manipulating code and builds her mental model from there. She prefers to learn from W3Schools and Stack Overflow because they emphasize examples.

Mozilla Corporation Confidential - Internal Use Only

9 of 26

MDN

The professor of web dev info. Stuffy, long winded, but reliable and respected.

Positioning of Web Dev sites

W3schools

The fast food of web dev info. Low quality, simple and quick solutions, no depth.

Stack Overflow

Asking your techy friend. Very specific solutions, varying degrees of quality.

Mozilla Corporation Confidential - Internal Use Only

So, how are these developer types currently being served?

We think MDNs current value proposition looks something like this: "For developers who want to learn the details of a technology, MDN offers the most COMPLETE and correct information available online".

MDN is the professor of web dev information. A little stuffy and long winded, but reliable and the authoritative resource on many topics. This is appealing to a set of developers, the concept oriented developers, but if we want to grow, we must change.

W3schools and Stack Overflow are MDN’s main competition. They both lead with examples.

W3schools value proposition is it’s simplicity, optimized for action oriented developers, but the quality on w3schools is often low. Developers can’t be sure the information is up to date or complete. It’s the fast food of web dev info.

Stack Overflow is your techy friend. It’s examples only, no web reference documentation, no high level overviews, just questions and replies. Your techy friend will answer your occasional question, but he won’t teach you how to use a technology from scratchx.

10 of 26

MDN’s current offering

MDN leads with syntax, suitable for concept oriented developers. Not well-suited for quick lookup. Developers tell us about this constantly.

MDN also offers example code, suitable for action oriented developers. However, it’s not prominent, and rarely optimized for quick lookups.

Mozilla Corporation Confidential - Internal Use Only

11 of 26

Competition Examples

W3schools leads with examples that are simple and to the point. Good for example driven learners and quick lookups.

Stack Overflow’s question & reply model, examples can be easily copy/pasted.

Mozilla Corporation Confidential - Internal Use Only

12 of 26

Audience Fit

“I prefer W3Schools as the examples are easy to understand and show the useful info on how to use the functions/methods at the very start. I try to use MDN, but more often than not I give in and go somewhere else where the examples and language make sense.”

Quote from MDN community survey

Mozilla Corporation Confidential - Internal Use Only

13 of 26

Competitive Strategy Forecast

W3schools

Keep fast food benefits, increase quality and brand perception

Stack Overflow

Keep crowdsourcing benefit, but bring order to chaos

Mozilla Corporation Confidential - Internal Use Only

That’s the current landscape, but we can already see where the competition is going.

For w3schools that’s quality. They already serve action oriented developers well, but they are behind MDN in quality. That’s what they are going to focus on and go after MDN’s core market and value proposition. However it’s much harder for w3Schools to provide the depth of information that MDN has.

For Stackoverflow it’s adding a web reference on top of their question answer model. They have just started Stack overflow documentation that’s driven by examples and rated by the community. If they are successful with that they’d bring order to their chaos of crowdsoured information and have a high quality reference and examples. That would be the biggest threat to MDN.

This is where our competition is going. It’s clear that we can’t just do business as usual and hope that we’ll keep our current market position. The landscape is shifting and W3schools and Stack Overflow are working from different angles to erode our position.

14 of 26

It’s easier for us to add examples than it is for our competition to reach MDNs depth and breadth. We can become the leading provider of example driven content because no other resource is more trusted than us.

By addressing the action oriented developer segment, we can capture market share currently ceded to the competition and become the most valuable resource for web developers.

MDN Content Strategy

Be useful to both types of learning workflows.

Mozilla Corporation Confidential - Internal Use Only

15 of 26

The Future of Examples

MDN code examples are almost all static, just like SO and W3schools.
Action-driven developers want to modify code and learn.
Our opportunity to set the bar and dominate the market by providing much better user value.

Mozilla Corporation Confidential - Internal Use Only

We just talked about how important examples are and how we have to catch up to the competition,

but there is one more thing:

Currently if you got to Both W3schools and Stack Overflow or MDN for that matter the code exampels are generally static. You can see the code, but you can’t play around with it in pace.

But that’s how action oriented developers learn, by manipulating code examples and seeing results. That’s what you can see happning here. I’m changing code in the box and seeing the results right next to it together with the documentation.

There is a window of opportunity here for us to raise the bar on how developers learn about web technologies.

This is what we should be spending our development resources on. This is where we are creating value for end users.

If we are successful, we wouldn’t just be the leading source of information, but have an opportunity to truly dominate the market.

Just like wikipedia is truly dominating the market for general information, we have the opportunity to make learning about web tech synonymous with MDN.

16 of 26

So far, MDN has grown through word of mouth marketing only.
W3schools has top spot for many web tech searches, but can’t compete with us on SEM. This is our opportunity to get our new content in front of developers.

Tie promotion campaigns to retrofitted areas to break muscle memory on dev side.

Experiment Promotion

Mozilla Corporation Confidential - Internal Use Only

17 of 26

Making browser compatibility testing effortless

Mozilla Corporation Confidential - Internal Use Only

18 of 26

Influencing web developers earlier in the process:

Testing in Firefox strategy impact

Specs and Choice of technology

Coding

Visual design implementation

Testing

Deployment

Traditional cross-browser testing using Browser Stack and similar tools requires that the website is at least partially built already. Changes at this point are expensive.

Mozilla Corporation Confidential - Internal Use Only

19 of 26

Influencing web developers earlier in the process:

Testing in Firefox strategy impact

Specs and Choice of technology

Coding

Visual design implementation

Testing

Deployment

Traditional cross-browser testing using Browser Stack and similar tools requires that the website is at least partially built already. Changes at this point are expensive.

We can assist web developers much earlier in the process, when they are actually still building the site. That’s when they can use browser compatibility data to make decisions that are much cheaper at this point.

Mozilla Corporation Confidential - Internal Use Only

20 of 26

Developers already make use of browser compat information at coding stage

Devs check for support on http://caniuse.com, but that shows only the general availability of an API

Browser compat data on Can I Use

Mozilla Corporation Confidential - Internal Use Only

21 of 26

On MDN we have browser compat data on details of implementation, but web developers don’t check compatibility for every single method and property

Browser compat data on MDN

Mozilla Corporation Confidential - Internal Use Only

That’s where MDN comes in handy. MDN has browser compatibility information broken down to the feature level, but it’s unreasonable to expect developers to check browser compatibility for every feature of the API they are using.

This is a small sample of the “input” element on MDN …

When mobile developers chose not to build on the web, 35% cited reasons related to difficulty.

Browsers implement features differently, on different timelines, and sometimes implement features incompletely or before specs are solidified
Browser makers have limited ability to drive upgrades to modern versions, particularly from the oldest browser versions in circulation
New devices and ecosystems have increased browser fragmentation

http://slides.com/html5test/the-android-browser

And finally...

Data about browser compatibility is also fragmented and hard to find

* Source: “How Can HTML5 Compete With Native”, Visionmobile, Sept. 2013

22 of 26

What developers actually need

Browser compat data within their IDE of choice, telling them about compatibility while they are coding.

MDN could be the solution.

Data from MDN

Mozilla Corporation Confidential - Internal Use Only

23 of 26

Instead of locking browser compat data into MDN, we should make it widely available
Instead of asking developers to come to MDN for that data, we should help to give them the information in their dev environment.

MDN Data Strategy

Mozilla Corporation Confidential - Internal Use Only

24 of 26

Outreach to tool developers to start partnerships for integration

Assess top editors/IDEs of devs
Identify data needed for integration

Review of existing browser compat data on MDN.

Assess coverage and quality.
Priority areas for full coverage identified.

Iterative rollout of machine readable browser compat data.

Tactics

Mozilla Corporation Confidential - Internal Use Only

25 of 26

Objective:

Every developer should have access to MDN data in their dev environment.

Example Key Result:

Add-on or build-in functionality available in editors used by 80% of web developers.

2017 OKR

Mozilla Corporation Confidential - Internal Use Only

26 of 26

A large web developer segment is currently not served by MDN. Serving this segment can potentially double MDN’s reach

The most proactive way of influencing developers to test for browser compatibility is to intercept them when they are coding web pages, within their editor. This would maximize impact on our corresponding topline KPI.

Summary

Mozilla Corporation Confidential - Internal Use Only