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.

Community Aid Badging

The Emergency Hack Lab sessions at Mozfest and the "virtual hackathon" that developed globally online - had over two dozen passionate geeks, civilians and design types crafting solutions to support community response efforts during times of crisis.

First we tried to make an emergency hack lab kit - a toolkit that people in a crisis situation could use to bootstrap their community efforts. However, after reviewing all of the great materials and content that already exist in the world, we focused on identifying gaps.

This is the gap and problem that we identified (as told by Willow Brugh from Geeks Without Bounds): 



During times of crisis, such as the aftermath of Hurricane Sandy, relief work can be really complicated - even if people are really well intentioned. One of the hugest problems that I encountered with Rockaway Help was a lack of a feedback loop between us (the grassroots organizers), the individuals in need and the volunteers. This is crucial for many reasons but to name a few : efficiency with task management, ability to acknowledge volunteer skillsets, the ability to match volunteers with appropriate tasks, and the ability to identify mentorship opportunities.

By connecting volunteers directly to members of affected population through Open Badges, we empower people who need help to engage in the relief effort, and maintain involvement before and after they have received aid. There are many reasons why this is valuable, including:

• acknowledgement, verification of a task in a moment of crisis for the relief organization
• acknowledgement that you have helped someone
• the potential ability to self assign tasks based on skills
• the ability to ask for mentorship based on expertise validated through badges
• the ability to see your impact on a community in need

The solution that we are developing is platform independent and open-source. Additionally, we are essentially designing a service that can be built directly into other successful tools that already exist out in the world.

So - what's next? We are deep in the weeds of figuring out how to make this real (and would love feedback and help!)  We know that we need to define the badge design experience using a badge building tool that combines the wonderful open source UN OCHA icons with meta data definition. In order to do this we will need to continue to develop out the badges and the badge systems that we hope to align with the UN standard for emergency relief. After that piece, we will work on the badge issuance through SMS. You can check out the wiki that was started as MozFest, or take a look at the work being started on Github.

Mobile Webmaking Concept : Meeting Makers Where They Are

A few months ago I was at a Hive NYC Summer Code Party pop up at the YMCA. It was the dog days of summer hot and youth came to visit us in the gymnasium to hack on computers after a full day of swimming, running and all sorts of outdoorsy goodness. It struck me that asking them to stop what they were doing and go on computers to learn how to code was a bit counter intuitive - and certainly not meeting youth where they are. If we are going to be engaging the "next generation of webmakers" we need to meet youth where they are,  be flexible and mobile.  As we know--- the web is not just accessed from a single computer- but from many different kinds of devices.

So, long story short- after some additional thought provoking conversations with Mark Surman about the possibilities of mobile- I came up with this concept sketch for what is kind of like a swiss army knife mobile concept that combines Thimble, the X-Ray Goggles and Popcorn functionality in a mobile device.  I'm going to walk you through the concept sketch, but you can also see it on Flickr

 

A user has the option to take a photo, video, audio or text message with their mobile device

 

She has the option to turn the {image} into a webpage

She gets prompted to choose a template from the mobile projects gallery. 

(reference: Webmaker projects) 

 

Now she has the ability to touch page elements

    and edit- just like she would with the X-Ray Goggles

 

She now can share the webpage

 

by clicking on the actual url or sharing directly on the social network sites 

(similar functionality, ui controls etc to Thimble and Popcorn "publish")

Now she has the ability to also edit the webpage (on the phone eventually) but also on the Thimble online web editor.

 

If you have an android phone, you can try out a proof of concept prototype of this by visiting http://tmc.toolness.org

Atul Varma created the working prototype. Be careful though, because this is a prototype the images are set to save for only 24 hours.

What's next?  While this is really only an experiment,  I want to iterate on this a bit so that it can open up the door for more collaborative webmaking--- think: webmaking with friends (a la Words with Friends) where you can collaboratively work on a webpage with a friend all within your mobile device. I would also like to see if I can run a session on this at the next MozFest in London. 

Atul and I previewed this for the first time yesterday at the Mozilla All Hands meet up in Toronto. While I am here, I would love to talk more to the fab Firefox mobile team to pick their brains and see if I can leverage any lessons learned from them.

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.