Why all prototyping is rapid prototyping

Updated Tuesday, October 30, 2018: We’ve updated this post with a few more tips and tricks. Let us know what you think!
The concept behind prototyping is simple: create a barebones, as-complex-as-it-needs-to-be-but-no-more working model of an app or webpage and keep improving on it until you get the outcome you expect.

But where do wireframes fit into the creation and iteration process? Should you be using low fidelity or high fidelity prototypes? And how do you know when it’s time to move from a prototype to a full build?

From designer to developer, this post will help you make sense of when, why, and how to use prototypes to save time and reduce friction in the digital product creation process.

What is prototyping?

A successful prototype isn’t all about design. It’s about the processes and interactions that are modeled within it. Based on user research and stakeholder input, your initial mockup should cover the bare minimum while still following UX best practices. Establish a clear purpose for your prototype and follow your pre-determined set of requirements. More importantly, don’t consider each prototype as precious. Whether it’s a wireframe or a digital mockup, prototypes are meant to be tested, evaluated, and replaced by something better.

Ekta Srivistava, a User Interface Specialist and UX Architect, calls this process the PR²I Process: Prototype → Review → Refine & Iterate. Make an idea, get feedback on your idea, improve your idea, repeat. This process is at the core of rapid prototyping.

Another approach to rapid prototyping is called the Aardvark Method, named after the startup that was eventually purchased by Google for $50 million. When the startup began, they didn’t have a solid foundation or direction in which they were headed. Instead, they started prototyping their ideas:

For the first 6 months Aardvark prototyped ideas, gave them to 100-200 people, and if they saw they weren’t taking off, abandoned them. Once they figured out that social Q&A was the ticket, they didn’t pull back on user testing, bringing in 6-12 users a week over the 30-month span of the startup.

The most important thing to do when rapid prototyping: get your mockup in front of users and stakeholders to get feedback.

Lo-fi vs hi-fi mockups

People often confuse the terms “wireframe” and “prototype.” The main difference between the two boils down to fidelity. Fidelity refers to how closely a mockup resembles the final product.

Wireframes are often low to medium fidelity, ranging from boxes and lines sketched on paper to onscreen creations that have a more polished look. Interactivity is at a minimum, so users can test behavior without as much concern for a product’s look and feel. Pen and paper are an easy way to get started.

Another great tool is InVision Freehand. It allows multiple collaborators to work in a shared space on a medium-fidelity mockup. It’s the simplicity of wireframing with the benefits of technology.

On the other hand, prototypes are often high fidelity and allow the user to test a digital product’s interface and interactions. These can be useful during the usability testing of an application. Because they often resemble a more finished product, the time and effort invested in creation during this step can translate to savings during the development phase. If you’re designing in the browser, the CSS and HTML can be reused in a finished product. If you’re using a tool like InVision, the Inspect feature can save you time and minimize frustration.

With tools like Sketch and the soon-to-launch InVision Studio making it easy to design a prototype in almost no time, are wireframes still relevant in the digital product design process?

Of course. As disposable as prototypes are, wireframes are even less precious. Found out what you need to know? Toss it. Don’t like the ratio of images to text? Into the bin. The amount of time and energy it takes to sketch or Freehand a wireframe is minuscule compared to the value you get from each one.

It’s all rapid

Here’s the secret to rapid prototyping: it’s all rapid prototyping.

Prototypes exist to test ideas, and history says that most of our ideas, especially early in the creation process, are going to be wrong. And in the world of digital product design, it takes minimal effort to build out an idea, test it, learn from it, toss it, and move on.

This isn’t the world of manufacturing, where the term rapid prototyping originates. Unlike the world of big machines with dozens of tiny moving parts, it shouldn’t take digital product designers months or years to conduct research, gather all the necessary materials, design a thing, and then test it. Our process is pixels and code. It should be much faster, much more rapid.

That’s where tools like InVision Studio come in. With InVision, you can collaborate, brainstorm, revise, and iterate all the way through to production. And because Studio is an InVision product, that means you get sharing, permissions, commenting, and all the other services that you’ve grown to expect when it comes to collaboration. It’s fast, it’s unified, and it allows you to share (and update what you’ve shared) quickly.

Bringing more parts of the core designer workflow into the place of creation was at the core of our process when designing Studio. Rapid prototyping is one of those parts, and that’s why we’re excited to bring prototyping into Studio. We think it’s going to make design faster and more connected.

Interested in early access to InVision Studio? Download it below and get ready to take your rapid prototyping to the next level.