📹 New! Remote User Testing - Get video + voice feedback on designs and prototypes
Read more
Design & Prototyping

The Ultimate Guide to Prototyping

Prototyping 101: Bringing Your Bold New Product to Life
The Ultimate Guide to Prototyping

Anybody with an exciting product idea that remains on the ground needs to familiarize themselves with prototyping.

From digital and paper prototyping to rapid prototyping and high-fidelity prototyping (and many more in between), it’s crucial to know what might apply to any product. Finding the correct form of prototyping is the only way to execute ideas that are practical and viable to thrive in the real world.

This post will act as a guide and jumping-off point for big thinkers out there who need a helpful boost in the right direction.

What is a Prototype?

Products that are in their most experimental form are prototypes. Never the finely tuned entity of a finished product, these concepts are turned into something tangible, - for instance - a digital prototype or wireframe prototype.

Generally, teams (or individuals) construct a prototype for the purposes of user testing and feedback. These methods are applied to gather insights on design concepts and to test product and market fit.

“Prototypes help enhance precision because these designs are assessed by analysts and users who provide valuable feedback.”

Prototypes allow innovators to delve deep into their ideas. They also convey a feature’s (or overall design concept) intention to users before time and money go into development.

Why you should go beyond wireframes and mockups

Wireframe prototype

Wireframes and mockups are facets of the early stage of the design process.

The barest bone part would be the wireframe—which is low fidelity in its presentation. It lays down the rawest elements of the foundation. Afterward, should come the mockup – something that will closely resemble the prototype, but isn’t quite developed enough, nor is it operable/interactive.

More specifically, the mockup is a model, giving a proper visual or graphic representation of what’s to come.

Prototypes go beyond blueprints (aka wireframes) and graphic representations (mockups). They’re more functional and will garner keener insights from real users than the previous two stages. Therefore, this process helps ensure the product hits the market with some steam.

“Prototypes in design give designers an experimental model of a potential solution. To test/validate design assumptions in a streamlined, inexpensive manner, so changes can be made on the fly."

Prototyping as a process is an extremely valuable step in Design Thinking. Being able to put the uer at the heart of your process requires you to test your designs on real users and prototyping makes this possible without spending lots of resources.

Prototyping can help you:

What are the different types of prototyping?

Prototypes can vary in types and levels depending on what is required. Here are a few examples of how prototypes could vary:

Is it a hand-drawn prototype or a digital one? Is your prototype for mobile or desktop?

What is the level of detail that has gone into this prototype? How simplistic is the design, or does it look like the finished design?

How functional is the prototype? Can users interact with it and go from screen to screen or is it view only?

Life Cycle
Is the prototype a quick and disposable version that will be replaced with a new and improved version? Or will it go through longer iterations, that will be built and improved on overtime, potentially ending up as the final product?

Here are some other types of prototypes that may also be mentioned in your design journey and these will be created of different levels of the forms mentioned: Feasibility prototype, horizontal prototype, rapid prototype, simulations, storyboard, vertical prototype, wireframe, animations, and mockups.

Choosing the right prototyping process and fidelity

Paper prototyping lo-fidelity

The only way to accurately decide the most fitting prototyping process is by identifying which of the following fidelity-types is most appropriate:

Low-Fidelity Prototype:

Mid-Fidelity Prototype:

High-Fidelity Prototype:

Digital prototyping methods and tools

These kinds of prototypes are digital demos or simulations of a product or service—usually software, apps, or website-based in nature. Ideally, this phase will help test assumptions and garner insights by exploring all aspects of the product before reaching its full form.

Digital prototypes are often executed after paper prototypes (in which paper models simulate computer or web applications).

Tools for digital prototyping are software-based, and they initially were for UX/UI designers but now depending on your chosen prototyping tool, anyone in the business could use them.

For example, Marvel (that’s us!) is a web-based tool that wireframes and prototypes the user experience for web and mobile apps.

Material.io is another example that offers a flexible and agile guideline system. It's backed by open-source code and harnesses collaboration efforts between designers and developers.

Creating prototypes for usability testing

Prototypes should undoubtedly go through usability testing. A process which offers opportunities to tweak and hone the following aspects of making a new idea come to life:

All of these facets must be thoroughly investigated before a project reaches the development stage. It’s then possible to use a prototype to receive useful design feedback during the early stage of innovation.

Usability testing can be done with low-fidelity or high-fidelity prototypes. Both will offer opportunities for teams to test ideas and theories about functionality and the overall user experience.

The prototyping process

Creating prototypes isn’t difficult and here are some general steps involved in the prototyping process:

  1. Define your requirements
    The first step of prototyping is to define your goals - why do you need a prototype? What are you trying to solve?
  2. Ideation
    Once you have your goals, jump in and create as many prototyping ideas, don’t get bogged down in this step, as these ideas will help jog your mind to think outside the box no matter how silly they may be, it’s always an important process.
  3. Build your prototype
    In this phase, you will design an actual prototype based on the information gathered from the quick designs. This will be a small working model of your requirements.
  4. User testing
    Once you’ve created a prototype, you’ll need to put it in front of users. You’ll want to observe how they interact with the product in its current state and ask for feedback on the experience. By continuously prototyping, you’ll be able to make informed design decisions that will help you iterate your way to an intuitive and user-friendly product that users will love.
  5. Refining prototype
    Based on the user’s feedback and suggestions, this will be the stage to refine your prototype. This phase won’t be over until all the requirements you specified at the beginning of this process have been met and the user is happy with the results.

Practical tips that work for any prototype

First and foremost, all prototypes should be catered to the audience they’re being made for—this ensures relevant, actionable results.

Whoever the audience is should also be primed, prepared, and given background knowledge to avoid confusion. It is important to involve them in the design process. After all, user feedback is the lifeblood of any successful prototype.

“Good prototypes look real and do anything to emulate the appearance of the final product. For instance, digital versions incorporate clicking buttons, scrolling, or other methods that create the illusion of computer code.”

Ask yourself the following questions about the primary focus of your prototype:

What’s next?

How to run a remote design thinking workshop

Now you know the ins and outs of prototyping, why it’s so invaluable, and what types of prototyping you might use throughout your design process.

There’s only one thing left to do, and that’s to create your own!

If you would like to learn more about user-centric design, then check out our free ebook, The Design Thinking Workshop Kit that will help you and your team learn about how to apply the stages empathize, define, ideate, prototype, and test to any problem, in an interactive and fun session. We’ve even remade our kit digital to bypass those tricky on-site logistics, so you can still collaborate with your team no matter where you are in the world.

Design and prototyping for everyone

Design and prototyping for everyone

Thousands of individuals and teams use Marvel to design and prototype ideas.

Get Started, it's Free!

Content and Social Media Manager at Marvel | Photographer | Sewer

Related Posts

When it comes time to share your work with clients or stakeholders, securely sharing your Marvel prototype is easy. Prototypes can be shared in two ways: either by giving a client view-only access to your workspace, or alternatively by sharing a public URL. If your stakeholders have feedback, they can make any notes directly in Marvel using comments and annotations…. Read More →

Following on from our series of posts on how Customer Experience and Customer Support teams can benefit from using Marvel, we chatted to our Sales team as well as some of our customers to find out how Marvel is used and, in particular, how they can benefit from creating prototypes. Prototyping during the sales process A popular online payment system… Read More →

Prototyping is the process of creating a functional mockup of your product before development. Prototyping helps you make sure your product works as intended and solves your users’ problem, before you write your first line of code. User feedback on your prototype gives you insight needed to improve the idea while it’s still easy to make those changes. High or… Read More →