How to Prototype to Build A Better Product

< blog


How to Prototype to Build A Better Product

A prototype will bring your product to life, without yet having to spend the time and money on development.

Before we get into how to prototype effectively, I think it's worth spending a moment reminding ourselves why prototyping is time very well spent:

Why Prototype

A. Internal understanding of the concept

A prototype can ensure that your clients, stakeholders and internal team all  'get' the product, its focus and workings. It allows designers and Product Managers to spot flaws in the flow as they play with the prototype. It means the team have something truly tangible to present to stakeholders. This can be vital for full buy-in to get to the next stages of development.

B. An opportunity to merge the visual and interaction design

Your static designs may match the look and feel you want to create for your users, but maybe when you put that together with the transitions from one page to another, you may find some of the mood and branding is lost, or that a transition causes a page of information to be more overwhelming than it seemed when only looking at the static design.

C. Usability testing

This is the big one and the main reason prototyping is a must. Let me add that is an even bigger must when considering mobile. Mobile apps demand a greater number of flows from screen to screen, a smaller amount of info per screen plus animations that greatly effect small interactions. Plus let's not forget that UX mistakes will cost you more at development stage for mobile than for web. Usability testing will allow you to see how your users engage with your product, where they are confused or blocked and which areas they find most desirable and undesirable.

How to Prototype

1. Decide what features it will contain

Your prototype does not have to contain everything you have ever desired as a feature. Keep your MVP (minimum viable product) in mind, but it is also fine to be going beyond the MVP for prototyping. Remember this prototype should help you create your backlog and priorities for development but also decide your future plans. Having phased prototype versions that reflect expected development launches (MVP first) can help connect the expectations of the client (stakeholder), as well as give you essential insight into user interaction with future  proposed feature sets.

2. Have a few prototyping stages

You'll find you get the most out of a prototype for usability testing that contains high fidelity designs and some level of transitions, animations etc. This does not mean that once you have some wireframes it isn't well worth adding these to a prototype. At this stage it can be a great tool for internal communications and checking the most basic premise of the user flow.

Once you have your prototype ready for usability testing, you are likely to find some glaring repetitive blockers for your users. That is more than fine. It;s great to find these out. It can also be a great opportunity to take those aspects back to the drawing board and then edit your prototype according for your next round of user tests.

3. Use the right prototyping tool for you

There are many great tools out there. I am just going to talk about the ones I use regularly. That isn't to say there aren't a wealth of other fantastic tools for you to choose from.


This is a great tool to make really quite thorough and realistic feeling prototypes. Also a great tool for mobile.


This is a nice choice for some quick and easy prototypes. I like this tool when making a prototype of the sketch or wireframe stage, as its super simple and gives enough of a feel for the user flow to be helpful at this stage.


This is mainly a sketch and wireframing tool. You can also add some basic interactions using Balsamiq, but personally I find it easier and more useful to just use these sketches and add them to POP.


This is a great tool for prototyping more complex animations and interactions for mobile.

What's Next?

Usability testing with your prototype will give you a wealth of valuable info, before you go on to develop the product. User testing can take many forms, from focus groups through to surveys. The options will be one post at least. An important first note for usability testing: Make sure you are testing on your users. That is, although it's great to pass your prototype around the office and see where people have questions or don't understand the flow, this is still an echo chamber. You must get your prototype into the hands of your demographic of user, to get some truly valid information back from your tests.

Reach out to us for more help with how to move forward with your prototyping stage.



July 20, 2016

Subscribe to our mailing list