How to Make a Mobile Paper Prototype

What if a single piece of paper could make your mobile app work 20 percent better?

It’s hard to imagine something as unimpressive as paper influencing our 21st century smartphones, but it’s true. Well before we get into the design and coding phases, we can show customers a mockup of an idea of what our product might look like. It’s called a prototype (or a wireframe)—it’s a model of a design that’s still in development. It doesn’t need to be fancy, or even made on a computer. But it can make the difference between a product that looks good and one that people will actually use.

The essence of Mobile User Experience is getting into your customer’s heads and finding out if what you’re doing meets expectations and helps people reach their goals. Mobile prototypes give you early-stage feedback when ideas are still fluid and you can still make significant changes to your design. As architect Frank Lloyd Wright said, “You can fix it now on the drafting board with an eraser, or you can fix it later with a sledgehammer.” Good things to test in early prototypes are navigation, labels, content organization, Web forms and interactive elements.

There are lots of mobile prototyping tools out there (both free and paid) to make a digital mockup, but paper prototyping requires zero tech skills and can be done very quickly.

Paper Prototyping for Mobile

Michelle Chronister works on the USA.gov team at the U.S. General Services Administration (GSA). She and her team were trying to enhance their site (and their Spanish counterpart, USAGov en Español [formerly known as GobiernoUSA.gov]) and wanted to see how their designs would work on desktop, mobile and tablets. They wanted to get customer feedback early, and see if they were going in the right direction.

So Michelle built a clever (and free!) paper prototype of her mobile sites out of things she found in her office supply room. She printed out early designs of her sites, and created a “mobile viewer” where a user could interact with them.

Her team wanted to get the opinions of people outside their working group. Over the course of three months they asked potential users in the halls of her building and at a local coffee shop. Michelle said people were “not shy” about saying how they felt about the wire-frame design (i.e., “they hated it”, “didn’t like it at all”, or “thought it was okay”). Honesty equals good data, so even hearing “that’s boring” is helpful. By February 2014 they had tested almost 20 people.

They worked in teams of two—a facilitator to ask questions and help the volunteer with the prototype, and note taker. Other team members would often observe from a reasonable distance. Here’s how it works: The facilitator would use a testing script and ask questions like “Where would you go to find X?” The test participant would touch the paper “screen” and the facilitator would “be the computer” and move it to the corresponding part of the site. Alternatively, you can lay out the pieces of your prototype on a table and switch out pieces of paper as the user moves from screen to screen. Other methods include drafting designs on adding machine tape (nice and narrow), or attaching Post-It notes directly to their smartphone.

The pros of paper prototyping are numerous: a good way to measure your basic design, it’s free and easy to put together. The cons are that the prototype can be a bit “clunky” and tough to manipulate. Ultimately, paper prototyping isn’t always the answer but it’s often a really good, cheap, and productive first effort.

Editor’s Note: If you’re interested in Mobile Prototypes, register for our free prototyping workshop June 3.