The UX Toolbox: Rapid Prototyping

Scott Lindsten
6 min readMay 2, 2022
The UX Toolbox: Rapid Prototyping

I geek out over prototypes in the same way I used to geek out over Lego or K’nex or even origami as a kid. I liked making miniature versions of things that I had no way of owning in the real world: the sweetest tree house ever (Lego); my own private ferris wheel (K’nex); a menagerie of wild pets (origami). Model making has a history as old as our species, and by actually building something — even at a greatly reduced scale—we reveal potential problems or flaws that can be analyzed, fixed, or scrapped before we invest the effort of constructing the real deal. (As cool as the idea of an elevator up to my treehouse was, I ended up settling for a ladder. *Sigh*…boring!)

Building web stuff can often benefit from modeling in the same way, especially when thinking about user experience. Being able to walk through a given task flow with a prototype can help us determine if our approach is going to work the way we hope it will, and almost always spotlights snags that we need to address. Rapid prototypes are models that can be slapped together quickly (too obvi?) and can start generating feedback right away…like, now, people! That kind of speed is a valuable tool in the iterative design process. By lowering the time and cost of producing testable options, you can hone in on what works quickly and cleanly before moving into true development.

This will be a multi-part series looking at options ranging from easy to more advanced, all of which I have personally used to create prototypes over the course of my career:

  • paper prototyping
  • faux prototyping with presentation software
  • plain vanilla HTML / CSS
  • current apps & libraries
a single orange Lego brick

Let’s kick it off with the easiest (and to be honest, my favorite) type of rapid prototyping…

Part 1: Paper Prototyping

You knew the minute I mentioned origami that this was coming, right? In addition to making weird little versions of things, I did a lot of drawing as a kid. Freehand drawing is wonderful and is a broad, uncluttered path to pure creativity, but my inner wanna-be engineer did a comical, lovestruck double take the day I discovered graph paper. All those perfect little boxes provided a more rigid structure upon which I could conceive crisp, concise ideas—and what’s more (as I would discover later), those boxes could represent real-world measurements: an inch, a foot, or…a certain number of pixels.

No wonder, then, that paper prototyping appeals to me. No code, no screens, just hand drawn everything! Seriously. Just draw it all out, graph paper optional. It’s super fast, and the results don’t feel as “precious”— edits, changes, notes can all be added without guilt or hassle. Essentially, the visual equivalent to thinking out loud.

Trying to decide where to place certain page elements? Pondering over how to best divvy up screen real-estate? Want to make sure a given task flow makes sense over the course of several screens? Paper prototyping can provide you with quick, actionable feedback for a minimal amount of time and effort.

The materials are cheap and sitting on the supply shelves of every office space in the world: pen and paper. You don’t absolutely need graph paper, but it can be helpful if you want your dimensions to be more accurate and your drawings more crisp. I like graph ruled composition books ‘cuz they are cheaper than art pads. And I like to pick up those markers that have a thick nib on one end and a thin nib on the other. Again, not necessary, but handy.

If you really want to kick your paper prototyping game up a notch, snag a roll of tracing paper, too. You can get it in pads but in my college design classes we always used rolls: cheaper and more versatile ‘cuz you can tear off / cut whatever size you need. Tracing paper is handy for overlaying the prototype to simulate screen elements: buttons, notifications, modals but is also a great way to capture comments and notes—overlay a chunk of trace and draw arrows, jot down reactions, highlight pain points—or better still let the tester do it.

Yea or Nay

Let’s be clear about what is—and isn’t—great about paper. prototyping.

The good stuff:

Low cost. As close to free as you’re gonna get. As already stated, who doesn’t have pen and paper lying around? Fancy graph paper and dual nib markers are nice to have, but I’m betting that everything you need to create a paper prototype is sitting on your desk right now.

Speed. Paper prototypes are fast. Really fast. I’ve been in meetings with stakeholders and have been able to draw out a screen, pass it around the table and get validation / consensus before the meeting is done. Boom!

Low intimidation factor. People respond to paper prototypes in a way that they just don’t with a real screen or device. It invites participation of a different, more spontaneous kind. It’s an immediate and engaging experience.

No coding required. Anyone who can draw a line on paper can do it. (Graph paper even eliminates the “I can’t draw a straight line” argument!) A big part of what makes it so approachable is how familiar the materials are. There is even—dare I say it?—a unique potential for fun.

The limitations:

Only big rocks. Using the classic rock-breaking analogy, paper prototyping is a big ole sledgehammer best suited for chunky problems early in the project lifecycle. The more nuanced or complex a problem you are trying to solve, the more its speed and efficiency drops off.

IRL. Ideally, paper prototyping is an in-person exercise. As the UXer, you have to lead the interaction, facilitate the exercise, and observe and capture the reactions / feedback. This may come naturally to you or not (but it is also a great way to bolster your research skills). It also means that the diversity and appropriateness of the feedback depends on who you can physically sit down with for a few minutes. More targeted users may be hard to manage within a given team, workspace, company, convention, etc.

The medium is the message. Some critics worry that the kind of interaction that occurs between tester and testee during a paper prototype can create bias, or can stray from a more accurate digital response. I believe it depends on what kind of question you are trying to answer. At the start of the third decade of the 21st century, we’ve all become digitally savvy to high degree and so understand the conceptual leap from paper to digital device. One could argue that the rise of touchscreens actually makes us friendlier to hands-on interactions. As always, due diligence is required when implementing any form of testing to make sure the results are as unbiased and valuable as possible.

You can find more information (no surprise) about paper prototyping online (here’s a nice intro from The Interaction Design Foundation) but I suspect—if you are involved in any kind of making, web or otherwise—you are already familiar with the notion of sketching ideas out on paper. We’ve become so welded to our personal screens that we sometimes forget the power that simple, crafty activities can hold. The next time you are trying to solve a design problem, moving away from a digital interface may result in a greater degree of creativity and spontaneity.

Coming in Part 2: Fake it ’til you make it!

--

--

Scott Lindsten

Lifelong reader and lover of the arts. Came to Medium for the long-form online pieces, stayed to help strengthen my own writing and to share more.