How to use a paper prototype to design your new website

When we use paper prototypes with our clients, in our meetings and collaboration sessions, we always account for the fact that not everyone has the same imagination and vision for the project. This means that some may not be able to fully visualise the outcome as clear as others can, so we need to be mindful how we are using the paper prototype to gauge how much detail we need to go into when explaining features and sections.

There are lots of advantages to using a paper prototype before making a digital prototype, some of them are:

• They enable our ideas to be communicated clearly in a visual way so everyone working on the project is on the same page.
• Clients get a clearer picture of what they should be expecting to be delivered.
• It allows us to define the brief further, by knowing exactly what is needed from each section and page, so nothing falls out of scope.
• We get clarity on what aspects of the project will be more challenging than others.
• Our initial ideas get tested quickly in meetings. This allows us to easily see if an idea or concept is viable within our time and budget parameters.
• No one is tied down or committed to ideas as they are so easily changed and adapted.
• It allows us to spend more time thinking about conceptual ideas rather than focusing on ‘how will this actually work’.
• Ideas can be chopped and changed in seconds and new ideas can be made up at the same time too.
• We are able to collaborate with clients during our meetings in a fast way.
• They allow our clients to communicate their ideas by using physical tools rather than ideas being misinterpreted though speech.
• It’s a fun way to work!

Here is an example of how we used our paper prototype for a project we have recently completed for Spike Island.

On the left, you see all of the blocks and headings we thought we would need for the homepage, and on the right is how it actually turned out.

As you can see the paper prototype looks different to how the finished website looks for Spike Island, however, all of the blocks that are used in the paper prototype correspond to what is on the current homepage now.

For example, we didn’t know what we wanted the page title to be but we knew we wanted it at the top of the page under the hero image, so in its place, we put a H1 heading.

We also use our paper prototype with our clients, during workshops to pull ideas together and begin putting together some key pages and templates using the blocks. From this, we can evaluate if these blocks and the set up of the pages fit our findings from the workshop and rearrange things if needed in a fast way.

We will often take a few features from our paper prototypes that need further explaining and make them interactive. Once we have chosen those features, we use video to show how we think these features should be interacted with and how they should perform.

For this example, I am showing you an image gallery.

To begin we draw a storyboard of how we see the interactions happening, this is so we know how many screens to replicate with the paper prototype.

Shown below are 6 steps that I had mapped out, the steps were:

• The user would scroll down a page
• Click on a card
• A new page would be reloaded where they would scroll down
• They would then click on an image
• A lightbox would appear
• They can use the arrows to go forwards and backwards through the images in the gallery

From this, you can begin to make each stage of the storyboard using the paper prototype. Once you have done this you can film short clips of you interacting and clicking on parts of the prototype.

Here is the video I made of the image gallery:

And here is another, where I showed how an accordion would open and close:

Hopefully, you can see how valuable we find using our paper prototype. If you see this being a tool you can use within your teams and during your website projects, please download a copy.