Digital Prototyping

If you have an idea for a solution, a prototype can be the fastest and easiest way towards usability testing. This is especially useful when working on a new problem that does not have any existing product or service, so it is difficult to truly understand the user needs or challenges to the delivery. 

The most important part of any prototype is that it must appear to be real. Of course, it’s not real but it must look and act as though it is. This helps us to gather actionable and useful feedback from users. If it doesn’t seem real, users are less likely to interact with it in the way that we want or expect, meaning any feedback or data gathered is of less value.

4 rules for prototyping

1. Anything can be prototyped 

You can prototype anything. 

From cereal packaging, to web content. You can even prototype a service through narrative. 

Use your imagination and stay creative.

2. A prototype is easy to dispose of 

Always start with the thought that this work will be thrown away. 

A prototype is created to learn about what works and what doesn’t work. There is value in finding both. 

Never allow a prototype to be anything more than disposable.  

3. Build just enough 

Keep a prototype focused on what is needed to answer questions. 

You do not need anything fully created or everything functional, you need something fake enough to look real, that customers and stakeholders can believe is real. 

4. Keep it real

If the prototype does not feel real when testing, then you will not get the honest answers to your questions. 

A prototype that is realistic and believable gets trustworthy results. 

How to prototype

When to prototype

You can prototype something when it’s not clear what the requirements are or they change rapidly. 

You can also prototype when you have an idea but no budget or very little time to complete a discovery. Prototyping is widely used to test ideas during the alpha phase of a project too.

If you need answers, and would like an understanding of how something could work in real life, prototyping is able to help.

Tools for prototyping

Digital products

If it is on a screen (for example, a website, app or software), use tools such as Keynote, PowerPoint, Canva or a website building tool, such as Squarespace or Marvel. 

There are also free online website tools such as WIX or WordPress. These tools are great for fast prototyping and testing in a browser.

If you know how to code, or have access to development skills, you may also wish to create prototypes in code. 

Paper-based products 

For anything that is paper based, use word processing software such as Word or Google Docs. You can also use Canva, design software, or a presentation tool. Always print a paper-based product to see how it would look in its size (this is especially important to check font size). 

Paper based products could include letters, brochures, flyers, reports or marketing materials. 

Services 

If you are working on a service, it’s a good idea to prototype with a script or a storyboard.

Objects

You can work with physical objects or use digital tools to prototype the marketing for a product. 

For example, if you are working on the design of a new office, you may find using models useful. You could also prototype with pictures of how the office might look and use this to gather feedback. 

When prototyping physical objects, you may also find it useful to modify an existing object. We’ve found children’s toys, such as lego or playdough, to be really useful when creating these kinds of prototypes.  

Steps to prototyping

When working with prototypes, there are some key activities to be completed:

1. Research:
   Research and collect assets such as existing content, image libraries, or similar examples to help shape the prototype.
2. Create:
   Create components such as screens, pages, or designs.
3. Knit:
   Ensure the components fit together and the narrative for the prototype is seamless from a user perspective. Ensure there is consistency throughout (any mistakes or missing parts remind users that they are looking at a fake product or service).
4. Test:
   Write questions you would like answered to understand if the prototype is fit for purpose. Use these questions to conduct interviews about the prototype.
5. Iterate:
   Complete a trail run and go through the prototype to find and fix mistakes and patch any holes found. 

Learn more about prototyping 

Course: Design Thinking – The Beginner’s Guide: https://www.interaction-design.org/courses/design-thinking-the-beginner-s-guide

Bill Buxton, What Sketches (and Prototypes) Are and Are Not: https://www.cs.cmu.edu/~bam/uicourse/Buxton-SketchesPrototypes.pdf

d.school: Prototyping: https://dschool.stanford.edu/groups/k12/wiki/c0be1/Prototype.html