MentorN00b : matchmaker matchmaker make me a match!

I have been doing a lot of little projects for one off events lately.  Like this badge claim page I made for the recent Mozilla Summit:

 

Or the one that I made for Mozilla Festival:
 
Usually we try to make one - offs more meaningful by actually doing some iteration on them or using them as a use case to inform the core product that we are actually working on.  So for example, I will probably work with our development and design team to figure out how to incorporate these kinds of claim pages into BadgeKit and will use the feedback that we got by standing and watching hundreds of people "test" out the sites as a usertesting and research exercise.

For these two events we also made something that I would put in the category of "schwag". Which, yeah - can totally be fun to make, but kind of usually feels a little meaningless. Here are the buttons that my teammates Chloe and Emily and I made for the events to help people to get interested in Open Badges:

This exercise, (I have to admit - quite surprisingly) turned out to be a meaningful design exploration that keeps on giving to us things to think about on the badges project. As Emily explains in her blogpost, the badges took on another life in practice. People hacked them and used them to give peers a glimpse of their identity - but not just identity with a capital I - really a deeper, more nuanced thing - how people self identify.

One day, I was in a coffee shop with Atul and Mike - thinking about the badges schwag and we were kind of doing our usual brainstorm of - wouldn't it be cool if ..... - and we came up with an idea for a prototype that could have pretty tight parameters. I would categorize this as a prototype that's not designed to scale. 

What we realized was - that at these events we would be seeing people with different kinds of expertise and desires and how in a perfect world we would match-make button wearer's so they could help each other out to learn skills. So for example, my button said that I was a javascript n00b and if Mike's button said that he was a javascript nin.ja we could be paired together.

What the three of us started to hack on was an app - where people could sign in, state their interests and then get paired with a like-minded friend to help mentorship. I could imagine this being something that could be taken further - so after a match is made, a mentor could help a n00b to develop a learning map/goal or trajectory and suggest or create badges for the n00b to work towards. Using the tools offered in BadgeKit, the mentors could then provide peer assessment for the n00bs. Additionally, the feedback loop could be closed by the n00b then giving the mentor through various kinds of mentor badges. This would in essence develop a mentor - n00b community and give participants the ability to always identify as somewhere on the spectrum for different skills or activities as mentors and/or n00bs. I particularly like this idea - that someone could be a mentor and a n00b at the exact same time. 

Here is a mockup that I worked on to start to express the idea:

We haven't gotten super far with the prototype, but I could see this as something that might be interesting to test out with the Hive or the mentor community activities at Mozilla.

Virtual Hackjam: Emergency Hack Lab

It's almost a year. A whole year - since the day that my life changed when Hurricane Sandy came and hit my hometown of Rockaway Beach, New York. I'm pretty emotional about it, but as I always say - the best form of revenge is iteration.

Last year, when the hurricane hit, I scrambled with local hackers and friends to pull together emergency web resources. It wasn't an easy task because we had amazing constraints: no power or wifi in the Rockaways, limited ability to travel to and from the area, and little news presence (among many other things).Things that we did: created paper prototypes for forms and interactions between locals in need and volunteers, and then we made digital tools to solve the problem. We even had a hackjam a few months ago in conjunction with the National Day of Civic Hacking to start thinking about this. We made it through, and eventually emergency response turned into rebuilding and life started to kinda feel like a new normal.

Then something happened - in Oklahoma. Tornadoes.  In a funny twist of fate, I got contacted by Luke Crouch who works at Mozilla with me (although I didn't actually know him until this moment). Luke reached out to me because he was basically doing the same stuff that we were doing in Rockaway several months before him and wanted advice. Then, I was contacted about another Mozillian - Stormy Peters - from Colorado, where there were massive floods. She also wanted advice and us Rockawayites knew all about flooding so we were able to give her more info than she ever would have wanted. I'm sure that you are seeing the theme here: emergency + hackers = emergency hack lab.

This Thursday - Saturday I am going to be hosting a virtual hackjam in conjunction with the Mozilla Festival. At the Festival I am going to be running what's called a scrumboard session on designing an Emergency Hack Lab. This means that I am giving a 10 minute talk on civic hacking and I will announce the goal to create an Emergency HackLab kit for people to pick up and use when an emergency strikes in their community. Then asynchronously we have a list of subtasks that people can complete to accomplish the overall goal.

You can check out the scrum tasks here. Feel free to add to the board and/or pick up a sub-task.

Right now we will be having virtual contributions from Rockaway to Oklahoma to Nairobi - it would be really great to get some local civic hacking action going on in your community. Join us, this is going to be a global hacking party!

Make - First Interaction Design

 On the Webmaker community call and on his blog this week, Brett Gaylor presented that we are currently aiming to solve several key design questions for Webmaker. You can read about the challenges and solutions here.

In an effort to move Webmaker into a space where from the moment you come to the site - you are encouraged to make something (what Brett is calling "make - first" interaction design) , I am going to show some prototypes that I have been working on. 

You can see all of them here in larger, more legible form.

Even though the fidelity of my prototypes might seem more polished then usual, as always please note that these are mockups and prototypes designed for the purpose of iteration, so please give me feedback and ideas for things that I should consider when moving forward with the design. 

First, lets take a look at the Landing page. The idea here is that from the moment that you land on Webmaker.org you are given the call to action to tinker and interact with content in a very real way. What you are looking at is actually a meta "Animated webpage" project that is comprised of several types of projects - so in essence the content type becomes a gallery. The page is instantly hackable and as the user, starts tinkering with an x-ray goggle like interaction- they can choose to deep dive and reveal the more advanced editing tools. While this is a mockup for the landing page - you could imagine that it is also a prototype for how a user might be able to pull and view content from the gallery - so the user gets the opportunity to digest a project first as consumable content and then engage with it as a hackable medium. This kind of interaction was deeply inspired by my reading of the work of Mimi Ito - particularly in her book Hanging Out, Messing Around and Geeking Out. Here is what it might look like with some timely content.

The next mockup is a first iteration of what a gallery could look like for us. A user does not have to be logged in to view the gallery, but if they are they will have a more personalized lens as well as the chance to engage with the content creators. 

In this mockup (which admittedly is the most nascent) you see a view of what a user might see if they are clicking on a particular users name - it's a filter of the content that the user made public. This could include their projects, badges or assets. Ideally this page will have some level of hackability - a la MySpace - so maybe the CSS of the page could eventually be modified by the individual users - since in essence this becomes a bit of a portfolio page. To be clear, I'm not saying it should look or feel like MySpace - but there was a certain level or ownership and creativity around that kind of personalization.

Finally, I'd like to share with you the prototype that I hacked up with Atul yesterday. It's a prototype, so you know don't tweet far and wide - but you can check it out to start to see what it would be like to have hackable content on a landing page and remember to click "D" for deep dive to bring that content directly into Thimble. 

Building and Protecting My Community

During my day job, I am a designer at Mozilla and I advocate for learning how to understand, contribute and code the web so that you can protect it. I often talk about how the web is a hand crafted community that can only represent the world that we live in when individuals build webpages, so that they can make their mark and be part of the conversation. Two weeks ago, when Hurricane Sandy hit New York, it devastated- and in many ways destroyed the community that I grew up in- Rockaway Beach, New York. I went to my neighborhood and saw that people could not communicate with eachother or the world outside Rockaway- no cell phones, no internet, no power. When I returned home I built a small website- rockawayhelp.com just to give people the information they needed and to provide a way for families of locals to feel more connected. It was this act of webmaking that launched my participation in protecting and rebuilding my physical community.

I feel that the work that I do in the open source community and the open educational resource community prepared me to take on this small bit of leadership. Rockawayhelp.com to date has a minimum of 6,000 hits a day. Our facebook account has 8,873 users and our twitter account has 450 users- not ground breaking, but it's something. We put up a small volunteer form and in the first day got 600 volunteers. We put up a help request form and got 150 requests. We have active conversations on our social media channels and have a real active presence on the physical streets of our community- going into houses, cleaning out basements, connecting people who don't know where their family members are and working with the vets at Team Rubicon and the software developers at Palantir.  Here are 5 lessons that I learned as a designer- that helped translate into community engagement and activism:

Lesson 1: Working in the Open- Creates Community
When I was sitting at home worrying if my parents survived the hurricane- I went online and connected with friends and other Rockaway residents who were watching the local news and having panic attacks about their homes and families. We shared information, brainstormed ideas and gave each other the confidence to venture back into our community when the storm ended. I was scared, but knew that I had an online community. This is something that I learned while working at Mozilla- if you work in the open, you can share information and connect to a like- minded community. We do this daily with our Webmaker activities, starting with Hackasaurus two years ago- at first it was just some geeky librarians, Atul and myself- but then it expanded into this massive OER that people immediately responded to because we blogged, shared free resources and created content as a group- failing publicly and then iterating and improving publicly.

Lesson 2:  Leverage the Expertise of Others
So this one was a no- brainer, but in a disaster like this a lot of things needed to be done- and quickly I saw that I was not good at everything. Just for the website effort- we leveraged Blue State Digital who kindly volunteered with us and helped us to set up a database- an effort lead by Matt Kelley. Additionally, we had some who were good at blogging and others who were on the ground and could give us up to the minute info to communicate out. And when we got those volunteers--- and saw we couldn't figure out how to efficiently organize 1000 + people in one day- we partnered with Team Rubicon who had systems in place and a plan. This is commonplace in tech, you can start a project on git, and then get a collaborator to take on parts and be your wing-man.

Lesson 3: Put out Rough Prototypes- and Iterate
Doing software design- I usually throw out an idea that is crap,  then user test it- figure out what part of it works, and then build on that idea to make a new prototype. It's messy- but it works because you get your concept out there in the hands of real users. We are constantly doing this at Rockawayhelp. We really have never dealt with any of this before- so we have to be alright with trying things out, failing a little, and building a more efficient way of doing things. A simple example of this was that we first were standing in front of the local church and collecting addresses for people who needed help and then assigned them to crews of volunteers. We quickly learned that this wasn't the best way to go about things because we were too few people to get everything done- so we streamlined the system by creating forms.

Lesson 4: Peer Mentoring =  Best way to Learn a new skill
For the past few days I have been working with Palantir on mapping needs and getting help out to the community. I learned their system pretty fast by getting mentoring from Alec and Dave, who are experts in the software. There are also a ton of things that I had no clue how to do- like how to break up concrete or the best way to lift heavy furniture- that we have to do over and over and over- so I ask people who look like they know what they are doing to teach me and then I try it out myself. It's just like a hackjam- where I am learning how to code something by sitting near a code ninja.


Lesson 5: Show Up, Be Present- Get Social Karma
Every good hacker knows that they need street cred- whether that is just being at conferences or making yourself known through some form of social currency (like badges) and that holds true for community activism. You need to walk the walk- pick up a shovel, be authentic and ultimately make an effort to proactively rebuild and empower your community.

Just like the web and open source world, your community and neighborhood is hand crafted and it can only be protected if you learn the inner-workings of it and geek out a little by making it all that it could be.

Designing the Platform to Teach the Next Generation of Webmakers

Mark wrote about vision, then Erin wrote about product definition, and then Chris wrote about the engineering and so now, I will give you the fourth chapter in the Webmaker epic: how we are designing Webmaker.

Several weeks back I gave a lightning talk at the Mozilla all hands in Toronto on this very topic. Here is a screencast of that (slowed down to human speed- so it's longer than 3 minutes)

Concretely, what does this mean we are doing?

1. Evolve the brochure site into a platform
By evolving the architecture of Webmaker to be focused on the maker (learner) we will shift from a brochure site into a platfrom. We will be designing an experience for a user who is coming to Webmaker to make something. At Mozilla we are super successful at activating users to take action at physical events and meetups like MozFest - we want to harness that grassroots spirit and concretely mobilize users to feel empowered to come to Webmaker and make things. This will mean right from the start giving the user simple calls to action to make, meet and learn.

Above is a sketch of what the future webmaker.org could look like.
The focus will be on things that you can make and users will be able to open projects within or be directed to the appropriate tool to make that project.


2. Unify the user experience
In order to evolve the site we are going to focus on unifying the Webmaker user experience and interface. This means:

• designing a unified login
• establishing common terminology, controls and user interface
• incorporating the tools into the same experience
• designing learning pathways that could span multiple tools and projects
• defining calls to action focused on making something
• creating opportunities for self organizing and personalized curation of learning
• empowering the user by giving them the ability to set goals, receive data and feedback on their making and learning activities
• evolving the branding so that the language and visual vocabulary focus on making

One aspect of this will be implementing a universal navigation (wireframed above- click to see more exploratory images). This is a navigation that we will be implemented across all properties in Webmaker, and allow the user at any given moment to tap in to their projects, learning dashboard and community. At first we will be implementing a version of this in Thimble and as we iterate, we will roll it out across Webmaker- apps and web properties. The idea is that it will be a personalized navigation- so it will speak to your unique Webmaker experience.

 interactive filter (sketch)

projects based on your interests

When you log in to Webmaker through Persona, you will be able to access a dynamically generated set of projects that are catered to your specific interests - through some kind of interactive filter. In conjunction with the projects, the personalization will extend throughout the site - you will see events in your region, people who have similar interest, skills that you can improve upon etc. Some of the specifics of this are still being brainstormed by our Learning and Engineering teams, however this is just a rough sketch of what will be possible in the future.

3. Design with learners, iterate, release- rinse- repeat.
Our m.o. here is to design not just a user experience- but a learning experience. We will be designing with learners and those hacktivators who are in the position to teach or empower learners so that we are constantly testing, iterating and improving our product.  We have a fantastic community of learners and hacktivators in the Hive - in New York, London, Berlin, and beyond. Additionally we have a large extended community of individuals passionate about contributing to an open source and open educational resource project. We are going to work with this community as a lab- where we can launch early and often, user test and develop this platform out to be a tool that they will use.

Image credit: Hive NYC- check out the blogpost here

There's a lot of work described here and we aren't going to being rolling it out all at once. Our next major milestone will be in November. We are going to be releasing a bunch of half baked and fully baked ideas at the Mozilla Festival. It is a great chance for us to user test concepts, incubate ideas and elevate great ideas into our products.  It's going to be a fantastic few days where our designers will be out in the field doing what we do best- making stuff in the open, with passionate community members. To continue to be part of the conversation, please join the Webmaker mailing list or come to our weekly calls.

Beta Testing Kitchen Tables

Imagine sitting in the kitchen with your friends, hanging out, chilling and making some cool stuff on the web. That's the idea behind the Kitchen Table event type that Mozilla is in the process of Beta testing for release in conjunction with the Summer Campaign.   This past week, I did my dogfoodin' and  Beta tested the Kitchen Tables event type with my family.

The Beta testing was scheduled for a two week window, that really coincided with Passover, so I decided to take this as a positive thing and do a "Hacking the Holidays" themed kitchen table. I had done that concept as a Hack jam with Mouse, but this was more challenging because it was with- the parentals.

THE INVITE:
I asked my parents if they would be up for spending some time and making some things online with me when I visited. I created a little url based on some discussions I had with other user testers to send out as an invite. I said it would only take 30 minutes and we could have tea while we were doing it. This was a difficult sell. My parents, both retired teachers, and honestly very supportive of the work that I do and are the first people on the soapbox about teaching youth to learn to code, were very resistant. My mother, who is a web and computer enthusiast agreed to do it, and my dad said he would watch and asked if there was anything with paper that he could do. I followed all of the steps in the wiki, but I frankly think that a lot of Mozilla's efforts do not reach this older audience. In fact, I would go so far as to say that Mozilla appeals to 30 somethings - teens but does not really reach out to 40 + users. I think that my sell only worked because I forced my parents to do it.

THE KITCHEN TABLE:
So, as I said, this was pre- Passover. My parents sat with me and Adrian (the boyfriend) and I took them to my kitchen table website and decide to teach them how to hack that. It was a bit crazy because I had to move fast to keep them focused. They really weren't super into it- particularly my dad. I don't think that there was a real value add for him in terms of hanging out and doing this, other than spending some time with me. Perhaps if he had a grandchild to do this with -- ahem, not suggesting ANYTHING! -- he would be more willing because it would be an activity that they could do together. We slowly lost him and just ended up with my mom.

 

The session went alright, we essentially made a goal of hacking the "kitchen table" website to be a Passover table. The hardest concept for my mom and Adrian was to understand that every piece of content needed to be on the web to  show up. For example, they needed to put images up on flickr, or pull from an existing website. My mom really wanted to just upload an image to the editor and be done with it. This is a really important concept that I think that we need to do a better job communicating.

After about 25 minutes of tinkering and joking- my Mom came up with this:

 

All in all- it was a success! My mom shared her link with friends and family. My dad, asked if I had something for him to read with, but I have a hunch my Mom will convince him to try it out on their own time. 

WHAT WOULD I DO DIFFERENT/ NEXT STEPS:

• I would have a better ask
• I would pitch the activity more casually while I was already spending time with them
• I would bring another laptop- I forgot that my parents only had one
• I would find webpages/ things that they are already interested in and hook them there
• I would give my dad something with paper to do- already in the works for the Missions project
• I am going to send out my Mom's website to her temple community and suggest that we do a bigger meet up to teach others how they can make their own webpages

How One Girl is Changing the Web

Zainab says it best:

"The Mozilla Hackasaurus workshop was a once in a lifetime experience."

From X-ray Goggles to Hack Jams, Mozilla is giving kids the tools to remix and shape the Web — moving them away from consuming what already exists and toward shaping and building a more awesome Web — and I'm thrilled to be a part of it!

Projects like Hackasaurus are helping to create a generation of Webmakers — and today I want to introduce you to Zainab Oni, an extraordinary 15-year-old who is not just remixing the Web, but is teaching other kids how to remake it into anything they want it to be.

Zainab is a sophomore at Hudson High School of Learning Technologies in New York, where she serves on the school's MOUSE Squad — a student-led technical support team that's part of a national program to help improve technology literacy skills. She's also a rising star in the world of hacking — something she recently discovered meant a whole lot more than just "snooping around."

Through a project led by Mozilla's Hive Learning Network in New York, we held some Hackasaurus workshops at MOUSE headquarters, and it was there that Zainab's understanding of the Web began to transform. Hackasaurus opened the door to a whole new way of thinking about the Web for Zainab, simply by exposing her to how she could create and change it. Now, as a Mozilla Youth Ambassador, she'll be taking everything she's learned to help facilitate Hack Jams with her peers at after-school programs later this year using Mozilla tools.

Take a minute and check out Hackasaurus to find out why it's changing the way Zainab thinks about the Web.

The online experience presented to most kids today is one that is delivered in a shiny, fixed package — but Mozilla is changing that. Just ask Zainab:

"We were introduced to Hackasaurus, a tool that makes it easy to mash up and change any website with the use of X-ray Goggles. You can remix any website and change it up to become your own...it was new and exciting."

When we launched Hackasaurus in beta, I saw kids eagerly interacting with the tools — and challenging each other in "Hack Battles," a super cool prototype we developed at last year's Mozilla festival — and I knew we had to grow this project and get it into the hands of even more kids.

And thanks to Mozillians like you, we are developing a summer campaign around learning and making. We'll be reaching out to folks of all ages and inviting them to take part in creating really cool stuff on the Web. And they'll get the opportunity to see what others are making across the globe and even the chance to hack each other's coded creations.

We're still putting the finishing touches on our summer plans — but you can sign up here and we'll keep you updated.

Giving everyone the power to remix, make, and share the Web is something we are committed to. Thank you for being a part of it.

Am I bombing on this prototype?

A few weeks back, I wrote about the "love bomb" experiment that Atul and I were working on. In many ways, I think that this project has more potential for impact than anything else that I have created while I have been working for Mozilla. It is the learning experience that we aspire to create- where someone is so completely motivated by their desire to make something, that they are compelled to learn or teach themselves something new along the way. Because of this desire to create an authentic hands-on learning project as well as the clear accessibility of the project, my colleagues at Mozilla asked Atul and myself to think about re-skinning the project as a potential campaign around Valentines Day.

In general, I like this idea. I like the thought of someone getting so excited about the thought of hand coding a valentine for their loved one.  I immediately drafted a few concepts:

1. A DIY love letter

 

version 1

 

version 2

2. A Love Generator- kind of the closest to an e- card maker

 

3. Magnetic Attraction- based on the concept of magnetic refrigerator poetry.

 

Immediately we had a positive response, particularly towards the "Magnetic Attraction" prototype. I showed this to several people in the Mozilla community and did some at - home field testing (re: my mother understood the project). I played a bit with the actual format for the interaction. The concern here was that the current X-Ray Goggles tool and/ or the Web Page Maker prototypes might be too high level for say, the audience who receives the Firefox newsletter. So I went to work trying to focus on how to communicate that something has "html" or "css" underneath it's hood. 

 

 step 1: select a template

 

step 2: select an asset on the template and drag and drop the magnets to remix the html.

As you can see from the mockup, I really limited where you can click with your mouse.

 

 step 3: voila. share through social network buttons

Looks good, right? Sure we would need to iterate on this, but this is a workable prototype.

Not so much- the problem that I am having with this, is that although it is accessible, and people who have some innate fear of html will be able to really just dive in- ultimately, they aren't tinkering or experimenting with a markup language. At the end of the day, a user is really just editing fields, as if this was a form. I suppose that if someone hovers over a

tag, then an explanation could pop up linking to some database like the MDN which could explain what that little strange object on a page means. But, I think that our goal at Mozilla is not to hide code, or to break it down to a level that is so obscure that you aren't even given the opportunity to experiment. That said, I'm not really sure where the starting point is at the moment.


My colleague Michelle Levesque, is working on figuring out appropriate "Web Literacy Skills" for Mozilla to support and develop around. The very first category of skills that she writes about is "Exploring". I think that this really hits the nail on the head in terms of why this prototype might not be worth pursuing- we are limiting exploration by curating what elements can be edited and how a user should try to edit them.

Of course, I am flip flopping on this topic and keep thinking about how we need certain parameters so that a learner can feel like they have learned something, even if it is a very small skill in the big picture that is webmaking.

On Inspiration and lovebombs

Mari Moreshead is awesome. She works at the Mozilla Foundation as the grease (wo)man, the person you go to when you need to get things done- and done well. She has personally helped me a whole lot- particularly during this one trip that I had to make while I was in Berlin with the flu, having to present Hackasaurus localization. Having a trustworthy, reliable and sassy co-worker is not only helpful, but it is needed in order to be a successful worker. Atul Varma and I were talking about her and thinking about how we wanted to thank her.

" We should make her an e-card."
" No we should make her an html5 lovebomb"
"Wouldn't it be cool to make a lovebomb maker that uses the Hackasaurus tools?"
"We could send lovebombs to all our co-workers who do small great things"

And so, we made lovebomb.me It started out as a simple sketch- and turned into this experiment in love and code. The idea is that you can send someone a lovebomb- or love note/ nod of appreciation and while you are doing it, you learn a little bit of html and css along the way. Here is one of the first mockups I made....



What was kind of fun and happenstance- was that I was running a bunch of workshops for teenagers at the exact time that we were tinkering with the idea. Atul had whipped up a prototype of what we are calling the Webpage Maker- a tool that will help users go from hackers to webmakers. I tested that tool with youth- and while iterating on both tools at the same time, somehow the two combined and became the current version of the lovebomb.


Designing the lovebomb has been a lot of fun for me- and it's rewarding because people immediately pick it up and want to just express joy or love or something happy. People smile using the tool.

I created a few templates, but I want to talk about one of them. It features a character, loosely - ahem- based on my colleague Chris Lawrence. Chris has a love of weird hats, masks and accessories in general (think- viking hats and gold sunglasses). I made this e-card in his honor, because he is another colleague of mine at Mozilla who is doing amazing work every single day. He isn't just working on one project - but possibly 30 at any given time. So, this is my way of giving him some "big ups."
Next steps- well Atul and I are working on a more polished iteration of the lovebombs - I hope to post some of my mock ups in the next few days. I see that this is a great opportunity to teach someone something because there is ultimately a huge DESIRE to make the end product. So I am trying to build out the mock ups and keep true to some of the core learning objectives for Hackasaurus. But at the end of the day, it comes down to this: when you are inspired - you will make things that are challenging and difficult to make-despite yourself. I am just lucky enough to have amazingly inspiring co-workers surrounding me.

Oh and Mari- here is your lovebomb.

Hacking the Holidays- Peer to Peer Jam at Mouse

Yesterday the Hive Mozilla Youth Ambassadors ran their first event as facilitators. The hack jam was held at the Mouse headquarters and we had a nice mix of youth, adult "squad leaders" and adult program coordinators from the Mouse staff.

The youth facilitators came a few hours early to prepare for the event and do a walk through of the event plan. There was a lot of set up work to do, including: making a screen for the projector (see below), putting out the chairs, making sure the X- Ray goggles bookmarklet was installed on all the computers, and checking that the laptops were fully charged. This was a bit tedious, but we referred to the "IT Checklist" included in the Hacktivity Kit for pointers.

Before the event started, we paired off and role played "worst case scenarios" and facilitated them. We had a lot of fun pretending to not know how to navigate webpages!

Finally, event participants arrived and we kicked things off with a welcome and the "Hack Dance Battle" icebreaker. Zainab acted as emcee for the youth jam and thanked everyone for coming. Youseff then promptly asked everyone to get our of their seats and to get their groove on with some hackable dancing. (Neil dj-ed and we played a LOT of the Combination Pizza Hut and Taco Bell song) Omar lead the group discussion about what we mean when we say hack.

We then showed the two videos that the youth created on the topics of "What is Hackasaurus" and "Why You Should Learn to Code." Check out the REMIXED video that Omar and Youssef made here.

Jose gave a great demo on how to use the goggles, pointing out the importance of looking for opening and closing tags when editing html. The first hacking challenge that everyone participated in was hacking the google site. The youth facilitators broke up the participants into groups and tag teamed on the facilitation. Then, the youth did a shareout:

It was really great to see the youth teaching the adults how to code:

The final challenge of the day- "the moment you have all been waiting for," as Omar announced- was "holiday-ifying" any website of your choosing.  After an hour of break outs, hacking, and full on merriment, we had a group shareout. Participants messaged the text the mob site that we put up for the event, with their new websites:

Here is one of the hacks:

After the event was over, and we cleaned up the space, we held a team meeting for the youth facilitators. We debriefed the event, and discussed what went well- the icebreaker, the videos, the holiday challenge- and what we would do differently- time of the event, and dedicating more time to the practice mini challenge. Finally, I gave the youth who completed all the workshops, including this peer facilitation event- their cerification:

Overall- I would say that the event and the Hive MoYo Ambassador trainings were a success. I will follow up on our next steps in iterating this process in another blog post- but I leave you with a team photo. Special shout outs go to Marc Lesser and Meredith Summs of Mouse for hosting and being involved in all of the workshops:

Hack Jams for Youth, by Youth

The Hive Mozilla Youth Ambassador training theme of the day today was facilitation- aka Hack Jam 101. Although the thought of running an event can be daunting- our team of Mouse youth were up for the challenge. Today was the third session in our training series. It was another session of work that I have not tried out before- but I consider this a prototype for  a more formalized opportunity for youth.

The first thing that we did today- was discuss the upcoming hack jams that the MoYo Ambassadors will help facilitate. First, on Monday they will be running a hack jam for their peers at Mouse- and then later in the year they will be helping TASC with several after school programs.

We started the training by reviewing the 5 steps to running a hack jam for youth, which is part of the recently launched Hacktivity Kit.

The 5 steps guide readers from preparation to facilitation of an event for youth using the Hackasaurus tools.  The team of youth were quick to note that a hack jam- is like a music jam session- where participants could riff off of eachother's work!

We then reviewed the logistics for the event on Monday.
We looked at the event space and came up with several solutions for creating a maker space where participants can work in the "open".

 We also brainstormed and came up with a theme for our event- called "Hacking the Holidays." Our team quickly noted that we covered a lot of things in our two workshops, so we decided to simplify our hack jam by only covering hacking (not getting into webmaking). We came up with a list of learning objectives for the 2 hour event:

The group then set to work. The first order of business was coming up with a good ice breaker to communicate what we mean when we say "hack".  I made them play a game that Chloe Varelidi and I modded for the Media, Freedom and the Web festival.  Each participant got 3 cards- a Goal, Mechanic and Concept card. The goal and concept cards were filled out in advance but the youth came up with the concept for the final activity.

They came up with pretty creative solution including a tweet game- where users had to Hack a Tweet and a game where participants were presented with a problem in a photograph and had to edit the photo to in order to save the day. Ultimately- they decided to go with a dance battle game.

We then took some time to come up with an event plan for the jam. We came up with an agenda, and assigned roles:

We then paired  off an practiced talking to each other about the project. I then challenged the to make videos of their pitches on the topic of What is Hackasaurus and Why is it Important to Code.
(You can check out the fantastic video on Why It is Important to Code here.)

What is Hackasaurus by Omar and Youssef

Finally, we walked through everyone's roles for Monday and talked about what to do when troubleshooting. It was a great day and I know we all are looking forward to their first event on Monday.

Transitioning from Hacking to Webmaking

Today was the second HIVE Mozilla Youth Ambassador training at Mouse. Today was focused on making that pivotal move from hacking bits and pieces of the web with the X-Ray Goggles to designing webpages with HTML and style. This was the first time that I have ever lead a followup workshop to the initial "hack jam" type workshops where participants learned about the open web, what we mean by "hacking" and an intro to the Hackasaurus tools. For me this workshop is very important because it moves from the "a ha" moment that many users have when using the googles to look under the hood of a webpage, to the "roll up the sleeves" and get to work phase. Or, as Mimi Ito might say- from messing around to geeking out.


We started out by stretching our content creation muscles with the Superhero Design Challenge. Participants were asked to look back at the "I think X makes the web special" and the "I think that X makes the web difficult to use" brainstorms that we did in session 1. They chose one aspect of the web to defend or compete against if they were a Superhero of the Open Web. They then used this as the basis for creating  a short web- ready biography for their fictional superhero of the open web. We discussed what makes a good bio as well as what makes for good writing on the web.

The youth presented their stories:

"Captain  Super wall-  he has the power to throw fire balls at villains how try to cross the wall. A long time ago in a far school named cyber squad. were super wall a student was elected to go visit one of the most advanced technology in the hold city, but something when wrong in it’s visit. he touched  one of the controllers and he  when into  cyber world. it took him to  firewall city. where his mission is to let good information go in and burn bad things. "- by Jose

Then, they paired up and created an arch nemesis for their partner's superhero. Here is Captain Super Wall's arch nemesis, Title Wave:

"Title Wave sends title waves of info that is not needed does that because he thinks all info is good and also thinks that all info should have equal rights " - by Youssef

Now that they had bios, they were ready for some publicity! They went into online news organization sites and remixed the pages to include stories of their characters saving the day, or ruining the day as it were.   The youth had a great time taking photos with Photobooth on their computers and doing post production and image manipulation in Aviary:

They remixed the html and style with the X- Ray Goggles and presented their projects and talked a bit about how they trouble shooted problems with the coding.

We then discussed the various components that make up a webpage, including:  HTML, CSS, graphic assets and text content and reviewed that the combination of an opening tag and its corresponding closing tag and the content in between is called an element. 


The final challenge for this workshop was to make an instructional "how to" webpage from a template- without the goggles. In order to do this, we all came up with things that we we experts at- we had a peanut butter and jelly maker, a hand turkey illustrator, a good music connoisseur!  I gave everyone a crash course in web DESIGN. We talked about the importance in identifying a user and designed information architecture as well as wireframes for all of the sites.

Participants used a prototype that Atul Varma and I worked on as a spin off of the Hackbook that Anna Debenham created to help users craft webpages from templates.

In the end, everyone made the "how to" pages and we all critiqued the structure, style and design of each presenters work.

 How to Sleep


Overall the workshop was a  success - we user tested old and new tools as well as curriculum and workshop participants came a way with 2 webpages that they made in a stretch of 4 hours!

Next Up:  How to Run a Hack Jam on Friday.