Showing posts with label prototyping. Show all posts
Showing posts with label prototyping. Show all posts

Wednesday, June 11, 2014

What's in my toolshed: the prototyping edition

Lately I have been thinking a lot about how I go about prototyping. That's a huge topic, because really prototyping is a step along a long, loooong and windy path that begins with an idea. I often analyze in painful detail how I get the idea or what I do with that idea once I have it, but today I want to think through my process in terms of what's in my bag, or what's my setup. 

I think it goes something like this:

I have an idea.
Tools: shower, running shoes, a friend and/or hot chocolate

I sketch out the idea.
Tools: pencil, notebook, ipad, paper53, cosmonaut

I share that idea with a small group of people
Tools: more hot chocolate

This cup is from the  folks at One Girl Cookies in Dumbo

I share that idea with a larger group of people
Tools:  a blog, camera (usually just use my phone)

Then, I share the idea with people in my making environments
Tools: github, flickr

I read and write - A lot. I tend to research everywhere from blogs to books, to print articles. I ask experts and novices a like to talk to me.
Tools: New York Public Library, DML, goodreads, the interwebs

What I am reading now: Creative Confidence by the Kelley Brothers. Check it out!

Then I am like omgossssh  I have so many things I need to get organized, so I put all of my tools into some sort of list, or spark file.
Tools: Evernote, etherpad , Google Docs

By this time I realize that I want to make something so that people can have a proof of concept to play around with, so I start to make something interactive.
Tools: POP, Coda2, Cyberduck, Webmaker, Appmaker, Adobe Illustrator, etc.

Then I go into a rapid cycle of user testing -> iterating -> usertesting
Tools: redpen for mockups, user testing websites, Hive meetups, minigroups, groupme, Webmaker demos,  more hot chocolate and chocolate chip cookies.

At this point I kind of move into a decision making phase. This is a whole other set of operations, however I now have a lot of tools at my disposal to make that decision. By now, I have now developed a cohort of people who I am working with to develop the prototype - whether that be user testers, feedbackers or active co-developers.

I should note here that a) this whole process relies heavily on hot chocolate - my current favorite can be found by visiting the Little Sweet Cafe just off of Atlantic Avenue in Brooklyn and b) my process is all about prototyping in the open. I find that prototyping by, for and with people makes my ideas stronger and helps me to fail faster so that I can pick myself up and iterate with more knowledge, more often. I'd love to hear what ways YOU prototype.

Thursday, June 5, 2014

Portfolio Design Workshop

Yesterday I went to a portfolio workshop for Hive NYC members at the Brooklyn Public Library. The workshop was run by Julia Vallera and the goal was to help people think through the process of developing content to showcase projects created within the Hive, however, the it ended up being so much more. By the end of the day, participants were helping members of the Hive HQ iterate on their portfolio application form, and started to articulate the need for tools that support an innovation framework.

Lifecycle of a Project 
Workshop participants reviewed the timeline of a project from exploration to the phase where you might be sharing out learnings (the portfolio touchpoint). Julia used this chart which compares the creation cycle to the lifecycle of water (how amazing is that?!). Particpants articulated that while there are lots of touchpoints and feeback loops after something has been created, there is a real desire for in-progress community support and reflection.

Portfolio template:
Participants used this template to start developing out their project portfolio piece.  Some feedback that Hive members gave is that it would be awesome if they could be developing the content throughout their making process. Additionally, they explained that it was really important to be able to identify who the author of the content was and in turn, who that author was "speaking to" via the medium of the portfolio.

After listening to Hive members talk for a few hours and taking notes (below), I realized that there's a real opportunity to support what Brian from Beam Center referred to as a "framework for innovation" and what Leah from the Hive called a "living archive of process." 

I am going to tinker with Atul, Kat, Chris and the rest of the Hive community to think through what this could be, but overall I found this workshop inspiring and am eager to start noodling in this opportunity space. Some initial thoughts is that we should think through what a process dashboard and process project profile could look like. Here's what I sketched while at the workshop, but am going to dive deeper this week. 

Monday, November 7, 2011

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

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


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.

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.


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


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.