Prototyping – Types of Prototyping

Prototyping is an experimental process where design teams implement ideas into tangible forms from paper to digital. Teams build prototypes of varying degrees of fidelity to capture design concepts and test on users. With prototypes, you can refine and validate your designs so your brand can release the right products.

Prototypes are a crucial part of the design process and a practice used in all design disciplines. From architects, engineers, industrial designers and even service designers, they make their prototypes to test their designs before investing in their mass production.

The purpose of a prototype is to have a tangible model of the solutions to the problems already defined and discussed by the designers during the concept/idea stage. Instead of going through the entire design cycle based on a supposed solution, prototypes allow designers to validate their concepts by putting an early version of the solution in front of real users and collecting feedback as quickly as possible.

Types of Prototyping

Prototypes often fail when tested, and this shows designers where the defects are and sends the team “back to the drawing process” to refine or repeat the proposed solutions based on real user feedback. Because they fail early, prototypes can save lives, avoiding the waste of energy, time and money in implementing weak or inappropriate solutions.

Internal Prototype

An internal prototype doesn’t necessarily convey immediate value to anyone outside of me or my team. It can be as rough and fast as I want to make it. In the website world, I might build a simple component using vanilla CSS, HTML and JavaScript, React, Angular or Vie. Just to get a sense of how it works and to weigh the pros and cons. These types of prototypes tend to show up very early in my process — the first day a project starts, in fact. With these prototypes, I don’t need to be afraid that someone won’t “get it” or that it will cause more harm than good. I may choose to show Internal Prototypes to a client or stakeholder to reinforce the value of the prototyping process at my discretion, but that isn’t the point yet — right now I want to show ideas fast, fast, fast.

It could be as simple as some rough sketches drawn on paper. Maybe it’s purely designed, like an animated walkthrough of how an interface works in After Effects. Maybe it’s a rough demo tossed onto Codepen. Or it could be something much higher in fidelity. When someone sees a prototype, there should not be any ambiguity in their response. In other words, if the person were to ask, “What if the app was blue?”, then that’s not a prototype. If you show what the app would look like if it was blue, then it is.

There are also different kinds of prototypes, each with a different purpose: internal, external and public.

Internal Prototype

An internal prototype doesn’t necessarily convey immediate value to anyone outside of me or my team. It can be as rough and fast as I want to make it. In the website world, I might build a simple component using vanilla CSS. HTML and JavaScript, React, Angular or Vue, just to get a sense of how it works and to weigh the pros and cons. These types of prototypes tend to show up very early in my process — the first day a project starts, in fact. With these prototypes, I don’t need to be afraid that someone won’t “get it” or that it will cause more harm than good. I may choose to show Internal Prototypes to a client or stakeholder to reinforce the value of the prototyping process at my discretion, but that isn’t the point yet — right now I want to show ideas fast, fast, fast.

This prototype shows when a circle is dragged close to another circle on iOS. This was an early prototype for Melody Jams shared with the internal team to show the progress of development.

External Prototype

An external prototype makes a case for the direction you’re trying to go in, to show progress or to demonstrate how something works. When a client needs an admin tool. I might spin up a quick blog in Craft, WordPress and Contentful (yes, all three!) to give them a sense of how each tool works. So that they can make a more informed decision about what’s best for them. These prototypes are great in the middle and later stages of a project. I can recall one project in which a client was considering a change to include a new service provider’s API. Whipping together a prototype demonstrated to the client what the provider could do, how quickly we could integrate it and what the impact would be on the rest of the project.

It could be as simple as some rough sketches drawn on paper. Maybe it’s purely designed, like an animated walkthrough of how an interface works in After Effects. Maybe it’s a rough demo tossed onto Code pen. Or it could be something much higher in fidelity. When someone sees a prototype, there should not be any ambiguity in their response. In other words, if the person were to ask, “What if the app was blue?”, then that’s not a prototype. If you show what the app would look like if it was blue, then it is.

There are also different kinds of prototypes, each with a different purpose: internal, external and public.

Internal Prototype

An internal prototype doesn’t necessarily convey immediate value to anyone outside of me or my team. It can be as rough and fast as I want to make it. In the website world, I might build a simple component using vanilla CSS, HTML and JavaScript, React, Angular or Vue, just to get a sense of how it works and to weigh the pros and cons. These types of prototypes tend to show up very early in my process — the first day a project starts, in fact. With these prototypes, I don’t need to be afraid that someone won’t “get it” or that it will cause more harm than good. I may choose to show Internal Prototypes to a client or stakeholder to reinforce the value of the prototyping process at my discretion, but that isn’t the point yet — right now I want to show ideas fast, fast, fast.

This prototype shows when a circle is dragged close to another circle on iOS. This was an early prototype for Melody Jams shared with the internal team to show the progress of development.

External Prototype

An external prototype makes a case for the direction you’re trying to go in, to show progress or to demonstrate how something works. When a client needs an admin tool, I might spin up a quick blog in Craft, WordPress and Contentful (yes, all three!) to give them a sense of how each tool works, so that they can make a more informed decision about what’s best for them. These prototypes are great in the middle and later stages of a project. I can recall one project in which a client was considering a change to include a new service provider’s API. Whipping together a prototype demonstrated to the client what the provider could do, how quickly we could integrate it and what the impact would be on the rest of the project.

This quick iPhone app showcasing how Concertful loads content is a great example of an external prototype. A prototype like this could be used simultaneously to evaluate a CMS and to prove whether it’d be viable to use to power an iPhone app.

Public Prototype

A public prototype is out there in the wider world. This is basically about sending the actual design process out into the wild, learning what users do and iterating from there. It could be a full-fledged pilot product or something accessible to a small subset of users. It is the most polished type of prototype and gets closest to that traditional definition I referred to earlier. It tends to fit into a larger project as part of a testing phase of some nature.