Hive Labs at the Mozilla Festival: Building an Ecosystem for Innovation

 

This weekend marks the fifth year anniversary of the Mozilla Festival - and Hive Labs has a ton of fun design - oriented, hands-on activities to get messy with in person or remotely. We are using the event to explore design questions that are relevant to local communities and Hives and to dabble in building out a community-driven ecosystem for innovation. Here's a few highlights:

Challenges to Enacting and Scaling Connected Learning

This year, the Hive track at MozFest (http://2014.mozillafestival.org/tracks/) is bringing together Hive and "Hive curious" travelers from around the world to incubate solutions to shared challenges in enacting and scaling connected learning. We're working together over the course of the MozFest weekend to collaboratively answer questions that come up again and again in our networks across the globe. One question that Hive Labs is focusing on is: How do we build a community that supports innovation in the education space? 

Action Incubator

We will be hosting a series of activities embedded within the Hive track to think through problems in your Hives and local communities and brainstorming solutions collectively. We will be leveraging three teaching kit's that were made specifically to facilitate this kind of design thinking activity:

• Firestarter: In this activity, participants will identify opportunities and then brainstorm potential design solutions.
• User Testing at an Event: Events are a great time to leverage all of the different kinds of voices in a room to get feedback on an in-progress project or half-baked idea. This activity will help you to test ideas and projects and get constructive and actionable feedback.
• Giving + Getting Actionable Feedback: Getting effective and actionable feedback on your half - baked ideas and projects can be challenging. This activity explores some ways to structure your feedback session.

Art of the Web 

This entire track is dedicated to showcasing and making art using the Web as your medium. Follow the #artoftheweb hashtag on twitter. 

Visualization of the Web Literacy Map by Chad Sansing - 

in response to the #mozfest remotee challenge

MozFest Remotee Challenge

Want to join in on all of the Mozilla Festival action even though you aren't physically at the event? This challenge is for you! We have compiled a handful of activities focused on Web Literacy, supporting community - based learning and making so that you can take part in the conversation and brainstorming at the Mozilla Festival. Go here to start the challenge.

You can follow along all weekend using the #mozfest or #hivebuzz hashtags on Twitter.

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.

How to learn more about Net Neutrality

Like many people, I wasn't really aware of the potential impact that opposers of Net Neutrality could have, or for that matter what net neutrality was, until I was introduced to the topic by John Oliver on his tv show Last Week Tonight. After hearing his explanation and comedic rant, I started to learn more about net neutrality. My colleague, David Steer explains net neutrality as the opinion that 

"Data, regardless of who it is from or who is receiving it, is treated equally by Internet service providers."

I like to think of it as opening up the door for 2 internets - one that comes at a cost, and another that is free. Sounds fine, right? You're like .. ok what's the big deal? I'll just use the free one. But just like many other free services that you have used that all of a sudden put up features behind a paywall, your free offering becomes crap - cluttered with ads, slower to use and just a poor man's version of the prime real estate - this too will happen with the Web. 

I believe that this issue is the most important topic for web users (globally), because without the neutral infrastructure of the internet, many freedoms that we take for granted in this hand crafted community - such as speech - become compromised in a privileged and gated web. Opposition to net neutrality threatens democracy, participation and free speech.  But this isn't a hopeless cause, there is actually something proactive that you can do to protect the Web that you love: you can learn more about Net Neutrality and explain it's importance to your small circle of the world why it's important. The goal is to create an educated groundswell that will be able to defend the open web.

Here are a few concrete ways to learn:

1. Attend the free Net Neutrality global teach-ins offered by Mozilla this week
2. Check out the the Net Neutrality kit
3. Do an activity  - here's a 1 hour activity
4. Join the conversation on discourse

I contributed to these kits by making a few activities:

I fight for #TeamInternet to save net neutrality because: You can make an internet meme explaining why you support net neutrality.

Superheroes for Net Neutrality: Calling all Superheroes! The Legion of Thorn has created 2 Webs - resulting in a dystopian state. Avenge them and defend Net Neutrality by crafting a league of superheroes to join Team Web, and remix a comic book webpage to show how they use their superpowers to save the day. 

This comic remix was made by a 7 year old

Regardless of how you learn about Net Neutrality, take some time out of your day to add it to your information diet.

The first 6 weeks of Hive Labs

Six weeks ago, Atul Varma, Chris Lawrence, Kat Baybrooke and I embarked on an experiment we call Hive Labs. Let me tell you about, Let me show you a little slideshow I made about our first 6 weeks to the tune of Josh Gad singing In Summer from the movie Frozen.





So, in summary (or if you aren't the musical slideshare type) the first 6 weeks have been great. We did a bunch of listening and research, including attending events and hackjams run by and for Hive members. Here's a neat worksheet from a Mouse run Webmaker training in New York. 

We did some research and design on tools and resources to support prototyping:

Sherpa is a codename for a tool that helps prototypers define a design opportunity and openly work through the process for designing a solution. We designed some mockups to see if this is a direction that we should pursue. Sherpa could be a back-end for the "Cupcake dashboard" or be a stand alone tool. We spun up an instance of the "Cupcakes" dashboard  designed by the Firefox UX team to help figure out if it is a useful tool to surface prototypes.

We also prototyped a snippet for Firefox to promote Maker Party, worked on an idea for self guided Webmaking and began work on a Net Neutrality Teaching Kit.

Finally, we've shipped some things:

The No-Fi, Lo-Fi Teaching Kit and the Mobile Design Teaching Kit

The No-Fi Lo-Fi Teaching Kit asks participants the question how can we empower educators to teach the web in settings where connectivity isn't guaranteed?

With the Mobile Design Teaching Kit, participants play with, break apart and modify mobile apps in order to understand how they work as systems. This teaching kit is designed to explore a few activities that can be mixed and mashed into workshops for teens or adults who want to design mobile apps. Participants will tinker with paper prototyping, design mindmaps and program apps while learning basic design and webmaking concepts.

A local and a global Hive Learning Network directory

... and a section on Webmaker.org to help guide mentors through making Teaching Kits and Activities:

The first 6 weeks have been great, and we are going to continue to listen, create and deliver based on needs from the community. We have lots more to build. We want to do this incrementally, partly to release sooner, and partly to build momentum through repeated releases.

Mobile Design Teaching Kit

I am excited to announce that the Mobile Design Teaching Kit is up on Webmaker.org and available for testing. I have been working on this with the Appmaker and the Hive teams at Mozilla over the past month . The kit is designed for mentors to guide learners to play with, break apart and modify mobile apps in order to understand how they work as systems. This teaching kit collectively offers 12 activities that can be mixed and mashed into workshops for teens or adults who want to design mobile apps.

The kit is organized around three sets of modalities: Ideation, Design and Hacking. The thinking here is that activities could be used in workshops that take learners through everything from brainstorming an idea to, prototyping that idea and then implementing it. Additionally the kit goes from novice to expert maker in scale.

Ideation Kit
Objective: Participants will brainstorm to identify opportunities and solutions to real world problems while evaluating the appropriate platform for their design.

 

I have admit at that the Ideation Kit was one of my favorite kits to write because I have been teaching these design exercises for the past five years or I have gotten to a point where I realize if we combine design thinking with civic engagement projects, we can have not only more successful hack jams or maker spaces, but invested learners who are putting their skills directly into action in the communities that they are inhabiting (whether that be online or IRL).  One of the activities that I think would be particularly fun to try out is Firestarter. The goal of this activity is to get introduced to seeing your community as an inspiration for design opportunities. Participants are asked to identify design opportunities and brainstorm potential solutions. Here they will evaluate the appropriateness of their medium choice in conjunction with their opportunity space.

One tool that came out of this particular kit is the mobile paper prototyping template. This template (see below) is useful because it acts as a stepping stone for learners to take their ideas, prototype type them and eventually build them out with the Appmaker tool.

Design Kit
Objective: Participants will leverage their paper prototypes and use Mozilla AppMaker to create mobile apps.

With the design kit, participants user test their prototypes and are exposed to some key vocabulary and user experience design techniques. After that, there's no dancing around - this kit is all about building out mobile apps with Appmaker. Participants learn how to make apps by hacking apps.


Hacking Kit
Objective: Participants will create "brick" components for Appmaker and learn some basic coding techniques along the way.

This kit is being designed for those learners who are so invested in making apps that they want to design their own components for the Appmaker tool to use and share with the appmaking community. One tactic here for component and brick makers is to go through the exercise of designing a paper prototype of the brick and user testing that experience with potential users before hitting the ground with code.





These kits are ready to be tested out - which is another way of saying that they probably have some kinks to be worked out and refined, but we are ready and eager to here your feedback. If you have tried out the kit, have ideas or just general feedback please go here to share out your thoughts.

These kits are a collective effort from many different teams and individuals within Mozilla but I particularly want to call out Bobby,  Laura and Kat for being awesome collaborators.