Paper prototyping


The stages of a User Centred Design process involves ‘researching’ the problem, generating ‘ideas,’ before parallel ‘prototyping’ in order to conduct user testing. The latter is when you hone in on two to four ideas or sketches the team have selected to take forward based on how it meets the requirements. One of the methods of prototyping a selected item is to use paper.

This should be the stepping tool used to create a high-fidelity, interactive prototype which you can test with your user group

Paper prototyping allows for a quick, easy and cost-effective way of testing the usability of a digital product without getting caught up on the look and feel early on. Using your feature list of requirements and a component library, you’re able to easily get a bunch of screens drawn out to understand the user journey.

It should be said that these low-fidelity prototypes should only be used internally within the team or other areas of the business rather than your actual participants. This should be the stepping tool used to create a high-fidelity, interactive prototype which you can test with your user group, since testing a low mockup does not provide enough ecological validity – it is not how people would use the product in the real world.

Using the paper prototype, you are able to perform a Cognitive Walkthrough of a task without actual users to check for errors. Similar to a Heuristic Evaluation, it was originally made to review a desktop application, but can be adapted for mobile applications. Walking through each screen, answer the questions below, if you encounter a “No”, define the problem and note down the solution:

  • Is effect of current action same as user goal? (Does it match the user’s mental model)
  • Is action visible? (Once they know what they’re doing, can they see what they’re meant to do? Is it there on the screen for them access)
  • Will user recognise action as the correct one? (Does it have good labelling or strong signifier)
  • Will user understand feedback? (Is there good feedback)

Paper prototyping a mobile application

  1. Begin by cutting out a number of diagonal 5-inch papers. Stick these onto a larger sheet of paper so you do not misplace them.
  2. Then, using a slightly heavy weighted paper, cut a phone outline, making sure there’s a 5-inch cut in the middle for you to hover over and view your screen designs. I usually use a pulley system where I leave an inch at both ends of the lager sheet of paper that allows me to tug at each end to switch between screens based on the interaction (see feature photo above).
  3. Referring back to your use cases and set of requirements, write down the name of each individual screen and the list of features based on the journey using a set of post it notes and order them in a chronological order.
  4. Using a component library or a design pattern library, begin drawing the elements on paper. It’s fine to use smaller cut outs for pop-ups modals and simply overlay them when necessary.
  5. Perform a Cognitive Walkthrough for error-checking, before testing internally with your team to point out all the flaws before testing with other areas of the business and make all the relevant amendments.
  6. Finally, using Pop, turn the hand drawn wireframes into an interactive working prototype. This gives a realistic feel of using the app with tappable hotspots and gestures.

What’s your process? Leave your comment’s down below.

Leave a Reply

Your email address will not be published. Required fields are marked *