Published on | Prototyping: From UX to Front End — Medium Justinmind

Everything you need to know about paper prototyping and how you should use it in the UX design process

Paper prototyping has been around for ages as a fast and inexpensive way of getting feedback on early designs before moving on to code. Just by using simple materials — as simple as pen and paper — designers can visualize concepts and ideas, share them with their team and stakeholders and quickly get everyone on the same page.

Our post explores the art of paper prototyping. We’ll show you how to get started and how to test your paper prototypes, as well as how to create digital, interactive prototypes when needed.

Great ideas are started on paper. So if you want an easy way to bring your designs to life, you’re in the right place. Let’s get prototyping!

What is paper prototyping?

Paper prototyping is the process of creating an early sample of your product (in web design, this would be your user interface) in order to test out its design and performance with target users prior to building it out with code.

paper-prototyping-in-the-ux-design-process

As UX consultant Chris Nodder puts it, it is “the first time in the user-centered design process that you put together the elements of your new interface design, in a way that approximates what users will see on screen.”

This minimalist approach to prototyping is what we call low-fidelity prototyping– learn more about prototyping fidelity here. Depending on your project’s budget and timeline, you may want to create mid to high-fidelity prototypes with tools like Justinmind. We’ll take a look at this later on in the post.

Turn your paper prototypes into fully-functional prototypes in minutes

Paper prototyping in user-centered design

You can use paper prototyping to mock up any type of interface, such as a mobile app, tablet or website screens. This will help you gather early and essential feedback from users and ensure your project is on the right track from day one.

paper-prototyping-in-the-ux-design-process-devices Image credit: CX Partners

As UX guru Jakob Nielsen reminds us, gathering user data as early as possible can have a big impact on the experience you give to the user, as well as save you wasted resources.

Why should communicating concepts to users have to cost you money?

Materials for your paper prototype

Paper prototypes come in the form of concept sketches, drawings or storyboards, which represent the skeleton of your user interface. They are usually hand-drawn, with UI screen elements cut out of paper and glued together.

paper-prototyping-in-the-ux-design-process-1 Image: MOOC

If you’re new to paper prototyping, take a look at this list of the materials needed for creating your first paper prototype.

Items you will need:

paper (with a dotted grid)
sticky notes
scissors
markers
cards
glue
pencils
eraser

Items that are nice to include:

index cards
adhesive tape
highlighter pens
paper correction fluid and tape
whiteboard

Whilst it may not be suitable for every stage of the design process, creating prototypes using only paper, scissors and some markers can be extremely practical. Let’s take a look at when you should implement paper prototyping in your UX project.

When to use paper prototyping

Paper prototyping early on in your UX project

Paper prototyping is primarily used to communicate early design proposals between teams and stakeholders. Let’s see where it fits into the design process.

The first step in your design process involves user research. User research is when you gather and analyze user data (with analytics and by performing usability studies) in order to understand your target audience better. Learn more about user research here.

paper-prototyping-in-the-ux-design-process-mobile

After the user research portion of your UX project, it’s time to get prototyping. The designers who create paper prototypes will sketch out each site or app screen, focusing on layout and essential UI elements, and less on the specific visual details of the interface.

Once everyone involved in the project is up to speed on the overall structure of the site or app, it’s time to test out these prototypes in another round of usability testing to observe how users interact with each touchpoint. From this point, designers may decide to up the fidelity, creating a digital prototype with images and interactions, for a more realistic view of the interface.

Paper prototyping in design iterations

Although paper prototypes are often used at the beginning of a UX project, they are actually useful at almost every stage of the design process.

For instance, say you need do a design modification during mid-development or even post-launch. Sketching out the update iterations will help you quickly visualize new ideas and communicate them to your team before spending any longer on an idea that might not thrive.

Check out how we used paper prototyping in our website redesign here.

The downside of paper prototyping

Paper prototyping can be a great way to create rapid iterations of your designs. However, it’s not always the solution.

For instance, it’s harder to get a real feel for interface functionality without trying it out on the actual device. This means that reactions and responses during usability testing may yield inaccurate feedback.

Additionally, each iteration needs to be built from scratch — web templates can’t help you here! Considering the fact that you’re going to transfer all of your work onto a PC anyway, sometimes starting on paper can actually be hindrance.

paper-prototyping-in-the-ux-design-process-justinmind

And don’t forget about the environment! Deforestation due to paper production is estimated to be responsible for about 12% of greenhouse gas emissions each year! When you can, use recycled printer paper. Learn more about sustainable UI design here.

Next we’ll show you how to do paper prototyping that won’t waste time or resources.

When paper prototyping doesn’t quite cut it, design with Justinmind

Building your first paper prototype

There are no hard and fast rules for making paper prototypes. But here’s our advice:

Start by cutting a piece of paper into the shape and dimensions of the screen you are designing for. Dan Nessler suggests that for smaller devices, such as smaller smartphones and watch faces (e.g. the Apple Watch), you may want to use an oversized piece of paper for readability during the low-fidelity prototyping stage.
If you’re designing for multiple devices, start with mobile. Because of the limited amount of real estate on the viewport, working on mobile first will force you to prioritize the most important content. You’ll be able to create a user experience that can be scaled upwards depending on the size of the additional viewports. Learn more about mobile-first design here.
When it comes to designing your UI elements and core device components, such as navigation bars, buttons and background images, use different-colored sticky notes. Use a different color for each different type of content. Dan reminds us to include the different screen states such as selected or unselected checkboxes, radio-buttons etc.
Make sure you have a separate piece of paper for each screen — this will make it easier to replace if an idea changes or you need to iterate specific portions of the design.

By following these steps, creating paper prototypes will be an easy and effective way for you to collaborate with your team and bring life to your designs!

Paper prototyping: the next steps

Testing your paper prototype

Once you’ve completed your first paper prototype, it’s time to test it out. We recommend testing with real users, as they will yield the most accurate feedback — and, as we mentioned before, you can do with all the help you can get to make your paper prototyping testing as accurate as possible.

You don’t need that many test participants. In fact, Jakob Nielsen suggests that with just 5 users, you can identify around 85% of all usability problems.

When you test your paper prototypes, you should be observing how users move around the prototype and be ready to reposition elements and make adjustments according to the feedback you collect from them.

The main different between testing paper and digital prototypes is that with paper prototypes, you’ll need to guide test participants, whereas with digital prototypes, the user flow should be intuitive.

You will need to prime test participants, explaining what you want them to do specifically and where they should focus their attention.

Creating mid to high-fidelity prototypes

Once you’ve tested your paper prototypes, you might consider creating digital mid to high-fidelity prototypes of your paper sketches to incorporate user testing feedback into your design.

paper-prototyping-low-to-high-fidelity

High fidelity wireframes can help you visualize and test specific UI components and interactions within and between UI screens. In fact, it’s the only way to validate user interaction of your interface prior to coding the final product.

Luckily, there are plenty of tools available to help you make the transition between paper and digital prototypes. With Justinmind, you can create static prototypes and make them interactive and visually representative of your final design in no time.

Choose from a wide range of device templates, including web, iPhone and Android. Drag and drop UI widgets to the canvas and combine them with rich web and mobile interactions to create complete screens and prototypes in just a few clicks!

Conclusion

Starting with paper is a great way to create rapid design iterations and can help you cement your ideas in order to avoid rework later on. Paper prototypes help you and your team align around your design goals and help you avoid repetition and misunderstandings.

Once you’ve completed the paper prototype stage of your UX project, it’s time to create clickable wireframes. These will help you conduct key user testing to improve your interface’s user experience. Download Justinmind now and start your prototyping journey today!

<a href="https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href">https://medium.com/media/b85dfbb5286d8a25cf2e754b9462cf45/href</a>

Paper prototyping: Your step by step guide was originally published in Prototypr on Medium, where people are continuing the conversation by highlighting and responding to this story.

Paper prototyping: Your step by step guide

Cool stuff, every week

More Articles