NYPL Labs

This summer, at Adaptive Path’s UX Week in San Francisco, I took Leah Buley’s and Brandon Schauer’s workshop, “Good Design Faster,” a significant part of which concerned paper prototyping. I have always made a lot of paper-and-pencil sketches during my initial design process, so I’d like to say that I’ve always done paper prototyping. But seeing as those sketches generally only got seen by me, I can’t actually say it.

What I can say is that my collegue Michelle Misner and I brought the concept back home from San Francisco and it’s now absolutely part of our team design process. You can do it too; and the best part is that step one on your paper prototyping journey is a trip to the office supply store!

First, you will need:

• paper, any kind (I favor tracing paper for its non-bleeding quality; we also got a pad of giant white presentation-sized paper.)
• markers, in various shapes and colors (I splurged on some big stinky Prismacolor artist markers, but that Sharpie color-pack is pretty excellent too.)
• colored pencils
• erasers
• sticky notes, in various shapes and colors
• drafting dots (do you even know what these are? I sure didn’t. They’re little restickable round stickers, handy for sticking pieces of your prototype to each other. Or, if you’ve got lots of metal surfaces like we do, you can use…)
• magnets

Wasn’t all that shopping fun? It only gets better. Here are some simple prototypes we’ve made thus far:

Search facets
This concept isn’t new, but it really does work. We wrote all the facets, scopes, and formats we could think of on sticky notes, and stuck them all up on one of our giant pieces of paper. By making each concept into a little chunk that we could move around, it was easy to sort out how aspects of search results should be grouped. (In this case, sticky note color did not have meaning, but it could have…)

Exhibition website
After meeting with the content curators for an upcoming site, we took the list of functional specs (which we had gleaned from our meeting) and designed the basic narrative of the site. Then I took my tracing paper and my artist markers (I used gray tones since the palette had not yet been chosen) and mocked up each type of page view. The strip of paper on the upper left mockup shows a dropdown menu; on the right is an overlay using Lightbox. Our curator colleagues understood the concept immediately.

Redesign of NYPL.org
Here are some more gray tracing-paper prototypes, the first of a great many that we’ll be mocking up as we continue designing the new NYPL.org. For this particular iteration, we wanted to show how the different “pieces” of the site go together—the header, the search box, the bottom nav, and so on. I drew each piece separately, scanned them, and roughly pasted them together in Photoshop to create a series of images that display each “content” section of the site sandwiched between the header and footer. (This presentation is just as effective when it’s done with magnets on my cubicle wall.)

Buley and Schauer point out in their workshop that you can roll up a paper prototype and physically take it over to your colleague—no special viewing technology required (see slide 36). We’ve also found that sometimes taking your design out of the computer screen forces your audience to focus on the concept rather than the execution, which is very helpful if your audience gets hung up on colors and buttons and the like. Frankly, it’s helpful to everyone involved: good design, I feel, serves the content, and all the flashy Flash/AJAX/JQuery what-have-you won’t save a poor design. I also believe that while good web design does not translate into good book design, etc., every designer should learn to use paper and pencil. Like the codex, it’s worked for 500 years; it’s not going anywhere soon.