What is Prototyping and how to do it right?

Jun 12, 2023

Prototyping is simulating a product / experience so that the user experience can be tested before building the product.

Duration

2-4 weeks, but could be more depending on the number of user stories

Complexity

Advanced

Contributors

UX designer, UI designer, User researcher, Product manager

Getting Started

Prototyping is the process of creating a preliminary model or sample of a product or system in order to test and evaluate its design, functionality, and usability. It allows designers to create and test different ideas and design concepts before creating the final design.

Why?

To test design concepts and ideas with users to identify potential issues and improve usability.
To validate the design before it is built.
To iterate and refine design solutions based on feedback and testing results.
To communicate design ideas and solutions to all the stakeholders.
To reduce the risk of expensive design mistakes.
To ensure that the final product meets user needs and requirements.

Prototypes need not always ‘look’ like the final product. Depending on when and why the prototyping is used, it can be done differently.

What is the difference between Low and High fidelity prototypes?

Types of prototyping

Low-Fidelity Prototyping: Low-fidelity prototypes are simple, low-tech prototypes that are quick and easy to create. These often include sketches, wireframes, or paper prototypes and are used to test basic design concepts and user flows. Low-fi prototypes are designed when a concept is created from scratch.
Medium-fidelity prototyping: These prototypes are more detailed than low-fi prototypes and may include interactive wireframes, clickable prototypes, or static designs. These prototypes are used to test more complex design solutions and to gather feedback on specific design elements.
High-fidelity prototyping: These are interactive prototypes that closely look like the final product. These prototypes often include animations, interactions, and realistic content. High-fi prototypes are used to test and validate design solutions in a realistic setting and to identify any potential usability issues or technical limitations.
Functional prototyping: Functional prototypes are fully functional versions of the product or interface. These prototypes are used to test the usability and functionality of the product in a real-world setting.
Rapid prototyping: Rapid prototyping involves quickly creating multiple versions of a prototype to test different design concepts and ideas. This approach allows designers to iterate and refine their designs quickly based on feedback and testing results.

Want to know when to create which type of prototypes?

Read What Kind of Prototype Should You Create? From IxDF

How to?

Here are a few important steps you can follow to create effective prototypes:

Define the purpose and scope: Before creating a prototype, define its purpose and scope. You need to identify what problem you are trying to solve, what features the prototype should have, and what user goals you are trying to achieve.
Choose the right fidelity: Choose the right level of fidelity for your prototypes. Low-fi prototypes are quick and easy to create and are useful for testing ideas and getting feedback. High-fi prototypes are more detailed and realistic and are better for testing usability and user experience.
Focus on user needs: Your prototypes should focus on your user’s needs and goals for which you should create a user-centered design that is intuitive and easy to use.
Test and iterate: After creating your prototypes, test them with users and get their feedback. This will help you identify any usability issues and refine your design.
Use the right tools: There are several tools available to create prototypes like Sketch, Figma, Adobe XD, and InVision. Choose the right tool that best suits your needs and your design process.
Collaborate: Collaborate with your team members and other stakeholders to ensure that your prototypes meet everyone’s needs and expectations. This will help you create a more effective and efficient design.

Do’s & Don'ts

Do’s	Don’ts
Have a clear goal for creating prototypes. Stay focused on solving the user problems. Be aware of any technical limitations. Pick the right fidelity of prototyping. Use the right tools for creating prototypes. Prototype a list of specific user stories. Do keep your design simple and user-centered. Do collaborate with all the stakeholders.	Don’t try to create a perfect design. Don’t start detailing designs before getting feedback. Don’t create incomplete flows. Don’t go on preparing forever. Don’t focus on aesthetics over usability. Don’t work in isolation. Don’t rely solely on your intuition. Don’t be afraid to reiterate and refine your design based on user feedback.

Templates

Prototype Templates from Canva

Resources from Google Material Design

Suggested Tools

For Low-fidelity Prototypes

Pen & Paper
MarvelApp
JustInMind
Balsamiq

For Medium & High-fidelity Prototypes

Figma
Axure
InVision
AdobeXD
Proto.io

For Coded Prototypes

Flutter

References

What Is a Prototype: A Guide to Functional UX from UXPin
How to Rapid Prototype in UX from PlaybookUX
A Complete Introduction to Prototyping (2022 Guide) from CareerFoundry
Prototyping 101: The difference between low-fidelity and high-fidelity prototypes and when to use each from Adobe
The Differences Between Low-Fidelity vs. High-Fidelity Prototyping from ProtoPie

Other Related Best Practices

Usability Testing
Wireframing