April 7th, 2014

Prototyping funny

Stuart Romanek
Senior Designer & Developer

Run the term 'prototype' through Medium's search field and be overwhelmed with the number of opinions, methodologies, & frameworks for design and web development that come back to you. A hot topic for sure with a dense noise-to-signal ratio to wade through, 90% of which I couldn't imagine having a strong opinion. But while tools and practices come and go, a big thing P'unk Avenue is taking away is that static HTML/CSS/JS sketches are a cheap way to get your brain and heart moving on ideas that may have felt finished in Illustrator.

Part of this is a natural progression. Designers became programmers, then programmers became designers, and along the way we all learned a heck of a lot about user experience. P'unk Ave in particular fosters a strong design culture throughout all areas of expertise. We're comfortable with the idea that our art boards are not the final resting place for experiences, that things become alive and develop language as they're refined in the browser. And while I still think that designing *in* the browser is a bit of stretch, getting things into the browser where everyone can touch them has proven of great value for both our internal revision and helping clients articulate feedback.

So when tasked with writing a blog post about it I did what seemed pretty natural to me: I tried to work Seinfeld into the mix.  

Humor is weird.

I wanted to take these concepts and practices we've been weaving into client work and mix them into something with a lot less form and a bit more levity. This dumb tweet was practically gift wrapped.

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

Stuart Romanek
Senior Designer & Developer