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-makersHACK 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.
