Jan 25th, 2022
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 -
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 -
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.
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 -
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 -
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 -
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.