Join Mozilla

proposed membership program

v1: Dec 14 2010 / Mtn View + Air Mozilla
v2: Jan 11 2011 / blog post slidecast

Overview

Vision: clear, simple program where millions of people can identify and connect with Mozilla.

A part of Whistler commitment to grow supporters and community by 1000x.

Builds user engagement and donations programs that we’re already running.

Opportunity

400 million
people use Firefox.
Millions know it’s about
more than just a browser.
They want to be
part of what we stand for.

Today

We already have:
- 15,000 donors
- 200,000 mailing list members
- 3 million social media followers
OK, but fragmented.
Huge untapped potential to expand, create sense of belonging and connection.

Join Mozilla

Join Mozilla:
an easy way for
people to connect.

Help them understand.
Show their support.
Feel they belong.

Why?

Brand affinity for Firefox.

Bigger base to back (and grow): 50k Mozillians who donate time.

Fund programs (e.g. Drumbeat) = new tools and innovation.

Mozilla as something bigger.

Program Details

Affinity program for people who support Mozilla.
- Brings together pieces of existing user engagement and donations programs.
$5 annually, chance to buy t-shirt or other swag.
Once you join: we help you learn more, feel at home.
- Aim: help members grok the Mozilla firehose. Not ‘member only’ info’.
- Simple, concise updates on what’s happening with Mozilla and the web.
- Info on ways to get involved more deeply (if you want this).
Funds go to support grants and projects.

Web Copy

Copy we’re considering for sign up page:

We’re a non-profit organization who believes the web should be free, open, accessible, transparent, safe and - most of all - a force for the good of humanity.

We’re the proud makers of Firefox and, every day, we strive to make the Web better. It’s our hood to protect and nurture, after all.

Protect the Web. Join Mozilla!

Timeline

Q1 - Launch basic offering.
- Aim to launch before FF4.
- Integrate w/ FF4 launch, get first wave of members signed up.
Q2 - Full offering, member care.
- Full selection of merchandise, plus info and get involved programs.
- Evolve messaging and user experience based on launch learning.
Q4 - Major global event w/ community.
- ‘Webathon’ or similar event, run partly by community, many languages.
- Focus on consumer education about the web, telling your friends.

What it’s not!

A fan club
for Firefox.

A new governance
system for Mozilla.

A contributor community
(we have that, it’s awesome!).

We need help!

Existing Mozillians are critical to success!
Help shape Join Mozilla:
- Campaign ideas and names.
- Ideas to engage new members.
- And the reaching out to them.
- Events, local sites, etc.
Most important: reach out to your neighbours.

HTML Markup + Timesheet

<!DOCTYPE html>
<html>
  <head>
    […] 
    <link href="timesheet.smil" rel="timesheet" type="application/smil+xml">
    <!--[if lt IE 9]>
      <script type="text/javascript" src="html5.js"></script>
      <script type="text/javascript" src="mediaelement.js"></script>
    <![endif]-->
    <script type="text/javascript" src="timesheets.js"></script>
    <script type="text/javascript" src="timecontroller.js"></script>
  </head>
  <body>

    <div id="slideshow">
      <header id="slide01"> […] </header>
      <div id="slide02">    […]    </div>
      <div id="slide03">    […]    </div>
      <div id="slide04">    […]    </div>
      <div id="slide05">    […]    </div>
      <div id="slide06">    […]    </div>
      <div id="slide07">    […]    </div>
      <div id="slide08">    […]    </div>
      <div id="slide09">    […]    </div>
      <div id="slide10">    […]    </div>
      <div id="slide11">    […]    </div>
      <footer id="slide12"> […] </footer>
    </div>

    <audio id="talk" autoplay preload>
      <source type="audio/ogg" src="media/joinMozilla.ogg"/>
      <source type="audio/mp4" src="media/joinMozilla.m4a"/>
    </audio>

    <nav id="timeController" class="smil-timeController">
      […]
    </nav>

  </body>
</html>

Where timesheet.smil contains:

<?xml version="1.0" encoding="UTF-8"?>
<timesheet xmlns="http://www.w3.org/ns/SMIL">
  <excl mediaSync="#talk" controls="#timeController">
    <item select="#slide01" begin="00:00"/>
    <item select="#slide02" begin="00:09"/>
    <item select="#slide03" begin="00:50"/>
    <item select="#slide04" begin="01:18"/>
    <item select="#slide05" begin="01:48"/>
    <item select="#slide06" begin="02:23"/>
    <item select="#slide07" begin="03:55"/>
    <item select="#slide08" begin="06:20"/>
    <item select="#slide09" begin="07:17"/>
    <item select="#slide10" begin="09:11"/>
    <item select="#slide11" begin="10:47"/>
    <item select="#slide12" begin="13:03"/>
  </excl>
</timesheet>

timeController

Using our “timeController” component is optional: setting a “controls” attribute to the audio element would work as well. The “timeController” brings a user-friendly way to access to each slide:

<nav id="timeController" class="smil-timeController">

  <!-- Table Of Contents -->
  <div class="smil-toc">
    <ul class="smil-tocList">
      <li><a href="#slide01"> Introduction    </a></li>
      <li><a href="#slide02"> Overview        </a></li>
      <li><a href="#slide03"> Opportunity     </a></li>
      <li><a href="#slide04"> Today           </a></li>
      <li><a href="#slide05"> Join Mozilla    </a></li>
      <li><a href="#slide06"> Why?            </a></li>
      <li><a href="#slide07"> Program Details </a></li>
      <li><a href="#slide08"> Web Copy        </a></li>
      <li><a href="#slide09"> Timeline        </a></li>
      <li><a href="#slide10"> What it’s not!  </a></li>
      <li><a href="#slide11"> We need help!   </a></li>
      <li><a href="#slide12"> Conclusion      </a></li>
    </ul>
  </div>

  <!-- timeline + control buttons -->
  <div class="smil-controlBar">
    <div class="smil-left">
      <button class="smil-first"><span> |«  </span></button>
      <button class="smil-prev"><span>   «  </span></button>
      <button class="smil-play"><span> play </span></button>
      <button class="smil-next"><span>  »   </span></button>
      <button class="smil-last"><span>  »|  </span></button>
    </div>
    <div class="smil-timeline">
      <div class="smil-timeSlider"></div>
      <div class="smil-timeSegments"></div>
      <div class="smil-timeCursor"></div>
    </div>
    <div class="smil-right smil-currentTime">00:00</div>
  </div>
  <div class="smil-tocDisplay"></div>

</nav>