The Mullet: What We Made Last Week

I spent last week in San Francisco with a few dear colleagues from Mozilla. Definitely take a look at [Ben Simon]( & [Michelle Levesque’s]( great summaries, too.

Hundreds of whiteboards and office snacks later, I’m happy to say we ended the sprint with:

* **A simplified event menu married to Mozilla’s learning offerings**
* **Sweet mockups** for
* **A platform solution** for creating, importing and aggregating Mozilla-related events
* **User-friendly How-Tos** for planning an event
* **A summer campaign** to encourage young people to learn code around their kitchen tables
* **A mullet**

## A word about mullets ##

First impressions go a long way. When people hit a website for the first time, they’re partaking in a complex calculation to determine if the site is even worth the server space it’s hosted on.

Give people a clean, inspiring and relevant first page, and after a few clicks in, they’re less likely to write you off if the design isn’t perfect or the copy not as crisp.

**This is called the mullet principle: fresh & well-groomed in the front, stray & straggly in the back.**

With this model in mind, we set about making our event mullet site. And bad coiffure puns along the way.

## Even simpler event menu ##

I’ve been blogging darn near exclusively about the [event menu]( It was a joy at the sprint to realize that we can get it even simpler and more fitting to our needs.

Here’s what we came up with:

#### Kitchen Table — Learn with friends ####
*2 – 10 people. 1 hour. At home or a cafe.*

The kitchen table, if it goes well, has the potential to be the most interesting event type.

Inspired by the [Brooklyn Kitchen Table Coders]( and Mark’s insight into the value of informal, at home learning with friends, (see also [Webcraft Night](, the kitchen table model is super simple, low-barrier to organize, and can be repeated dozens of times with variations on whatever you’re keen to learn.

* **Call your friends** to come sit around your table.
* **Explore a skill** you want to learn. For example, try on the Hackasaurus X-Ray Goggles to start playing with HTML. Or swap in another tool or curriculum you like, such as Popcorn Maker, a Codacdemy lesson, a Scratch how-to, an MIT course, or whatever!
* **Try it out yourself.** Apply what you learned by making a little demo. In the Hackasaurus example, you can remix your favorite website. Share what you learned with your friends, and if you want, with the rest of the world.

#### Hack Jam — Make something ####
*10 – 50 people. A day. In a spacious office or community space.*

A hack jam is about teams building prototypes that create real world solutions. It works best when you mix in different skillsets and address a challenge or topic that you all care about.

We’ve been testing a variety of hack jams, and folks familiar with the tech world also know these events come in a range of flavors.

Here’s our recommended agenda, with the same invitation to hack it and make it your own!

* **Race to 100 Ideas.** Agree on a design challenge and rapidly sketch as many ideas you can. The students at Product Dundee have [tested and documented this method]( to much success.
* **Play with a new tool.** Identify a tool or technique to help you build your idea. Teach others how it works, too. For example, you can try out Popcorn Maker if you’re interested in hacking on interactive video.
* **Sprint to a minimum viable prototype.** Work in teams to transform your idea into a prototype. In the Popcorn example, teams sprint to convert a filmmaker’s vision into an interactive demo for the web. Share what you made.

#### Pop Up — Build a community ####
*10 – 100 people. A half day. In a school gymnasium, community space, or public library.*

Recently we’re in touch with an fantastic network of people looking to seed a learning network in their city. From London to Tokyo and Toronto, and now San Francisco, Los Angeles and Pittsburgh, Hive Pop-Up events are happening everywhere.

Rising from the very real need to document the format, we recommend this agenda for throwing a learning party:

* **Curate stations.** Find local organizations and individuals who care about your topic and complement one another. Get them to propose table-top activities that take 5min, but can expand to more.
* **Sample the offerings.** Gather everyone in a large space with activities spread across stations. Invite participants to try out the different offerings.
* **Play as long as you like.** Participants stay at the stations as long as they like. Share back what you made at the end of the day.

## I can haz learning ##

Laura Hilliger has [written extensively]( about Mozilla’s learning philosophy and how it intersects with research-backed pedagogical methods.

She describes that a good lesson contains three parts:

* an orientational activity (icebreaker)
* an instructional activity (demo)
* a practical activity (design challenge)

**And we realized that these learning categories fit neatly with our three agendas.**

Each agenda, depending on its primary goal, focuses more or less attention to each of these activity types. A kitchen table gathering focuses on the instructional most, while a hack jam works on the design challenge. And since all of our events contain all of these learning activities, as the Mozilla Learning team continues to build out webmaker curricula, the event menu is set to grow with it.

## Sweet Mockup ##

When it comes to mullets, it really helps to have a talented hairdresser on your team. Someone to style up the ‘do just right and get you past your [skullet](

Thankfully, Jess Klein [led the way]( and designed this landing page:

It’s not done yet, but what we really like so far is:

* **a big, colorful image** for each event conveying the scale and vibe
* **simple navigation** to toggle event types and discover the supporting materials
* **a map** that zooms into your location to show nearby events
* **one-click event importer & creator** to add to the shared calendar

And we already have a few tweaks for the next version:

* better visualize the “participation ladder” of the three events. Kitchen table is the smallest, then hack jam followed by pop up. The navigation should reflect this scale more intuitively.
* lead with what you’ll do at the event, rather than our shorthand names. For example, rather than say “kitchen table” in the nav, it should be “learn with friends”.

Obviously we’re in need of a copywriter, but that’s another story. ^^

If you click on “Find”, it’ll bring you to this page, which displays our shiny event aggregator as a huge map:

## Aggregator ##

When people want to organize or attend an event, we’ve got to provide a simple way for them to “say, I’m doing this.” [Ben Simon]( and [I blogged]( before about how we need a good third-party solution and what the key feature requests might be.

We walked through our user stories again, discussing what our aggregator should support:

* A participant finding and signing up for an event
* An organizer creating an event
* An organizer importing an existing event
* Organizers and participants sharing what they made and giving suggestions for improving the program

There are deeper cuts of course to each, and I’m happy to share the details to anyone that’s curious, but the main conclusion was:

* No solution out there fits our feature requests 100%
* We need to support federated solutions. If an organizer has an online presence for an event already, it needs to be super simple to import it to the Mozilla calendar, if they choose.
* We need super simple event creation. If an organizer doesn’t have a page yet, we need a low-barrier, localization-friendly and HTML-ifable way to create an event.
* Participants must be able to search events by topic, event type, location, and date.
* Organizers must be able to communicate with participants before and after the event.
* Mozilla must be able to communicate with organizers before and after the event.
* Participants should have an easy opt-in to join the Mozilla mailings.
* The platform we use must abide by Mozilla’s rigorous privacy policy.

Given those criteria and a close examination of BlueStateDigital, the platform we currently use for Mozilla’s membership program and mailings, Ben & I realized that we already have our solution at hand.

It’s not perfect, and it will no doubt have its limitations, but given the demand to get a good aggregator up and running, plus already supporting our main user stories, **BlueStateDigital (BSD) + a customized event importer seem like our solution.**

## How-Tos ##

Another aspect of running events is not only getting the right agenda, but getting help with all the nuts & bolts that go into it.

We looked at a number of event toolkits from other organizations: Maker Faire, TEDx, Mouse Corps, even Tupperware.

**Our resounding conclusion was that these how-tos are way too wordy and often not relevant.** People aren’t stupid, so we don’t have to explain every minute detail. But there are some frequently asked questions and places where you might get stuck.

Led by Laura and inspired by the [Gidsy guide]( **we’ve got a simple-to-use and eye-pleasing set of event how-tos,** covering everything from how to get the right space, to mitigating budget items, to facilitation and documentation suggestions. (Link coming soon!)

There’s still a ways to go, especially on the road to pretty Gidsy-esque design. And I’m sure this is a resource we constantly revise. But it’s great that we can provide these how-tos as part of the event kit.

## Summer campaign ##

And now, with all those bits above, we asked ourselves: **how are people going to find out about this?** How are we going to create momentum around webmaking events? How are we going to test our agendas and resources?

**We’ve got a plan for a testing round from now until May, followed by a [summer campaign](**

#### Testbed ####

Each event agenda will be taken for a spin. Feedback and tweaks to the agendas will be rolled into the kit before launching the campaign in May.

* **Kitchen Table:** In late March, Mozilla staff & any interested community members will host kitchen table sessions at home with friends. Share back how it went.
* **Hack Jam:** Throughout March and April there are a number of Popcorn, Hackasaurus, and OpenNews hack jams on the calendar. We’re going to document how the events went in London, Cannes, Berlin, Lüneberg, Warsaw, and Buenos Aires.
* **Pop Up:** We’ve also got a round of pop ups on the horizon. If all goes well, we’ll have at least one tester in London, San Francisco, Los Angeles or Pittsburgh before May.

#### Campaign Time ####

From now until June, Ben & I will recruit and engage partners who might be interested in the campaign.

In early May we’ll announce the campaign officially with the /events site. Sign-ups and on-going recruitment until mid June.

In June (exact date TBD) there will be a day of webmaker action where people all over the globe host kitchen table sessions, hack jams, and all sorts of learning & making events for the web. It hopefully becomes part of the summer spirit, and people continue learning together with friends & family.

The summer will conclude with a final burst of activity with larger events in Mozspaces and with Hive networks.

#### Festival ####

All this webmaking action brilliantly sets up the Mozilla Festival, which will be Nov. 9 – 11 in London. Organizers and learners will come to London, share their experiences, and facilitate massive kitchen table sessions all throughout the venue.

**What do you think about that plan?**

## Thanks! ##

It was a very productive week. A huge thanks to fellow sprinters: Jess Klein, Laura Hilliger, Ben Simon, Michelle Levesque, Lainie DeCoursy, and of course Mark Surman & Allen Gunn.

*Images: “[Mullet](” by [Kyle Plante]( / [CC BY-SA 3.0](, and Event Site Mock-ups + Characters in Event Menu by [Jess Klein](

Comments (3)

  1. Pingback: What are we working on? Collusion blows up, badges go big, events gear up, Big Honkin’ Summer Campaign | o p e n m a t t

  2. Pingback: Results for week beginning 2012-03-04 « Iron Blogger Berlin

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.