How to use Paper Prototyping within your design process

We're big advocates of paper prototyping. Not just as part of how ideas are formed and tested, but also as a way to remove the barriers of entry into design and collaboration.

The beauty of starting on paper are the limitations forced on you by the medium. This often helps focus on what matters, not just for you, but for any stakeholder or tester viewing your designs or prototypes.

By using simple shapes for things like text and images, you can draw attention to core functionality and reduce distractions. Plus, it's quick, easy, cheap and extremely accessible, meaning paper prototypes are ideal for using at the ideation stage of your process or in workshops with designers and non-designers alike.

"Beautiful visuals are necessary only after you’ve solved the problem"

Over the years we've seen our own paper prototyping apps and tools gain a huge amount of traction in helping get projects off the ground, either through the usual sketch-to-high-fidelity process, but also in helping facilitate idea generation in workshops and other collaborative sessions.

We've put together our favourite uses of paper prototyping to hopefully inspire your next project.

Paper prototyping early in the design process

Incorporating paper prototyping early on in the design stage helps to identify problems before investing time and energy into fleshing out high-fidelity designs. Simple sketches of your screens can easily be created for stakeholders to make decisions, developers to give feedback and customers.

If you usually jump straight into pixels or you've never sketched before, it can take a little bit of time to fully embrace the process.

You may find yourself inching further and further into more detail, but remind yourself to stick to words and shapes. No drop shadows, pretty corners or doodles! Eventually, it becomes liberating.

The beauty of this step is that any team member regardless of design experience, can get involved in sketching and by incorporating non-designers you’ll gain insights that might have been missed. This will also help in nurturing a design-led culture within an organisation, which brings growth and performance benefits of its own.

All you need to do is grab a pen, sketchbook or our printable wireframe templates and our app. There’s no need for a computer or design software.

Further reading:

• Sketching techniques to add to your design process
• Pens, Process, Product — Sketching for UX
• How Sketching Will Make You a Smarter Designer
• Stop Designing and Start Drawing

Paper prototyping in Design Sprints or design thinking Workshops

One of our favourite use-cases for paper prototyping is within brainstorms, design thinking workshops, hackathons and design sprints. It works especially well in these environments often because they are often cross-functional, including team members with no technical or design skills, but invaluable input.

Whilst there are several flavours of these kinds of sessions, paper prototyping tends to be used in the same way throughout, which is to be scrappy and get an idea out in the open to test as quickly as possible.

Design Thinking workshops

Design Thinking workshops are a great way to incorporate a framework for solving customer problems through design. When used correctly, it can encourage teams to develop solutions that are human-centred. That means always anchoring any ideas back to the initial users' problems and day-to-day need, resulting in ideas that a super honed in on what users really need.  The workshops are designed so teams can work together to generate multiple ideas within a session.

If we look at the different stages in the process, you can see how prototyping plays a part:

• Empathy: Getting to know your user. What’s their current workflow and what challenges to they face?
• Define the problem: What issue can you solve for the user? What impact would it have?
• Ideate: Brainstorming ideas within a team that would help solve the problem
• Prototype: Creating a mockup of your idea using paper prototypes (this is where Marvel comes in)
• Test: Gaining insights when sharing your prototypes with your target users (You can also use Marvel here too)

Paper prototyping is ideal in these workshops as they can help to map out multiple ideas generated within a session before moving on to test with users. They’re also quick and can be created by anyone in the team making the session inclusive.

Give everyone some paper and pens, then ask them to sketch their apps, website or features (we have some great templates for this).

Marvel’s iOS and Android apps help turn those sketches into a clickable prototype in minutes. All you need to do is take photos of your sketches through the app and upload them to your project. Then link them together with a few taps to form your sharable prototype that can be tested.

Further reading:

• The Design Thinking Workshop Kit
• How to Run a Remote Design Thinking Workshop
• How to apply design thinking, HCD, UX or any creative process from scratch
• The Blurring Between Design Thinking and Agile

Design Sprints

Another example of moving at pace is design sprints. Design sprints see designers go from idea to build and test within a few days. By concentrating the design process into such a short space of time, you can efficiently solve a problem together as a team and test solutions with customers as quickly as possible.

The breakdown of a design sprint:

• Map the current user experience to understand the user problem
• Sketch multiple ideas for a solution individually
• Decide between the team which ideas should be tested and storyboard the ones selected
• Prototype your screens using paper prototypes
• Test with users to help create iterations with feedback

Due to the simplicity of paper prototyping it’s perfect within design sprints when moving quickly or when bringing in non-designers to contribute. The key is to include only what’s essential to test, especially when short on time. Gaps can also be left in the prototype in order to ask the customer what they think should happen next or even give them a few different prototype options.

Further reading:

• A Google Design Sprint Gone Wrong (And What It Taught Me)
• The basics of design sprints and other jargon
• Making the Case for Design Sprints
• CEOs Should Care About Design Sprints Too

Code-free hackathons

Hackathons see teams compete against the clock to develop a product or feature that would usually take weeks or months to create. Usually, a fun event that can be organised internally or as a means to network with people within the industry, being efficient with time is key.

Participants will go from deciding on a product or feature, to design and build, often within a day. Here paper prototyping can help teams brainstorm ideas, align on decisions and make quick changes.

At the end of a hackathon teams will typically pitch their work in front of a panel of judges. Showing how the team has considered the user journey and storyboarded the interface through prototyping demonstrates that they’ve worked with the user in mind, strengthening their pitch.

How to use Marvel to paper prototype

Once you’ve made your sketches, you can create a clickable version in minutes using Marvel on your desktop or phone.

Desktop

1. Create a free Marvel account
2. Go to your Dashboard
3. Click Create project
4. Select Prototype and enter your project name and select a device
5. Select Create project
6. Click Upload or create designs, then select Upload from computer. Alternatively, you can drag and drop your designs straight into the browser window to upload them to your project.
7. Hover over any image that you've uploaded and click Prototype to enter the editor
8. Once in the editor, click and drag over any area of the design to draw a hotspot
9. Select the target image for the hotspot
10. Click Play to interact with your prototype

iOS

1. Draw your screens on paper
2. Open Marvel's iOS app (or download it here!)
3. Tap the green + button to create a project
4. Name your project and select your device
5. Tap the green + button and select Camera
6. Take photos of the screens you sketched on paper
7. Repeat until you've taken pictures of all your sketches
8. Once you've finished, tap your first screen then Add link to connect your screens together
9. Once you've connected all your screens, tap the play button to see your new prototype!

Android

1. Draw your screens on paper
2. Download the Marvel for Android app from the Google Play Store
3. Open the app and tap the Create your project button
4. Click the + button
5. Tap Camera
6. Aim the camera and take photos of the screens you sketched on paper
7. Tap the Check icon when finished
8. Resize and crop any screen that is misaligned and tap the check icon to confirm
9. Once you've added all the screens, tap on the first screen and then tap the place on the image where you'll like to add your hotspot
10. Once you've connected all your screens, tap the play icon to see your new prototype!

I hope we’ve given you a few ideas on how you can include paper prototyping into your design processes. Get started with sketchpad templates and see how you can create a clickable paper prototype in Marvel. And don’t forget, paper prototypes also work with our awesome user testing tools.

Further reading:

Stop Talking and Start Sketching: A Guide to Paper Prototyping
The Magic of Paper Prototyping
How to Run a Remote Design Thinking Workshop
Introducing The Design Thinking Workshop Kit
How to Run Your First Design Thinking Workshop Using Marvel