From paper and digital prototyping to rapid prototyping and high-fidelity prototyping – and many more methods in between, it is essential for you to know what might apply to any product. Choosing the right type of prototyping is the only way of executing practical and viable ideas that can thrive in the real world.

This article will serve as a guide and a starting point for designers who need help with their prototyping needs, ensuring they will be able to bring to market a product that works well and meets all the needs of its users.

What is a prototype?

Prototypes are very basic versions of systems which will likely be heavily iterated upon until it is a final product. They are more flexible than wireframes in that they can be responsive as well as contain images and other content.

While all wireframes are low-fidelity prototypes, high-fidelity prototypes are not wireframes. These should look as close as possible to the final UI and should feel like finished products to users.

The main purpose of a prototype is to allow you to test your design before investing more time and money into developing the full product. This can help developers iron out potential bugs or flaws in design, as well as see user flows and interactions and build support from stakeholders.

Going beyond wireframes and mockups

Wireframes and mockups are both facets of the early stages of the whole design process.

Wireframes are the most bare bones as they are very low fidelity and they showcase the foundation’s rawest elements. After wireframes come the mockups, which closely resemble the prototype, but are not quite as developed or yet operable. More specifically, they are models that provide a visual representation of the prototype.

Prototypes go further than wireframes and mockups as they are essentially functional and can provide better insights from actual users. As such, the prototyping stage can help you ensure that your product reaches market with a bit more steam.

Prototyping is an extremely valuable step in Design Thinking. Putting users at the heart of your design process means you have to test your design using real users, and prototyping allows you to do this without spending too many resources.

Prototyping is essentially an experimental process where the design team implements ideas into a tangible form, be it on paper or digital. They can build prototypes of varying degrees of fidelity which capture their design concepts and then they test these prototypes on users. Prototyping can help them improve and validate their designs, ensuring the brand releases a successful product.

Prototypes are great for:

  • Gaining insight into how people will use your product. Seeing how this early version will behave in action will also show you how it is likely to behave in real-world usage.
  • Identifying usability issues or potential design missteps before it is too late. It is a great way to expose potential weak links in the user journey.
  • Helping you make better informed design decisions. This can be something as simple as testing two different layouts of a page or the positioning of a certain button in an app.
  • Deciding between multiple variants of a prototype by testing them against each other.

Your team should produce several rudimentary and inexpensive versions of the product or features found within it so that you can investigate the solutions you came up with in the previous stage.

Prototypes can be shared and tested within the team, or they can also be shared with other departments or small groups of people outside the design team. Remember that this is an experimental phase, and your aim is to find the best possible solutions for the problems identified in the earlier stages.

Solutions are implemented in these prototypes and are investigated individually and either accepted, re-examined and improved, or rejected based on the users’ experiences.

By the end of this stage, your team should have a better understanding of the product’s inherent constraints and its problems, as well as a better understanding of how your users behave, what they think, and how they feel when interacting with your product.

Reasons for prototyping

Prototyping is an essential part of UX design, and it usually comes after ideation, where the design team comes up with ideas that can meet users’ needs. The process of prototyping involves crafting an experimental model of the product you intend to build and seeing how well it matches users’ needs through the insights they offer after interacting with it. Remember to prototype early on, as this will ensure that the feedback you get from users will shape the product’s development.

Prototyping has many advantages, among which:

  • Prototypes provide a solid foundation from which you can ideate and make improvements to your product, offering stakeholders a clearer picture of the final product’s potential benefits, risks, and costs of building it.
  • Prototypes can easily adapt to changes. This helps to avoid any commitment to a single, potentially not ideal version of the product, as well as save money by making changes early on.
  • You can show prototypes to users early on and get their feedback on them, allowing you to pinpoint aspects which need improving.
  • You have a tool that allows you to experiment with associated parts of your users’ needs and issues, which means you can get insights into certain areas of their world that are usually less obvious.
  • Prototypes provide stakeholders with a sense of ownership, thus fostering more emotional investment.
  • Prototypes can reduce the time it takes to bring the product to market by minimizing the number of issues that need to be corrected before launch.

The different types of prototyping

Depending on what your situation requires, prototypes can vary in types and levels. Here are some examples of this:

Form

Form relates to whether your prototype is digital or hand-drawn, or whether it is for desktop or mobile devices, for example.

Fidelity

Fidelity refers to the level of detail offered by the prototype. It can be fairly simplistic or very close to how the finished design will look like.

Interactivity

Interactivity describes how functional the prototype is. It can be just for viewing or users can pretty much do everything they will be able to do with the finished product.

Lifecycle

Lifecycle refers to whether a certain prototype is a quick and dispensable version which will be replaced with a newer and better one, or whether it will go through longer iterations, being improved as time goes by, and even potentially ending up as the final product.

Choosing an appropriate prototyping process and the level of fidelity

In order to accurately decide which prototyping process is best for your project, you need to identify the most appropriate level of fidelity for your prototype.

Low-fidelity prototypes:

  • are typically paper-based
  • cannot be interacted with
  • can range from simple hand-drawn mockups to printed graphics
  • are quick to create
  • are ideal for visualizing an early version of a design or alternative design solutions
  • can promote innovation and product improvements through quick iterations
  • can make users and stakeholders feel more at ease when you are suggesting changes

Mid-fidelity prototypes:

  • are a middle ground between low-fidelity and high-fidelity
  • they can be somewhat bare-bones with limited interactivity, or they can be somewhat more finely tuned wireframes

High-fidelity prototypes:

  • are computer-based
  • allow for realistic user interactions
  • are similar to the final version of the UI
  • are perfect for gathering authentic user performance data
  • are great for demonstrating products to stakeholders and users

Methods and tools for digital prototyping

Digital prototypes are essentially digital demos or product/service simulations, typically in the form of apps or other types of software, or websites. This phase will ideally help you test assumptions and get insights by exploring a product’s every aspect before it reaches full form.

Usually, digital prototypes are executed after paper prototypes, where paper models are used to simulate a piece of software.

Digital prototyping tools are software-based, and they were originally meant for UX and UI designers, but depending on the tool chosen, they can be used by anyone in the business.

Marvel, for example, is a web-based prototyping tool which wireframes and prototypes the UX of web-based and mobile apps.

Another example is Material.io, which provides a flexible and agile guideline system. Its code is open-source and it is made possible through the collaboration between various designers and developers.

Prototypes for usability testing

Prototypes should always be subjected to usability testing. This process gives you the opportunity to make tweaks and refine certain aspects of your product, such as:

  • design assessment
  • functionality
  • UX

Each of these facets needs to be tested thoroughly before moving on to the development stage. After that, you can use a prototype to gather valuable design feedback in the early stages of innovation.

You can conduct usability testing using both low-fidelity prototypes as well as high-fidelity ones. They will both offer teams opportunities to test new ideas and theories about the product’s functionality and its overall UX.

The prototyping process

Prototyping is not a difficult task. Here are some of the steps involved:

  1. Defining requirements

The first thing you need to do when beginning the prototyping process is to define your goals. Why do you need to prototype and what are you trying to solve?

  1. Ideation

Once you have defined your goals, create as many prototype ideas as you can. Do not get bogged down at this stage, as the ideas you come up with will help you think outside the box. Regardless of how silly they may seem, this is an important step.

  1. Building the prototype

This is where you actually design the prototype based the information you have gathered from your quick designs. This will end up being a small working model of your requirements.

  1. User testing

After you have created your prototype, you need to put it in front of actual users. You should observe how they are interacting with your product in its current state and ask them for input on their experience. If you keep prototyping, you will be able to make more informed design decisions which will help you iterate toward a more intuitive and user-friendly product.

  1. Refining the prototype

Based on the insights and suggestions you got from users, you will be able to refine the prototype and make further improvements to ensure the best experience for them. This stage will not be over until you have met all the requirements from the beginning of the process and your users are happy with the product.

Practical tips for any type of prototype

Keep in mind that any prototype you build should be catered to its respective audience, thus ensuring that the results are relevant and actionable.

Whoever your audience is, they should be primed and given background knowledge to ensure they are not confused. It is always a good idea to involve them in your design process since user feedback is key to any successful prototype.

Here are some questions you should ask yourself about your prototype’s main focus:

  • Is the prototype’s purpose base on testing or communication?
  • If the prototype is meant for testing, would the study be exploratory or directed?
  • What are you testing – attitude, engagement, or behavioral metrics?
  • What would success or failure mean in the context of your testing?
  • Do you already have any specific assumptions or hypotheses?
  • Are there any particular aspects of your product that you should gather insights on?

Final thoughts

Now that we have gone over the ins and outs of prototyping and discussed why it is as valuable as it is, as well as the types of prototyping you can use in your design process, what comes next?

The only thing left for you to do is to go ahead and create your own prototype. Keep in mind everything discussed above and remember that you can test your prototype as many times as you need to until you think you have reached that point where your product is fit for launch.