New hackable teaching kit prototypes for Webmaker

TLDR version of this post: we have new Thimble prototypes for creating your own hackable teaching kits. Please help test and make them better by sharing feedback through #teachtheweb or by filing a handy feedback ticket here.

In Mark Surman’s recent post about where Webmaker.org is headed, he lays out five key priorities for “Webmaker 2.0

  1. Rebooting the brand to focus on makers of all ages
  2. Building a gallery to show all the awesome makes
  3. Creating a Make API so anyone can make a gallery
  4. Deepening learning with challenges + badges
  5. Making it easy to create hackable teaching kits with Thimble

This post is about that fifth element: making it easy to create hackable teaching kits with Thimble. Laura Hilliger, Julia Vallera and the mentor team have created new prototypes toward making this possible — and also updated their thinking and content strategy for hackable teaching kits on webmaker.org going forward. This post shares the prototypes and summarizes the new thinking.

Kit prototype

How do hackable kits work?

We want to make it easy for anyone to create their own teaching guides and lesson plans for teaching digital literacy, webmaking or any content relevant to mentors and learners. To that end, we’ve created a set of new prototypes in Thimble. The templates are built around three key teaching elements:

  • your learning goals. What are you trying to teach? What will people learn?
  • your learning activities. What activities, projects or hands-on making are you going to do?
  • additional resources. Cheat-sheets, handy reference guides, further reading, etc.
  • tying it all together. A complete kit then ties all these elements together into one handy link.

Kit prototype -- edit

New Thimble prototypes

Try them out now. Clicking on a template below will open the Thimble editing window, where you edit the content on the left and see how it will look when published on the right.

The templates can also make it easy for people to create multi-page teaching guides. Check out these two examples:

profile page

What’s the goal?

These prototypes are just a small first step. By eventually making it easy to display what mentors are creating through a gallery, and surfacing these community-generated resources onto webmaker.org/teach, we can:

  • showcase what others are doing. See how other educators and mentors around the world are teaching and making. Sharing great activities and lesson plans.
  • enable easier remix and localization. You can just hit the “edit” or “remix” button in Thimble to immediately start translating, moving stuff around, adding your own images and links, etc. When you’re done, you can just hit “publish” and publish to a new, easily shareable URL for what you made.
  • make it easy for people to work their own way. The beauty of working in Thimble and simple editable HTML and CSS is that people can create and share however they want. Your Thimble make could follow our existing template — or you could hack it to include whatever you want: a link to your own blog post or web site, article, third-party resources, etc.

We know not everyone likes to edit HTML — and we’re working on alternate workflow for that, like Mentor Mob.  This is just a small first step.

Building Webmaker 2.0

What’s our content strategy for these hackable kits going forward?

  1. Move to a “make-based architecture.” Up to now, our teaching resources / “Hacktivity Kits” have been their own separate content type. Moving forward, we imagine kits and educational content to be just another “make,” like any other — tagged so that mentors and educators can easily find them.
  2. Simplify our nomenclature and terms. We’re no longer referring to these teaching guides as “Hacktivity Kits” or “Hacktivities” — we’re going to simplify and streamline our nomenclature, using terms that are already familiar to people and easier to localize. (More on that soon.)
  3. Test and refine these Thimble templates in our MOOC. Through the launch of our new open online course, we’ll be in close touch with hundreds of educators, techies and mentors that can help us test, refine and create their own content. This will be made easier by new “save” functionality in Thimble — so our target is to have an early alpha version of this feature ready to test by May 23.

“Everything is a make”

They key design principle here is that, going forward for Webmaker.org, everything is a “make” – and it will soon become dramatically easier to see and remix what other people are making with Webmaker tools like Thimble and Popcorn.

The NYT -- Common Core

Can we flow great content like this into our these new prototype templates?

 How to get involved

Join me for “Teach the Web:” a free online course from Mozilla

11kv24n
by Ankit Gadgil, Mozilla community member and Mozilla Rep
inviting you to take part in “Teach the Web

a new free and open online course from Mozilla.
Learn more or get started here.

Webmaker Mentor -- 1-poster

As a techie and volunteer teacher and mentor from Pune, India, I’m super excited to be a part of Mozilla’s Webmaker community. Teaching digital skills and helping youth get their first taste of what’s so amazing about making, hacking and coding on the Web are why I love what I do.

It’s so rewarding to see kids’ faces light up the first time they “get it.” The realization that the Web is made out of code they can shape and remix and create themselves is life-changing.

It’s like teaching someone a new superpower! :)

That’s why I’m so excited to invite you to a new free and open online course from Mozilla on how to teach the Web. I hope you’ll join me and other Mozillians from around the world who are just as committed to digital literacy — it’s a great opportunity to exchange knowledge and work together on how to best encourage the next generation of webmakers.

It’s called “Teach the Web.” It will run from May 2 to June 30. And because it’s an open online course, it’s easy to dive in and connect with others at any time. You can participate in weekly guided discussions, tackle hands-on activities, develop and remix teaching resources, and compare notes with other members of the Mozilla community. Together we will:

  • explore new ways to teach digital literacy, tech skills and webmaking
  • connect with other techies, educators and mentors around the world
  • create your own educational resources that help people learn these skills
  • get ready for our global Maker Party 2013. From June 15-September 15 we’ll be hosting thousands of community-led events and parties around the world.

The Web is an amazing resource. It gives us all a chance to be creators, makers and inventors. We can look under its hood, tap into its power, and rearrange its building blocks.

Once we know how the Web works, the world is ours to make.

 

Learn more or get started here. If you have any questions, please feel free to get in touch with me or some of the other course organizers and Webmaker Mentors using the #teachtheweb hashtag.
Mozilla Pune

Things I made and learned last summer

Creating a new webmaker.org page for mentors

TLDR version of this post:

More context, rationale and design brief below.

Creating webmaker.org/mentors

I’ve been working with the Webmaker Mentor team to create a new page for mentors on webmaker.org. The goal: turn our offerings for mentors into something…

  • a) easy to find and understand,
  • b) highlighting the key calls to action, in a way that
  • c) feels like a cohesive whole, instead of disconnected bits and pieces.

This posts summarizes our work and thinking to date. Building from the context provided by:

“Mentor funnel” and “mentor flow”

This quarter we’re going to focus on two key pieces:

  • a) the mentor funnel. How do mentors find us? What paths and on-ramps do they take?
  • b) mentor flow. What happens once they get there? What are the steps in the process for teaching or mentoring your first time? What’s the psychology and user experience like? How do we make it all easier?

Mentor flow: What are our main calls to action?

Let’s start with the mentor flow piece. What are some core actions and ways for mentors to get involved?

  1. Join. Join our global mentor community. With easy ways to get started, stay in touch, and contribute back.
  2. Teach. Access and share free tools, kits and learning resources. Get started in five minutes or less. Make, teach and learn as you go.
  3. Connect. Connect with other mentors near you, and around the world. Share ideas, compare notes and see what others are doing.
  4. Network. Lots of smart organizations are already doing this work in your community. Bring together code clubs, hacker spaces, libraries, etc. in your hometown, with help from the Hive network.
  5. Get help. Easy ways to access support, find answers to questions when you’re stuck, and go further.

Which of those are the most important?

Answer: JOIN. Our latest thinking is that most important of these calls to action is “join,” and that the page should reflect that as the #1 design goal. If users do ONE thing once they hit the page, that’s probably the most important. Why?

  1. It makes all the other steps easier. Once you’ve joined (by creating a quick and easy account on Webmaker.org, and self-identifying as a mentor), it’ll become easier to:
    • connect with other mentors near you,
    • save the projects you create using Webmaker tools, and
    • share your profile, stories and resources.
  2. It’s our lifeline for staying in touch. Turning casual mentors into repeat mentors, and hopefully moving up a ladder of engagement over time.
  3. It’s key for us to track our growth and measure how we’re doing. We want to 10x our mentor community this year. But right now, we have no clear way to measure that.

Design challenge: make sure the value of “join” is clear and compelling for mentors. No one likes meaningless sign-ups or “creating accounts.” So “join” needs to feel good and provide real value. (The killer feature, in my view, is the ability to save your work. Using Popcorn Maker and Thimble is way more awesome with an account, and Persona makes it genuinely painless.)

Ok then. So what might the page design look like, then?

Maybe a wireframe like this:

  • Tier 1: Crisply explain what it our mentor offering is in an inspirational way. Driving into the main call to action.
  • Tier 2: The secondary calls to action. With additional on-ramps and pathways.

Using Popcorn to help tell the story

Explaining what’s on offer in a crisp way is a primary goal. This stuff isn’t necessarily obvious or crystal clear for people encountering it for the first time, and both “webmaking” and “mentors” are unfamiliar terms for many. So let’s…

  • Capture it in a single headline. It should be inspirational and telegraph our non-profit, “let’s change the world together” ethos.
  • Use a simple 30-second Popcorn video to explain. Doesn’t have to be fancy — just audio with pages and links over top. That way we can pull in the actual tools and resources, in addition to just talking about them.
  • Summarize the story in three sentences. Focused on what, who and why.

A global community of friendly humans on a mission

One of the key pieces of feedback from our mentor feedback is that we need to signal our ethos. That this isn’t just about software or teaching people to code — we have a shared mission, and we want to work together as part of a big tent for teaching the world the web.

The other key piece of information that needs to come across is the fact that this community is real — it’s not just an idea; we have real people doing real, inspiring stuff around the world. We need to signal that with our imagery and message.

I’m not a designer. But here’s a quick and dirty mock-up that tries to pull that into practice:

  1. “Let’s teach the world the web.” If mentors gathered under a banner in a crowd, what would that banner say? What words would they paint on a t-shirt? Why do they care about this?
  2. Supporting calls to action help spell out the value proposition. The three supporting calls to action try to unpack or explain the value of “join us” — while also linking straight through to those pages.
  3. Human, global, real. The video poster image says we’re a) a community of friendly humans that’s b) genuinely global and c) real.
  4. Bringing together groups and orgs in your hometown. From our user’s point of view, it’s about something you do with other organizations, not just by yourself. In a way that speaks to hometown civic pride.
  5. Supporting links and content go below. Primarily: the #mozhelp Scribble Live feed, to get dynamic, mentor-generated content on the page. Plus supporting links for pages to support, FAQ, etc.

The copy and design are rough

But what do you think about the general strategy, calls to action and copy? And how do we ensure the value of joining is clear and compelling?

What do Webmaker mentors want?

Last month we interviewed 80+ Webmaker instructors, mentors and community leaders. Here’s what they told us.

Mozilla Festival
This year, Webmaker is all about two big hairy audacious goals.
We want to dramatically grow our user base of…

  • 1) makers. creative self-starters with something to say or show on the web.
  • 2) mentors. enthusiastic instructors, teachers and techies with a maker spirit. Passionate about helping others level up their digital skills.

Dec 2012 - Webmaker Strategy from MoFo Board Slides.014

What do mentors need most in 2013?

Last year, we grew a Webmaker mentor community of around 1000 instructors around the world. They gathered through our Summer Code Party, at the Mozilla Festival, and on webmaker.org to test out new Webmaker tools, teaching guides and event kits.

The intrepid Laura Hilliger, Michelle Thorne and others held interviews with 80 of those mentors last month. This post tries to summarize what they had to say. Mostly by synthesizing Laura’s excellent initial post and mulching in feedback from our Webmaker community call. The key findings:

Right now, there’s no easy path from Webmaker.org to our main page for mentors.

1) Our resources are too hard to find.

There’s no easy way to see or grab our teaching tools, event kits and activity guides. As a result, many mentors say they’re encountering roadblocks or lacking confidence to run events, teach for the first time, or design their own agendas.

  • DIAGNOSIS: Blame the mullet. In 2012 we focused on a “messy in the back, tidy in the front” strategy. This meant creating a lot of interim documentation in a messy mixed bag of etherpads, blog posts, wikis and prototype pages.
  • But now we need to tidy the mullet. Consolidate, clean it up, and ship it. Working with mentors to do it.

Activity kits for Webmaker mentors

NEXT STEPS: Make our mentor resources more discoverable, simple and remixable.

  • Discoverable: Easier to find from Webmaker.org. (See Jess Klein’s post on IA). Right now there’s no easy path from Webmaker.org’s front page to our mentor resources. (As in: none at all.)
    • Low-hanging fruit: ship version 0.1 of “webmaker.org/mentor” this quarter.
  • Simplify and add summaries: Right now, the “hacktivity kits” are overflowing with detail. To pull more mentors in, they need a more streamlined overview of the learning objectives and activities included.
  • Remixable: Easy ways to remix, reshuffle, and re-post agendas and activities. So that mentors can customize them to their own needs.
  • Tagging? Webmaker projects inlclude tags that make it easy to sort by skill (HTML, CSS, Javascript) and topics (music, games, photography, etc). Maybe mentor resources should as well, to find what you’re interested in faster?

Summer Code Party

2) People want help with the “soft skills” of mentoring.

Things like facilitation techniques and other practical resources for presenting, teaching and coaching. Many of our mentors are passionate open sourcers and technologists, but don’t feel confident about teaching or coaching — because they haven’t done it before. *Anyone* should be able to become a mentor — but first we need to ensure they have the confidence to really do it. (See also Laura’s post and Chris Lawrence’s Ignite talk on similar themes.)

NEXT STEPS

  • 1) Provide “soft skill” resources and HOW TOs. Curate some reusable resources (like slide decks, videos, etc.) for mentors to use, hack and expand on. We have the beginning of this on the Mentors wiki page.
  • 2) Open up more mentor-to-mentor communication. Ways for mentors to ask other mentors for help, get examples of what’s working, see how other people are doing it, etc. Encourage this on the Webmaker newsgroup.
  • 3) The human touch. Provide more of a human touch? What about regular online “Learning Labs” or community calls on “How to teach digital skills with Webmaker?” Or regular office hours for one-on-one help? How do we make “more real help from humans” a part of this mix? How do we go out and participate in other people’s communities?
DSCF8554

Clint Lalonde and Emma Irwin connected with each other in Victoria, Canada, then ended up hosting this hack jam event and start the beginnings of a #YYJ Webmaker community.

3) People want ways to match-make and find other mentors near them.

  • Mentors want to figure out who else in their local area is working in this domain. Educators are looking for technologists and vice versa. Webmaker.org should help people match-make and connect at a local level.
  • Listing needs and asks. Making it possible for people to offer skillsets (“I can help you teach Javascript!”) as well as specific asks or requests (“Anyone want to help run a workshop with me in Delhi?”).

NEXT STEPS:

  • Webmaker profiles with geo-tags? Ultimately, Webmaker.org will include profile pages that could help with this.
  • BUT: what could we do sooner? Rather than waiting for new functionality to ship, is there something we can do to make this easier in the short term? Simple social hacks, existing tools, better use of a Mentor-focused newsgroup, making creative use of an existing platform like reps.mozilla.org, etc? (Laura is already doing some of this analysis.)

Webmaker is part of a larger learning movement that stresses learning by making, doing and collaboration. Michelle Thorne’s new “making as learning” / North Star graphic.

4) Clarify what’s in scope for the webmaker community
e.g., “Does my piece fit?”

  • A lot of people are trying to understand how their particular “thing” fits in the larger Webmaker initiative.
  • For example, if their project or learning activity isn’t explicitly about the web, or is focused on physical hacking, rather than digital hacking (e.g., Arduino, 3D printing, etc.), or teaching Scratch, is Webmaker still for them? What’s in, what’s out?

NEXT STEPS:

  • Document some clearer community guidelines. We’ve embraced a broad “learning by making” philosophy. And we want to embrace kindred tech and approaches to learning in our community, not just exclusively Webmaker tools. At a broad level, our guidelines or “Webmaker Manifesto” would probably include some basic pillars like.
    • 1) web. Digital literacy, etc.
    • 2) making. Our north star.
    • 3) open. As per the Mozilla Manifesto.

Joe & forward piece

5) Telegraph our non-profit ethos and desire to build a big tent.

Mozilla is different. And so’s Webmaker — we’re a free open project built by the people, for the people.

  • We need to signal that open, freedom-loving ethos. Webmaker is more than just teaching people how to code. And it’s more than just a Mozilla “product.”
  • Webmaker is part of a larger non-profit Mozilla mission. It is meant to embody an open web ethos of participation, empowerment and digital citizenship.
  • It’s also something that we want to actively build together with others. That’s the key to impact and scale: inviting others already doing smart work in this space to build and learn together.

NEXT STEPS

  • Make sure this comes across in key pages and moments. A “let’s work together” message. Need to show how Webmaker is an open product built by community (see David Ascher’s excellent “Volunteer-powered product development?) This tends to come across loud and clear at Webmaker events. But how do we translate it into our story, product experiences and language?
  • Work with movement spokespeople. One mentor recommended working with movement spokespeople, like James Whelton and others, who are active in the space and not necessarily connected to Mozilla. Working with people that have visibility, so that they share our message and we bring in theirs.

Mozilla Festival London 2012

Get involved

What are some ways we can all ship some of the improvements quickly? Look for more follow-up posts and threads on this going forward, but in the mean time, here’s some ways to get involved: