📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Product Tips & Tricks

How to use Paper Prototyping within your design process

The different ways to use paper prototyping to maximise idea creation
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:

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:

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:

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:

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:

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

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!

Product Marketer at Marvel. Part-time true crime connoisseur. @ch_hall

Related Posts

Prototyping is one of the earliest steps in the process of creating a product. With prototyping, a team can establish what a product should look like, how its end-users should interact with it and then validate these ideas before moving forward with development. Without needing to commit to development resources, you and your team can test out ideas for websites… Read More →

Did you know that once you’ve created a prototype in Marvel, you can embed it on any HTML web page or blog including WordPress, Medium, Wix, Squarespace and even Behance? Since we launched prototype embeds, we’ve seen them pop up everywhere, in almost every use-case from product marketing and sales to education. From Papa Johns to Duo and PWC, thousands… Read More →

“Shall we Zoom?” If you’re one of the millions of new Zoom and Google Meet or Hangouts users then this a question you’ll likely be hearing every day. Now that everyone from governments to schools are using Zoom or Google to move projects forward, we’ve put together this handy guide to using our new User Testing feature in combination with… Read More →

Categories