Tag Archives: mentors

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

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?