Monthly Archives: February 2013

Webmaker TLDR: cloudmashing, WebLit and goats vs. sheep

TLDR = your summary of what’s happening with Mozilla Webmaker this week, focused on mentors and builders — the community making Webmaker

Prepping for blast-off: Help test sequencing for Popcorn Maker

Dave Humphrey calls it “web media sequencing.”  Jacob calls it “cloudmashing.” We like to think of it as “web-based video editing,” or video editing in the cloud. It lets users weave multiple video and audio clips from across the web into a single experience — then seamlessly publish and share with a click. Like copy and paste for web media.

Help test it out by making your own mash-up

We think sequencing is going to be big. But we need your help testing it first. The Webmaker product folks humbly request you try to make something with it now.  Take one video from You Tube, for example, and layer it on top of another. Tell us what you think.  Is this too hard?  Don’t get the point?  Missing a feature?

  1. Try it out for yourself now. Fire up Popcorn Maker on our development site.
  2. If you find bugs, report ’em here.
  3. Share what you made. And let us know what you think. Chime in on this thread in the Webmaker newsgroup.

Need inspiration? The web is full of fun:

Help build an open web literacy standard for the world

Their mission: create an open web literacy standard for the world. Following lots of great response on the Webmaker List and other channels, the Web Literacy Standard team is starting a new open community call. Their goal: work with you to launch a beta version at the end of this quarter.

Web Literacy Standard | new community calls. open to all. Thursdays at 8am PST / 11am EST / 4pm GMT

Get involved

Webmaker metrics presentation

Stats! Stats! Stats! JP and others have established an infrastructure for measuring Webmaker statistics.  This presentation from JP and Ross walks you through it. As of the most recent Webmaker update, we are now tracking:

  1. Number of projects published, deleted, saved, created, and remixed.
  2. Number of user logins, crashes, feedback reports, errors.
  3. More coming soon.

Planet Webmaker round-up:

OpenNews Learing will be a regularly updated section of case studies that dig deep into the thinking, design, ethics and execution of code in journalism, written by the people that know this world best.

Lots from Planet Badges this week:

“As [badges] mature, have the potential to disrupt formal education in a way that none of the technology innovations we’ve seen in the last couple of decades have.”

Creating a new page for mentors

TLDR version of this post:

More context, rationale and design brief below.


I’ve been working with the Webmaker Mentor team to create a new page for mentors on 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, 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?

Webmaker TLDR: Valentine’s Edition

TLDR = your summary of what’s happening with Mozilla Webmaker this week, focused on mentors and builders — the community making Webmaker

Make your own webby Valentine

These awesome new Webmaker projects make it fun and easy:

Finalized Webmaker 2013 plans

We gathered your feedback. We iterated. We shipped. Here are the crystalized plans and roadmaps:

Pushing Thimble’s envelope

We’re seeing some great new projects that set new bars for what’s possible with Thimble. The new Mozilla Bhopal page above, created by Komal, a Mozilla Rep from India, provides a great template for others to remix and re-purpose.

Malcolm did something similar, building off a template Jess presented in last week’s Webmaker call. Click on his “Webmaker Friends” to link through to his daughters’ pages.

Creating a new “Web Literacy Standard” for the world

How can we create a global standard for web literacy together? That was the question mentors, instructors and educators gathered last week to answer in the first-ever Mozilla Web Literacy standard online gathering.

Design new Mozilla WebDev badges

Planet Webmaker round-up: