<|start_filename|>template/index.html<|end_filename|>
<!DOCTYPE html>
<html>
  <head>
    <title>Personas and Pathways for Growing Communities</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href='https://fonts.googleapis.com/css?family=Fira+Sans:400,400italic,500,500italic,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../assets/css/style.css">
    <link rel="icon" type="image/ico" href="https://mozillascience.org/img/favicon.ico">

    <script src="https://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/javascript/script.js" type="text/javascript" charset="utf-8"></script>
  </head>

  <body>
    <aside>
      <div class="image">
        <img src="../assets/images/science-fox.svg">
      </div>
      <nav>
        <a class="selected" href="#introduction">Introduction</a>
        <a href="#steps-to-complete">Steps to Complete</a>
        <a href="#glossary">Glossary</a>
        <a href="#resources">Resources</a>
      </nav>
    </aside>

    <article>
      <div class="logo">
        <a href="https://mozillascience.org" title="Mozilla Science Lab">
          <img src="../assets/images/science-lab-logo.svg" />
        </a>
      </div>

      <h1>Personas and Pathways for Growing Communities</h1>

      <div class="meta-information">
        <p class="summary">
          This activity is designed to help you identify potential users and contributors,
          understand their goals and motivations, help them find a way into your project,
          and grow them into strong, committed community members.
        </p>
        <div class="details">
          <time>45 to 60 minutes</time>
          <p class="difficulty">For beginners</p>
        </div>
      </div>

      <section class="presentation-details">
        <section>
          <h4>Format</h4>
          <p>
            This is a short writing/thinking exercise. Best done with a partner or small group,
            but can also be done alone.
          </p>
        </section>

        <section>
          <h4>Target Audience</h4>
          <p>
            Open science project leads and Mozilla Study Group leads seeking to attract and
            grow communities of contributors around their projects
          </p>
        </section>

        <section>
          <h4>Materials</h4>
          <ul>
            <li>A timer</li>
            <li>Pen &amp; Paper</li>
            <li>A way to take notes</li>
          </ul>
        </section>
      </section>

      <h2 id="introduction">Introduction</h2>

      <p>
        Your open project needs users and contributors, but how can you find them,
        get them involved, and keep them engaged and active in your community?
        One way is by creating and using "personas" and "pathways" to help you.
      </p>

      <p>
        A “persona” is a tool commonly used in the design world, to help create products
        and experiences that work for real world users (aka “user-centered design”).
        The persona is an imaginary user, based on real-world observations and understandings
        of actual potential or current users. The persona becomes real to the designer,
        and is used as a tool to test ideas and experiences (for example, a designer
        might ask “Would our user persona, Rodrigo, who is an avid photographer and
        technophile but also an introvert who’s protective of his private information,
        like feature x of our social media platform?”).
      </p>

      <p>
        Personas may be composites of several real-world users. The power of the
        persona is in its specificity; a good persona feels real, and helps a designer
        (or project lead) put their own perspectives aside and empathize with the needs
        and motivations of users.
      </p>

      <section class="example">
        <section class="title">
          <h1>Sample Persona</h1>
        </section>
        <section class="content">
          <p>
            Rashid is a PhD student in astronomy at a university in Southern England.
            He’s outgoing and a snappy dresser, favoring skinny jeans and colorful cardigans.
            He lives in on-campus housing and after a long day at the lab he usually rushes home
            to see his wife and infant son.
          </p>
          <p>
            Rashid took an intro Java programming course long ago,
            as an undergrad, but his research now demands Python skills. He attended a two-day
            Software Carpentry workshop at his institution.
          </p>
        </section>
      </section>

      <h3>About Pathways</h3>

      <p>
        Once we have a persona, we can imagine how they might interact with our project.
        Let's imagine that this process has a few phases.
      </p>

      <ol>
        <li><strong>Discovery</strong> - How they first hear about the project or group.</li>
        <li><strong>First Contact</strong> - How they first engage with the project or group, that intial interaction.</li>
        <li><strong>Participation</strong> - How they first participate or contribute.</li>
        <li><strong>Sustained Participation</strong> - How their contribution or involvement can continue.</li>
        <li><strong>Networked Participation</strong> - How they may network within the community.</li>
        <li><strong>Leadership</strong> - How they may take on some additional responsibility on the project, or begin to lead.</li>
      </ol>

      <p>
        As you create your pathway, ask yourself, what needs to be in place to move Rashid along this pathway?
        What are the potential pitfalls for Rashid-- in terms of his skills, his time, his motivations?
         Once you have a sense of this story, you might list solutions to any challenges.
         Here are a few examples&hellip;
      </p>

      <ul>
        <li>Publicize group meetings via posters around campus as well as on twitter and via email blasts.</li>
        <li>Collect emails of new group attendees for follow up messages.</li>
        <li>Offer an online intro to GitHub for those who join mid-semester and missed the first sessions.</li>
        <li>Schedule meetings for daytimes and early evenings to avoid conflicts with family schedules.</li>
      </ul>

      <h2 id="steps-to-complete">Steps to Complete</h2>

      <ol class="steps">
        <!-- Step 1 -->
        <li>
          <h1>Brainstorm</h1>
          <p>
            In groups of two, read through the following questions. Take notes! Each person
            should answer the question in caps in the time provided. Use a timer to keep
            time for each person.
          </p>

          <ul>
            <li>
              <h2>Who is the person you most need in your community or on your project?</h2>
              <time>3 minutes each</time>
              <p>
                Create a persona for this user. Think of the skill set or attributes you want,
                but ALSO give them a name, age, a place to live, life circumstances (single,
                married? family? student? mid-career?), what they like and don’t like, etc.
                This may seem superfluous, but the more real the persona feels to you, the
                more useful they’ll be. Have fun with this!
              </p>
            </li>

            <li>
              <h2>What are that person's motivations and needs?</h2>
              <time>3 minutes each</time>
              <p>
                What’s likely to get your persona engaged and excited? What are their personal
                goals? Why might they be drawn to your project? What might be the value for
                them &mdash; what can they get out of it?
              </p>
            </li>
          </ul>
        </li>

        <!-- Step 2 -->
        <li>
          <h1>Write</h1>
          <time>3 minutes each</time>
          <p>
            Create a short description of your persona. See above "Rashid" for an example.
          </p>
        </li>

        <!-- Step 3 -->
        <li>
          <h1>Plan a Pathway</h1>
          <time>30 minutes</time>
          <p>
            Using the structure above, describe a pathway for your persona. What are the steps through
            this project? What could stumbling blocks for user? What skills, info, or resources are
            missing that they”ll need to better engage with the project? What kinds of things might
            drive them away from your project?
          </p>
        </li>

        <!-- Step 4 -->
        <li>
          <h1>List your Solutions</h1>
          <p>
            For each potential stumbling block or difficulty your user might encoutner, list a solution
            that you'll work into your design of your grop or project.
          </p>
        </li>
      </ol>

      <h2 id="glossary">Glossary</h2>
      <section class="glossary">
        <section class="term">
          <h3>First Term</h3>
          <p>
            A fictional user, based on real-world observations of actual or potential users. personas are used
            to test and shape the design of a product or experience, so that the final design responsive
            and relevant to user needs.
          </p>
        </section>
        <section class="term">
          <h3>Another Term</h3>
          <p>
            A fictional user, based on real-world observations of actual or potential users. personas are used
            to test and shape the design of a product or experience, so that the final design responsive
            and relevant to user needs.
          </p>
        </section>
      </section>

      <h2 id="resources">Follow-up Resources &amp; Materials</h2>
      <ul>
        <li>
          You may find it useful to review this handout on the the creation of your Contributing.md
          file in light of your new understanding of your users.
        </li>
        <li>
          You may also want to revise your proejct description to better appeal to your users, using this handout.
        </li>
      </ul>

      <!--
      <section class="resources">
        <section class="resource">
          <h4>Resource Name</h4>
          <a href="#">http://link.to/resource</a>
          <p>This is a description of the resource. Summarizes what it is, you know?</p>
        </section>
      </section>
      -->

    </article>
  </body>
</html>

<|start_filename|>assets/javascript/script.js<|end_filename|>
// Navigation 1.0 ALPHA
//
// * Highlights the appropriate element in the navigation when scrolling through the page
// * Scrolls to appropriate section of the page when the navigation is clicked

var sections = [];
var articleSections = $();
var autoscrolling = false;

$(document).ready(function(){

  $("nav").on("click","a",function(){
    $(".selected").removeClass("selected");
    $(this).addClass("selected");
    var section = $(this).attr("href");

    autoscrolling = true;

    $('html, body').animate({
        scrollTop: $(section).offset().top
    }, 500, function(){
      autoscrolling = false;
      window.location.hash = section;
    });

    return false;
  });

  $("nav a").each(function(i,el){
    var sectionName = $(el).attr("href");
    if(sectionName.length > 0) {
      sectionName = sectionName.replace("#","").toLowerCase();
      sections.push(sectionName);
    }
  });

  var jam = $("article *[id]");
  $(jam).each(function(i,el){
    var id = $(el).attr("id");
    id = id.replace("#","").toLowerCase();
    if(sections.indexOf(id) > -1) {
      articleSections.push(el);
    }
  });

  $(window).on("scroll",function(){
    if(autoscrolling == false) {
      scroll();
    }
  });

});

function scroll(){
  articleSections.each(function(i,el){
    var windowTop = $(window).scrollTop();
    var offset = $(el).offset();
    var fromTop = offset.top - windowTop;
    if(fromTop > 0 && fromTop < 400) {
      var id = $(el).attr('id');
      id = id.toLowerCase().replace("#","");
      $("nav .selected").removeClass("selected");
      $("nav a[href=#"+id+"]").addClass("selected");
    }
  });
}
