Stop Talking and Start Sketching: A Guide to Paper Prototyping
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 Prototoype: Reasons why paper prototyping is useful — from lowering the barriers to entry into design, to collaboration and communication.
- Section 2: When to Paper Prototoype: Paper prototyping is most effective when done earlier on in the design process, and here we’ll look at why that is.
- Section 3: Tricks for Productive Paper Prototyping: An exploration into tools, techniques and templates for creating more effective paper prototypes.
- Section 4: The Future of Paper Prototyping: How paper is being used to prototype VR environments, and a couple more templates to help you get started.
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‘:
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:
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):
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.
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:
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:
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:
- How does each screen of your app fit in with the tasks your user wants to do?
- In what context will your app be used? Will the user be driving? Will they be running?
- Does your user need to sign in? Will there be a news feed? Starting with your user goals can also help you have initial thoughts about an information architecture.
Once you have some ideas, just sketch them out. Here are some great templates to get you started.
2. Vary the fidelity to gain appropriate insights 🔮
Make sure the fidelity of your prototype matches the type of insight you want to gain.
- By keeping it very low-fi, and excluding colours, fonts and interactions, it can ensure the feedback you receive stays high level, and allows you answer questions about the layout and structure of your app.
You don’t want to be hearing “that would look better in Helvetica” or “what if you changed that button to red?” - As you get more certain about your designs, you can begin to take more time on them, as the type of feedback you want to receive changes.
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:
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:
- 📄 Take one A4 sheet — that’s your desktop screen — how would you design for that?
- 💻 Fold it in half, that’s your tablet or small laptop — now you’ve got less space.
- 📱 Fold it in half again and that’s your phablet
- ⌚️ Followed by your phone and watch
“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:
Well 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:
- 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.
- 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)
- 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:
A more thorough guide to usability testing with paper can be seen here:
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:
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:
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:
Thanks for reading! This post was originally published on blog.marvelapp.com. You can read more about what we do here and who we are here.
