What is a Prototype? 3 Most Important Types Of Prototypes

Prototypes refer to the simulations/samples/proofs of concept with varied fidelity levels - low, medium and high depending on how interactive it is. These are created at different developmental stages of a digital product to help the design team to achieve the design goals and objectives.

Prototypes are helpful in -

• Validating ideas;
• Testing visual design elements for any design flaw;
• Testing and identifying any usability issue can be spotted and rectified;
• Checking the responsiveness and performance of the product across all devices;
• Validating the user experience that the final product aims to deliver;
• Presenting a sample to the stakeholders;
• Presenting to investors for getting funds for your project;
• Supporting good coordination, collaboration and teamwork in distributed development teams;
• Getting feedback and evaluate scope for iteration and further improvement of the product;
• Reducing the overall developmental time and cost. If there is any discrepancy in the product design, it can be spotted before coding starts. And if the flaws come out after launching the product, it would lead to a bigger loss;
• Overall, confirming the concept, facilitating better coordination, keeping the team focused on the goal and objective of the project.

Types of Prototypes

There are three types of prototypes that are created at different developmental stages of a digital product. They are -

Low-fidelity wireframe or paper prototypes

At the initial stage, design teams create the first proof of concept through rough wireframes to put their ideas on paper. They make sketches of different features and design components of the product using just pen and paper.

Prototypes come in the fourth stage of the design thinking process after - empathy, define and ideate. The problem of the user that the product should solve is defined by now.

This is the exploratory phase where the designers come up with ideas and execution plans. Thus, at this stage, wireframes help to -

• Collaborate on design ideas; and
• Vet out the scope of the product.

It is just like the blueprint of building. To begin with it could be a simplified outline of a page layout where an X sign enclosed in a square is used to represent images and simple straight lines are used to represent text.

Gradually, the text and the design components are detailed out. Again a simple black and white representation is created to see how the goals and objectives of the digital product can be achieved using the design.

As explained in the below image, at this stage, the functionality such as the page layout, navigation, information architecture and the user flow of the digital product is explained step by step.

This is also the right time to come up with multiple variants of the design. Thus you can compare to find out the best fit that helps to achieve the purpose of the digital product.

Medium Fidelity Mock-ups

Gradually, the same wireframe is taken ahead to create mock-ups that reveal the look of the product. It is a non-interactive and static graphic representation of a webpage.

The brand logo, text, images, call to action icon, and every other component will be displayed exactly in the way as they would be in the final layout of the webpage. But they are not clickable.

Mock-ups help to validate the visual impact of the digital product.

• Do the visual elements help to attract and engage the users in the desired manner?
• Can they see the pieces of information in the sequence in which you want them to see?
• Do the users become curious about the next steps?
• How do they react to the colors scheme?
• Can they identify the call to action buttons?

It helps to validate the proof of concept and identify the loopholes in the design. These issues can be iterated on design before the coding starts.

To learn more about principles and elements of visual design, please read the article - Principles and elements of Visual Design that impact User Experience.

High Fidelity Prototypes

And eventually, mock-ups lead to high fidelity prototypes where the links are clickable. And all other interactive elements such as scrolling the page up and down, playing the audio visuals, accessibility to sign up/ sign in forms can be experienced as it would be in the final product.

This high fidelity simulation is presented to the stakeholders and used extensively for usability testing.

After vetting out the effectiveness of the visual design elements with medium fidelity mock-ups, now it is time to test the UI elements of the product.

Tasks are assigned to the users to identify -

• How easy or difficult is it for them?
• How much time is taken to complete the task?
• What are the challenges they are facing while completing the task?
• How do they react to animations and transitions between different objects and design elements?

The insights drawn from these tests are more accurate. However, vetting out the proof of concept using a high fidelity prototype is both time and cost intensive. Because, as mentioned earlier, it is the final simulation before product launch. Hence, iteration at this stage would essentially come at a cost of time and money.

Get accurate feedbacks from Prototypes

To get the most authentic feedback, here are a few points you should keep in mind while conducting the usability testing -

• Inform the users that it is just a sample for testing the application/ webpage. And that, they should feel free to share their feedback;
• Before you design the task for the test, make sure you know the exact feature/screen/page that you want to test;
• If possible, give yourself a break between testing the product with different users and consider incorporating their feedback and iterate the design accordingly;
• Take frequent feedback from colleagues, friends and family members parallely with formal usability tests.

Conclusion

Prototype is a significant part of the Design Thinking process that helps to identify and eradicate all possible reasons that might fail a product after being launched.

At the very initial stage, low fidelity wireframes help to get the design ideas on paper. At this stage design teams collaborate and discuss the best possibilities to execute their ideas.

Going forward, medium fidelity prototypes help to validate the visual design and eventually, high fidelity prototypes help to test usability of the product.

To get the best out of the time and monetary investment for creating prototypes, UX design teams should know -

1. What are the most important screens/ features of the product that they think would engage the users the most? And create prototypes for these features.
2. Which level of fidelity to use at what stage?
3. Use appropriate prototyping tools to speed up the process

Creating prototypes helps design teams identify flaws in the existing model and also, the scope for improvements. Thus they iterate their design ideas and processes to make sure that the product experiences a sweeping success after it is launched in the market.

As much as it is important to know about prototypes, it is also important to learn how to create prototypes. Please read the next part of this blog where we explain - How to create prototypes.