Stop Talking and Start Sketching: A Guide to Paper Prototyping

Posted 2 months ago by Graeme Fulton

Turning your app idea into a real product isn’t as far from reality as you might think. It can so often just come down to getting started— and to do so, “all you need is paper, pens, scissors and your imagination” (Shawn Medero, Alistapart).

“All you need is paper, pens, scissors, and your imagination.”

For example, when Jack Dorsey had the idea for Twitter, this is how he began- a very basic paper prototype. Paper sketches enabled Dorsey to express his early visions of Twitter, showing us that no matter how big an idea, a simple sketch can be a great way to start:

Taking this as inspiration, in this article, we’ll look at when and why to prototype with paper, and how you can take ideas from paper sketches through to something more interactive. Here’s a list of what we’ll cover – feel free to jump to the bits you’re interested in:

Section 1: Why Paper Prototype?

Paper prototypes, in their most simple form, are drawings of the user interfaces (or screens) you plan to have in your app. Here’s some reasons they can be so effective:

You don’t need to be a design expert:

Design snobs can put you off prototyping with all their jargon, best practices, and opinions on tools you should or shouldn’t use. However, starting with paper removes a lot of those technical barriers (e.g. vector tools like Sketch), as it’s just about getting your ideas out early on. It doesn’t matter how good your prototypes look either- as long as they help communicate your ideas, which is the main purpose.

You can ignore any design details such as colour and fonts, and therefore any of those snobs you may come across – illustrated perfectly by Pablo Stanley in his article ‘The Type Snob‘:

Design Snob, by Pablo Stanley

Type Snob, by Pablo Stanley

The Type Snob – Pablo StanleyThe more I learned about the nuances of the craft, though, the more I found myself behaving like a Jerky McJerkface; correcting people on unnecessarily long lines, their improper use of em dashes, and the important difference between fonts and typefaces.

Overall, anybody can get involved – I’ve seen paper prototyping used as a tool to bring ideas from everyone into the prototyping process, no matter their role or seniority in a company. Doing so can get more buy-in from leadership too if they’ve had input on the designs, and also brings new perspectives to explore.

The analogue can inspire the digital:

A lot of what we do seems to revolve around screens, so it’s great to start with the physical stuff, which is also more natural to us as humans. Who knows, the physical world can sometimes even inspire what will build in the digital.

“A lot of what we do seems to revolve around screens, so it’s great to start with the physical stuff”

One example is how Google approached the creation of ‘material design’— layering paper and card on top of eachother brought them to experiment more with the Z-axis of an interface. They applied the depth and shadows of the real world to screens when creating ‘material design’ for digital interfaces:


Google Material Design - inspiration from physical

Google Material Design – inspiration from paper


Further to this example, Opera went as far as bringing in balls and cutting out circle pieces of card when creating their experimental Neon browser. They said it gave inspiration in making their product more tangible, as people were most engaged when the interface was like a real thing.

Less unproductive meetings (or more effective communication):

Prototyping with paper can help anyone quickly and effectively make choices on their app, and communicate their ideas. I’ve always found it easier to explain ideas through a drawing than it is by talking— as the saying at IDEO goes (according to John Maeda):
screen-shot-2017-02-15-at-19-52-37
Just imagine, if paper can bring anyone into the prototyping process, it can lead to less meetings –  and therefore more effective meetings when they do take place.

“If a picture is worth 1000 words, a prototype is worth 1000 meetings.”

On another note, in the case of a startup looking for funding, showing your idea rather than simply telling can also give you greater leverage when pitching to venture capitalists.

Put egos into check (or it’s more inclusive):

During design workshops in business environments, I’ve noticed that getting people active with paper prototyping can help bring them out of their ‘business persona’ more than other ‘design thinking’ activities. Experimentation takes over, and it’s noticeable for the noise levels to drop as people are no longer just talking, but actually making things.

Bringing ‘non-designers’ into the prototyping process in this way can also help reduce any ‘us vs them’ mentality that sometimes manifests in product teams. This is highlighted well by John Morgan, a Design Lead at IBM, in his article titled “Four Principles That Help Design Teams Go from Good to Great”:

“Ego manifests itself in many ways in designers, for example, the ego can manifest as an ‘us and them’ mentality.”

Morgan goes on to explain how communication and collaboration can be key in designing and creating a great product, and how getting everyone involved can enable us to draw upon different skillets, making the final product worth more than the sum of the team’s input.

Four Principles That Help Design Teams Go from Good to Great – John MorganSome designers marry their ideas and stunt the creative development of the product. They become useless to the team, unable to move on into new creative spaces or view the problem from new perspectives.

Now we have reasons to give paper prototyping a go, let’s look at the best time and purposes to do it.

Section 2: When to paper prototype

Once you have some initial ideas, paper prototyping is one of the best tools to explore them. It’s most effective when used early on in your process— ideally once you’ve spent time understanding your user and market, so you know the problem you’re solving is real. The purpose isn’t to create something pretty, but to learn quickly. Take this quote from Robert Kiyosaki for inspiration:

“It’s not what you know anymore that counts, it’s how fast you learn”

Start early, so you can learn faster:

The beauty of using paper is that it’s much easier than using higher fidelity tools (such as Sketch or code), meaning you can try out lots of ideas faster. This is shown in the graph below, which maps out different fidelities of prototyping tools against time. Paper prototyping sits in the bottom left, taking the least time and also the lowest level of effort:

0-9qr7nfrtwu7xtsh1

Fidelity vs Time

Essentially, using paper lets you learn more about your design in a shorter space of time. You can easily make changes, stick post-it notes over things, or just throw it away and start over without getting upset.

Use paper to get high-level feedback:

The purpose of low-fidelity paper prototyping is not to impress users with beautiful drawings and designs, but to gain insight and direction for your product, quickly. Therefore, it’s best used to get feedback on high-level concepts, such as the layout and flow of your app. Therefore, don’t spend too much time perfecting your wireframes until you know you’re going in the right direction. For more detail, refer to Laura Busche’s article for Smashing Magazine:

The Skeptic’s Guide To Low-Fidelity PrototypingThroughout this article, we will look at some of the features that make low-fidelity prototyping a unique tool to radically improve your work and to build an environment in which users’ needs can be truly realized.

Once the overlying structure is determined, higher quality versions can be made to gain insight on later decisions such as colours, or even animations and transitions.

“The purpose of prototyping isn’t to impress users, but to gain insight and direction for your product”

Now we’ve covered why and when to prototype with paper, let’s jump in with some tricks for getting started.

Section 3: Tricks for Productive Paper Prototyping

Getting started is easy, you can just sketch out whatever comes to your mind. But to create more useful prototypes, consider some of the following tips:

1. Begin with the user 👤

By starting with your user in mind, you can ensure your product helps them with the goals they want to achieve. Here are a few things you can consider:

Once you have some ideas, just sketch them out. Heres some great templates to get you started:

Free Marvel paper prototype paper templates – grab it here.Paper prototype templates for iOS, Android, Apple Watch, and the web.
Prototype Templates, by Maxime De Greve ✈ for Marvel

Prototype Templates, by Maxime De Greve ✈ for Marvel

SneakPeekit printable grids for design wireframing – get it here.Planning apps or websites is not always completely digital: sometimes you may need pencil, paper and some good sketch sheet templates to speed up your creative process.
0-tnokrgipk1-ubefb

Sneakpeekit prototype templates

2. Vary the fidelity to gain appropriate insights 🔮

Make sure the fidelity of your prototype matches the type of insight you want to gain.

When it comes to increasing your prototype fidelity, you can even go as far as making them interactive. You can do that with the Marvel mobile app, to turn your static wireframes into clickable prototypes:


Make your paper prototypes interactive

Make your paper prototypes interactive


Try it now – get our free prototyping app for iOS or AndroidPrototyping on Paper! Turn sketches, mockups and designs into web, iPhone, iOS, Android and Apple Watch app prototypes.

This is one of the fastest ways to progress from a paper prototype into a digital one of higher fidelity. Just take pictures of your screens and add hotspots to make your paper prototypes interacve. It’s as easy as shooting stuff with your phone- cue Matthew McConaughey:

“You want to be a writer? Start writing. You want to be a filmmaker? Start shooting stuff on your phone right now.”

I guess almost the same thing can be applied to prototyping with Marvel – it even gives you the ability to put your paper prototypes into anyone’s hands, no matter where they are in the world.

3. Exploration exercise: think across devices 💭

When paper prototyping, we’re not always sure what screen size our designs will end up on, so it’s great to start by thinking about all screen sizes. A simple ‘paper folding’ exercise can help you do this:

0-ul4wv2-xkhudkmjo

“Once you have some initial ideas, paper prototyping is one of the best tools to explore them.”

Whilst this is nice to help you prioritise content and features, sometimes you already know your app is only going to be used on mobile devices- maybe it’s a sports app to be used when running. Or maybe you’re creating something specifically for a large screen— an office stats board for example, or something for old-school office workers who only have 15” box monitors.

Therefore a lot depends on context, but this exercise can help you think from different angles nevertheless.

4. Human-robot testing 🤖

When testing and presenting your prototypes to people, you may want to keep it straight up paper (if you don’t have a phone handy to use Marvel). In this case, you can always use a human to play the role of a computer:

0-7-qt_yvyayapvfo1Well not like that 👆 exactly. The aim is to see how a user would respond to your app. Here’s a very quick overview of the testing process:

  1. Assign some roles:
    • 👤 The user— the participant for the test (the more the merrier)
    • 🙎🏽 The facilitator— to arrange and document the test
    • 🤖 The human computer— to move the paper in reaction to the user’s interactions.
  2. Set the scene for the user— tell them their role and set them a goal to achieve (e.g. navigate to image gallery and upload a picture of your cat)
  3. As the user interacts with the paper prototypes (pretending they are real screens), the ‘human computer’ moves the paper around as feedback, without saying anything. Just like a computer. Like this:

0-v59lpnwitsv8mono

Paper prototyping via Olivia Brown

A more thorough guide to usability testing with paper can be seen here:

Usability Testing with Paper Prototyping – Atlassian BlogsExecuting a paper prototype test is having one or more test subjects (end-users) sit down in front of the paper GUI, and having them interact with it. The end-user is given a specific task…

Section 4: The Future of Paper Prototyping

We’ve only really visited designing for screens in this article, but what about applying paper prototyping to other mediums such as Virtual Reality? Let’s finish with a brief look at how some designers are approaching VR prototyping with paper:

Jean-Marc Denis of Facebook (formerly Google) wrote that paper is the first tool he uses in VR, even before Sketch. He says that you just can’t beat it because of it’s cheapness and speed.

“In VR, the cost of moving from wireframes to hi-fi is higher than 2D.”

Volodymyr Kurbatov takes this a step further with a full walkthrough for sketching VR apps in his article, “Draw sketches for virtual reality like pro“. He starts by sharing some useful templates for sketching VR scenes, and explains how you can use a 360 photo viewer to see your Sketches in VR. Check out the video:


Free templates are available in his article:

Draw sketches for virtual reality like pro
Virtual reality is a brand new frontier, but there are already tools that cover almost all the steps of creating a new experience (thank you, game industry). But sketching is so ancient…

In addition to paper prototyping templates for VR, we’ve also started to see Sketch templates popping up. Whilst not paper, it’s interesting to see how we can approach VR in 2D environments. Maybe we apply lessons from Sketch templates to paper too. Here’s an example from Kickpush, who are doing amazing work in the VR prototyping field:

0-t0ayyoc5bii1nsxq

Virtual reality: Templates for UI design in VR – KickpushWe’re on a mission to bridge the gap between traditional UI design and virtual / augmented reality…

Limitations of paper

Whilst paper prototyping is awesome, there are of course some limitations to it. For instance, it needs a lot of imagination from the user which can make it less accurate. Furthermore, Jake Knapp of Google Ventures argues that whilst paper prototyping is great for starting things off, they’re not ideal for user testing. This could be true to a certain extent, but it can be argued that apps such as the mobile version of Marvel (which let us make our paper prototypes more useful and interactive) can make user testing with paper much more viable. You can send your prototypes across the world and even record how people use them, without watching over them.

Get Started, and Get Everyone Involved

Overall, paper prototyping a great way to get people involved and explore early ideas. Since it’s so useful in those early stages, it’s also the perfect opportunity to get the rest of your team on board and engaged with the design process. Then, as you move forward to higher fidelity designs, your team is more likely to stay involved. For example, in our spotlight with Huddle, we found that Marvel prototyping tools are used not only by designers, but by product managers, quality assurance teams, developers and commercial teams. So getting them in early, can keep them in sync throughout.

Good luck!

Anyway, I’ve found that talking alone will get you nowhere. Stop telling people what you’re going to, and show them. Get going— don’t listen to me, listen to Walt Disney:

0-egcjpaip37ck83_u

Design and prototyping for everyone

Design and prototyping for everyone

Thousands of individuals and teams use Marvel to design and prototype ideas.

Get Started, it's Free!

Designer, Writer and Developer at Marvel! Say hello on Twitter.

Related Posts

My head has been wrapping itself around boxes. Organising them, resizing them and generally just being made aware that they exist. If you haven’t already guessed it, this next post in my Dear Developer series of learning HTML and CSS is of course about the Box Model. Not, in fact, figurative boxes. After a long holiday in the Caribbean and… Read More →

You can build the best product in the world, but if nobody knows it exists can it really be the best? Getting discovered can be as important as creating a great product nowadays. This has lead to many startups creating products the other way round: instead of ‘build it, and they will come’, it’s become: ‘go to where they are,… Read More →

I was born in the age where people still wrote on paper for their school homework and back then I was obsessed with handwriting. Honestly, it was kind of a problem and I might have looked fairly psycho to anyone who flicked through a notebook of mine as I’d test a new one out every two weeks. Computers stole this… Read More →