Page History

What is a Product Prototype?

“Prototyping is the conversation you have with your ideas” –Tom Wujec. The Product Prototype is the creation of a visual and sometimes interactive representation of your idea. It is the method through which you give physicality to your thoughts without the cost of full development.

Why Create a Product Prototype?

“A Prototype is a question embodied” -Diego Rodriguez. The only way to determine if your idea is an effective solution is to ask your user. The Product Prototype allows you to ask your user “Does this work for you?” without incurring the expenses of development. It also allows you to see your users interact with your idea, assess how “usable” your idea is and make adjustments accordingly prior to the actual creation of the product.

How to Create a Product Prototype:

There are three methods through which you can create a Product Prototype:

Sketching: Gather paper and your writing instrument of choice: pens, pencils, crayons, etc. Quickly sketch out the overall layout and content of the product. Create separate pages for the results of each interaction. When presenting this to the users, switch the sketches based on how they “interact” with the product. This is a fast, inexpensive option.

Wireframe: Wire-framing can be done with a wire-framing tool. These tools such as, UXpin, Balsamiq, are available online. When creating a wireframe be sure to focus on the layout of the content and use gray scale or black/white. The purpose of this is to give a more solid visual representation of the layout. People will pay more attention to the functionality & experience due to the absence of the aesthetics. This option is also inexpensive but will take more time to produce than a sketch.

Clickable Mockup (Prototype): This can be created using a prototyping tool such as Adobe XD or Mockplus. With this prototype, you develop all of the aesthetical aspects as well as the interactivity without completing the back-end work. Users are able to experience the interface and give feedback accordingly

Wireframe | Image Source

<iframe width="100%" height="315" src="https://www.youtube.com/embed/aDqbMOI13o4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

<iframe width="100%" height="315" src="https://www.youtube.com/embed/ah3lxbDJLpE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>