In a few nights I had my prototype. No designs, no workflows. It was exactly what I set out to do: keystrokes corresponded to notes within a clip and background gifs were changed by a number of keystrokes. I learned a bunch about the shiny webAudio API and my code felt sound. And you know what? Not funny. Not at all. Painful. Playing individual notes felt choppy and awkward, mashing the keyboard generated terrible noise, backgrounds left un-switched looped in a confusing way. Being funny was hard.
So I started experimenting with all the variables. I strung gifs together to get over the painful looping. I tweaked the mechanisms for playing individual bass notes (again and again and again) until I took it out altogether. I added random laugh tracks to create ambiance, then user-controlled laugh tracks, then the ability to layer up laugh tracks on top of one another AND ONLY THEN did I actually laugh out loud.
Laughing out loud.
While my little toy example krugerindustrialsmoothing.biz (click for good times) lacks much of the requirements, research, design, etc etc that our client work demands, the notion of sketching interfaces and components in something as informal as CodePen removes the layer of magic (and sometimes, uncertainty) that can exist between designer and developer. Should the transition ease like this or like that? How fast should this fade in? Do these icons need labels? Tooltips? Like this? How does this feel? The difference between telling a person "It'll work like X" and sharing that experience with them answers questions faster, builds confidence in the project, and solidifies key characteristics and patterns that can be re-used throughout the project.
Building an interaction with a throw-away mentality lets you move fast and concentrate on the emotional response rather than your own strict code sensibilities. Got your interaction states right but your markup structure feeling a little inflexible? Great, because you'll write the production version with all those lessons learned. The prototype serves as a sketch, fleshing out small details while the whole remains a bit out of focus. We're doing things the long, hard, stupid way so that we might find unexpected joy in what we give to other people.
The joy is the laugh-out-loud refinement. Taking something that looks good and making it into something that feels right, at best imparts something more than digital event. It should be our objective to always be giving something to a person using our products: security, continuity, delight, the feeling they're getting something accomplished. Focusing on tiny, individual components and interactions lets us develop those gifts in a meaningful and intentional way. It lets designer, developer, and client speak the same language in a way they probably haven't before and sets the stage for future refinements and devlopment.