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

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:

• Gain insight into how your users will interact with your product. Being able to see an early version of the product in action will also show you how it would work in the real world.
• Identify any usability issues or design flaws before it’s too late. Prototyping will help you expose any weak links in your user journeys.
• Help make informed design decisions. This could be as simple as testing between two different layouts for your website or where a specific button should go on your app.
• By testing a few versions you’ll be able to clearly see which prototype has outperformed the other.

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:

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

Fidelity
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?

Interactivity
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

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:

• Paper-based
• No user interactions
• Ranges from hand-drawn mockups to printouts
• Quickest to create
• Ideal for early visualization/alternative design solutions
• Promotes innovation and improvements through rapid iterations
• Rough sketches make real users and stakeholders feel at ease when suggesting changes

Mid-Fidelity Prototype:

• A happy medium between high fidelity and low fidelity
• These can either possess bare-bones digital interactivity or be finely tuned wireframes

High-Fidelity Prototype:

• Computer-based
• Allow for realistic (e.g., mouse-keyboard) user interactions
• Similar to an exact representation of the user interface
• Ideal for collecting authentic human performance data
• Demonstrates actual products to users and stakeholders.

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:

• Design assessment
• Functionality
• User experience

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:

• Is the purpose of the prototype based on testing or communication?
• Would it be an exploratory or directed study if the prototype is for testing?
• Between attitude, engagement, or behavioral metrics, what’s being tested?
• What’s the definition of success or failure with testing?
• Are there any specific hypotheses or assumptions?
• Does the product have a unique aspect on which feedback should be collected?

What’s next?

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.