Remix + Hack the Firefox Home page. No really, we want you to!

If you are a Firefox desktop user, you may have seen the Firefox default home page. This page contains a default engine web search and quick links to downloads, bookmarks, history, add-ons, sync and settings. Additionally, if you happen to have had tabs open the last time you used the browser,  you can restore them from the home page.  We often share important news and updates underneath the search bar.

This is what I currently see at the Firefox default home page. Animated gifs FTW.

THE OPPORTUNITY

A few months back, Hive Labs, (a new project within the Hive Learning Networks designed to explore the question “how do we use design to transform edupunk ethics into great products?”), was approached by the Mozilla Foundation Engagement team to brainstorm how the space could be used in an innovative way to educate Firefox users about the Maker Party. Maker Party is Mozilla's global campaign to teach the web, uniting educators, organizations and enthusiastic web users with hands-on learning and making. While I have to admit, I have never really created something in the realm of owned media, I saw this as an interesting opportunity for Mozilla to show (vs. tell) what Maker Party is all about.  

THE CHALLENGE

The team (which included creative individuals from many different projects across the Mozilla Foundation and the Corporation) immediately identified the opportunity space and came up with a few project requirements:

• use the space in an interactive way to introduce the website visitor to web literacy skills
• acknowledge that the visitor may not have ever seen code before, and understand that we do not know what web literacy skills they are coming to this space with
• create something playful

THE SOLUTION

While we tossed around a few different ideas, the solution that we came up with was to create a Webmaker Goggles - like experience that lets the visitor see under the hood of the webpage.

After doing some initial sketches, we realized that we needed to define our learning objectives for the project.  While normally this is fairly easy to do - you say that the learner will come away with the ability to remix a paragraph written in HTML and understand what p tags are, or something very basic. Here, the challenge was two-fold: 1. the webpage visitor did not identify as a learner and 2. as I mentioned before, they might have no knowledge of the fact that the code is written in order to create a webpage. So, after several false starts, we came up with the the goal of having the website visitor walk away understanding that if you look under the hood of a webpage, you will see it is made from code.

Initial sketches for the snippet included replacing the Firefox logo with an image

After the learning objective was defined, we had to interpret what that meant in terms of interaction design. I believe that the most effective way to empower a user is to put the tools in their hands to allow them to directly address and grapple with the thing that they might learn by tinkering with it themselves. We tried out a few different iterations on this. Above is a sketch where the visitor might get instructed to remix the page from a video. The idea was to have a person in the video describe what to do, and then the learner would use the goggles to swap out the video for an image or video of their choosing. This idea was fun, and had a lot of potential community localization opportunities. However, there was a risk that the user would just not click on the video, and miss out on all the fun.

Ultimately, we ended up utilising what Atul Varma calls “cruise control” —that’s where we model the behavior in order to encourage the site visitor to try it out themselves. It looks like someone is typing out all of the words on the screen.  We decided to focus on revealing a little CSS, because you can use real words to represent colors and seeing those colors immediately can have a visceral impact on the site visitor. Here is a screencast of the interaction:

** Update: You can see the actual interactive experience by going to the Firefox homepage or if you can't get to that, check it out here.  **

The crazy and kickass cast of characters who pulled this interactive off are:  Chris Lawrence, Atul Varma, Brian Brennan , Adam Lofting, Hannah Kane, Jean Collings, Mike Kelly, Chris More, Matt Thompson, Aki Rose Braun,  David Ascher, Geoffrey MacDougall, Brett Gaylor, John Slater, Eric Petitt, Mary Ellen Muckerman, Pete Scanlon and Andrea Wood.

We’re really excited about this project, as it represents one of the first interactive uses (if not THE first) of the space of the Firefox home page. We hope that as site visitors dip their toes into understanding the craft of the Web, they’ll be inspired to learn more through Webmaker and Maker Party.  Our ultimate goal is for people to feel empowered to become creators, not just consumers, of the Web.

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.