Webmaking 101 for Journalists: A Prototype

Lately, I have been thinking about how to teach people something unexpected while they are working on something that they are passionate about. It sounds kind of obvious, but my goal isn't to trick someone into learning or to serve them medicine in their sugar. I want to create authentic learning experiences around webmaking projects.  I believe that if you are really invested in something, then you will seek out the learning. It's not an innovative idea- but it is a guiding principle behind my design. So, with this in mind, recently, a bunch of my Mozilla colleagues and I brainstormed around the idea of how to teach journalists the basics of html, css and copyright in an authentic way.

As a group, we came up with several learning objectives - really focused on the introductory skills that a) anyone who was starting in webmaking would need and b) a journalist would be compelled to learn

The idea is that a user will come to the the website, and then enter a url of a story that they have written. If they do not have a url, then we will generate a creative commons page from propublica.com

 
Next,  the user's story will be scrapped of style and put into the js.bin shell-similar to our lovebomb and webpage maker prototypes.  However, instead of letting a user just do pure hacking in the wild- there is a third layer (seen above in the highly visible color of yellow). The yellow layer is a slider that will provide progressive instructions and tips to the user.

 

I started to work on a mock up just to play around a bit with look and feel. (above)  I made a mood board using pinterest. Basically, we are going for clean, serious- but playful, modern.

Right now, although I think that this is a good first prototype, I am really thinking about the learning objectives here. Are these the right learning objectives? Are we just skinning this as something for journalists because that is one of main target audiences at Mozilla? I'm wondering if we should be making a more generic webmaking 101 tool, and creating supplementary curriculum for the target audiences- as opposed to tools for the niche audience. In some ways, this has more merit, because the tools could be informed by the various end users- journalists, filmmakers etc, however it could appeal to a much larger constituency. On the other hand, if we create a tool that could easily be reskinned and modded for different audiences, I could see the value in that.

However... if we were to in fact make a more general webmaking 101 step by step tool/ game- ultimately I wonder if this really is the best way to communicate to new users the excitement and potential of webmaking?

Next week my Mozilla colleagues- Atul, Brian, Dan, Michelle, Erin and I will be doing a design sprint on this. I would love to hear any thoughts that you might have, reader friend.

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.

Designing a Badge System

 

If you had to come up with a system to formally recognize the work that you do, what would it look like? In a nutshell, that is what a bunch of my colleagues and I were tinkering with at the recent Mozilla Foundation All Hands meeting. We were exploring this idea because Mozilla is committed to developing  the Open Badges Infrastructure- a tool that could act as a platform where you can give and receive "badges" or achievements for various kinds of skills- both hard and soft. In addition to that, Mozilla is also going to be acting as a badge issuer within this context.

Over a year ago, I blogged about how I felt conflicted about badges- stating that they were formalizing something informal and sucking the fun out of everything. My thinking around badges has really started to change. Part of the reason for this is that I actually understand what the goals of the project are and have started to truly be inspired by the huge potential for this kind of rethinking of accreditation systems.

(this is a random badge that I drew) 

Truly, think about yourself as a teenager- or not even- think about yourself as a 30 something, who is stuck at work doing one job, but dreaming of doing another. You can't afford to take off and go to graduate school, so you take classes online, and participate in some online interest specific communities. Over time you have a real skillset, portfolio and community of peers- however- no way of really showing potential employers that you are not just ready for a new job - but qualified and have EXPERIENCE. Enter badges. If you had received a badge for all of your involvement in the various communities- something that a potential employer would recognize and acknowledge, you would be getting that job and rolling up your sleeves!

In our prototype (above) we envisioned a system- where one can get a "Mozilla Remixer badge" by getting several lower level badges at different sites where they remixed things- a cut and paster badge from Martha Stewart online- for collaging, a CSS superstyler from Hackasaurus for changing the code on a site, and a beat dropper from SoundCloud for making music mashups. I wrote all the steps out above, but what's fun about this prototype is that the badge itself evokes the spirit of the achievement. You are proving you are a Remixer, by mixing up different orgs who all help you to remix. Yes, that sounded like something Dr. Seuss would say. Obviously, there is a lot of thought on this already out there in the world. But, as a designer, I don't really get something until I try to figure it out in connection with a problem. So here, we had a problem and we came up with a prototype to fix it.

Anyway, my ideas on this are constantly evolving, but I think that's part of the process of really getting something right- getting a lot of things wrong. Hey, I deserve a badge for that, or do I?

Infusing the Web with Play

Last week, the Mozilla Foundation crew held an All Hands. For the uninitiated, an All Hands is where everyone from the whole organization gets together and does mini design sprints on different topics and projects. This is super important for us at Mozilla because it gives our teams- who often are all over various parts of the world working remotely, a chance to have some much needed face to face time.

One of our sessions was focused on our potential future website at the Mozilla Foundation. With our new focus this year on really engaging different kinds of webmakers in authentic project based learning experiences, we were asked to envision what the landing page of our new site could look like. My team- which included Dan Sinker and Geoffrey MacDougall did a ton of brainstorming- but ultimately we landed on the idea that a user should be able to immediately come to our site and be able to make something.  Here is a sketch of what we came up with:

 

The basic concept here is that we offer our user various opportunities to make something with our web properties and tools. The "wheel" which is an homage to a wonder wheel or something that you would see at an amusement park or game show- is actually an interactive filter. I feel that although this might not be the end result, what is nice about this prototype is that it immediately evokes the idea of play or fun.  Sometimes we get so focused in filling our websites with information, that we lose the chance to highlight our core values and voice. I think that our mock up speaks with our voice and although there will be hopefully many iterations and other ideas, I hope that we always keep to our ultimate goal of empowering people to learn something through making something that they are passionate about.

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.

Hacking your World: HIVE MoYo Ambassadors

Yesterday I lead the first of a series of 4 hour intensive learning labs at Mouse. This series of workshops will train youth to become what I am calling Mozilla Youth Ambassadors (it's a working title). That means that youth will learn Hackasaurus, HTML, CSS and facilitation in order to run hacking events and/or clubs. You can follow our group blog here.

The overall structure of the workshops will be:

Session 1: Intro to hacking, “open web” and intro to X-Ray Goggles

Session 2: Deeper dive into HTML and CSS – design challenge

Session 3: How to run a hack jam

Session 4: Practice jam with peers

Yesterday the teens came in and we started out by mind mapping. This gave us a chance to make sure that we were all on the same page when we talked about hacking, tinkering and coding.The teens paired off and responded to a challenge to define hacking in a tweet. Here are their final definitions:


We decided to test their definitions. The next challenge was to hack a board game. Our two teams chose to hack tic tac toe (which became Finger Tac) and monopoly (which became Hackopoly). The teams wrote new rules and then playtested each others games.

Throughout the course of the activity, we talked about our process and what options we had in terms of hacking the games.


After a break we talked a bit about what makes the web unique. As a group we came up with a list of things that make the webs special and things that make the web difficult to use:
We then talked about how the web was designed to be participatory and collaborative. We looked at a slide show that I created as part of the Hacktivity kit. It was nice to user test that- it worked really well. I think I am going to change some of the slides about installation because they are outdated since we changed the interface for the tools.

After a brief intro to the X-Ray Goggles, the teens hacked Google, and then I challenged them to hack a website of their choosing. The goal was to make as many changes as possible to hide the identity of the original site.

The teens hacked facebook, Tumblr, the NYC MTA page, Twitter, Apple and even the Mouse page!Our next workshop is tomorrow. We will be learning HTML and CSS and moving from hacking to webmaking!

Hello Mozillians

Last weekend I had the opportunity to go to MozCamp EU in Berlin . It was a truly inspiring experience- meeting community members from all over the world. I really learned a lot about localization. It was at once exciting and educational for me to learn to the extent that I did about how to reach a global community with my work from a global community. There were so many new faces and names, I just wanted to take this opportunity to say hello and how honored I am to be amongst you.

Prototyping Win for Hackasaurus at Mozilla Festival

This past weekend the Hackasaurus team was part of the Media, Freedom and the Web conference in London. 3 days = Hive London Pop Up for youth, 3 design challenge sessions + 2 game prototypes for the project. Whew! I thought it would be fun to re-hash the design challenge that we did with participants, because we ended up with 2 really useful prototypes that got me thinking about the future direction of the project.

We framed our design challenge prior to the festival as:

Interested in making a hackable comic book featuring superheroes of the open web? Or maybe an interactive story embedded with quests for webmakers? We want you to bring the spirit of the Hackasaurus design jam- online -- with a self-directed learning experience on www.hackasaurus.org. This is an opportunity to think creatively about how to teach HTML and CSS to middle school aged youth (10-15 year olds). We have designed a toolkit for Web designers and developers, that will give you all of the assets that you need to create an engaging online activity.

WHO SHOWED UP?

We had over 2 dozen participants- including teenagers, teachers, developers, designers, journalists, community activists and game-makers

HACK THE DANCE

The workshop started with our hack-the-dance icebreaker that we do with youth at hack jams. We did this because a) it's a whole lot of fun and b) we wanted to set the tone that we were building playful interactions for youth to learn HTML and CSS using the Hackasaurus X Ray Goggles.

BRAINSTORMING

After we got loose, we kicked off with a brainstorm game. Everyone broke into groups and were given three cards- a learning goal, a mechanic and an end product and they had to come up with a concept for a Hackasaurus learning project based on that. We played 3 rounds, and in each round the participants were given the chance to write - in more and more information on the cards.

As a result- we came up with about 7 different ideas for what we could prototype. We defined prototyping really loosely- it could be a storyboard, a sticky sketch, a tweet, an interactive website- whatever you needed to do to just communicate your IDEA.


Participants self-organized into groups and by the end of the day we had two distinct projects: Doctor Web and Hacker Battle.

Even though the groups started out with 2 ideas- after numerous iterations and sketches, the concepts morphed. For example, one group- started out with this idea for a Popcorn.js curated Hack gallery for users to display their remixed websites- however, after pitching to our group and getting feedback and iterating on the concept- that exact idea turned into a Hack Battle game where participants could post their hacked websites up on to a challenge page and compete against other users who changed the code on the same website.

THE PROTOTYPES

Title: Doctor Web
Concept: You are a doctor responding to a medical emergency! Your interns incorrectly fixed a patient (Website Master) and now he is a complete mess. It's your job to dig into his HTML and CSS to fix him up- but hurry up before his health completely depletes!

Interactive Prototype:

Title: Hack Battle

Concept: After learners remix a website - they can submit their hack into the Hack battle where website visitors vote on the best hacked version of whatever website the learner started from.

Interactive Prototype: here


DEMO + BEYOND

We demo-ed the prototypes at the Mozilla closing circle and received some positive feedback. So what now? I feel very excited about the possibility of these prototypes because they fill two voids in our project: Doctor Web gives users a playful introduction to both the X-Ray Goggles and HTML/CSS and Hack Battle provides a social, community space for users to collaborate and communicate.

We need to continue building out these prototypes. One of the great things about the Festival was that we had the end-user in the room with us developing, that is- a teenager. Also- we had a plethora of experts helping to design these experiences. Let's continue to work together- because, clearly, the power of numbers and the diversity of community members engaged in webmaking and media-making has proven to be a huge win for us.