Rapid Prototyping is one of the most effective ways to explore design solutions, gain user buy-in, and de-risk a product approach without the need for an extensive development phase. The term originates from the manufacturing world but has diverged in the context of digital product design to mean a process where designers can craft no-code, clickable prototypes to test and demonstrate a design solution.
The nuances of how prototypes are created and used can differ, but they are essentially a series of screens meant to demonstrate and elicit feedback for a proposed design direction. Prototypes benefit all stakeholders in a project, from designers to strategists, project managers to developers, and especially end users.
How are prototypes different from designs?
Prototypes are composed of designs, but the difference is that a prototype is a group or series of static designs linked together using your prototyping tool of choice to demonstrate some level of interactivity. I’ve seen basic prototypes that are as simple as three screens with “hotspots” (clickable areas) to advance to the next page. Conversely, I’ve worked on prototypes with as many as 400 screens all linked together with hotspots that use link templates, menus that animate into place, hover effects, and even animated transitions for mobile use cases.
The nuances of prototypes can differ, but they are essentially a series of screens meant to demonstrate and elicit feedback for a proposed design direction.
Prototypes can be simple or complex but always represent some level of interaction, whereas a static design is simply a mockup of a single screen.
The example below illustrates a flow from a homepage to a registration page, followed by a thank-you page and finally, a logged-in state of the product’s dashboard. These four individual designs are linked and can be shown to and tested with users and stakeholders.
Why prototype?
There are numerous reasons why you should consider rapid prototyping as part of your digital design process. The following are the most common reasons I’ve seen over the last decade:
- You’re working on a new project and want to explore core features or user flows in a clickable environment.
- You’ve designed a new product or feature and want to get user feedback.
- You’re running a usability test and want to use a design prototype rather than investing in a lengthy development cycle.
- You want to demonstrate a flow or interaction to internal stakeholders such as developers, business analysts, or project managers for clarity.
- You want to demonstrate a design solution to a team or client in a way that resembles how it will be used instead of pointing to a series of static designs.
It’s clear that by building a design prototype, you can create a ton of value by linking screens together to satisfy these use cases without writing a single line of code. In addition, once you have your existing designs ready, it really doesn’t take that much additional time to put them into a prototype environment, so the time and effort to make them come to life is minimal.
When to prototype?
Prototyping can technically happen at any point in a design engagement, but I tend to recommend starting early and planning for iteration. Usually, I find that designers will create some initial components, styles, and screens and then start to link these screens together to demonstrate their design approach for internal and external teams.
Considering prototyping as part of the design process occurring in parallel with the actual screen design can be a helpful approach and keeps you aware of the context and interactions between the screens you’re designing.
Editor’s Note: Are there any downsides to rapid prototypes?
A rapid prototype will help your product team get their ideas out the door and into UI/UX design testing – but there are still some potential risks. The most significant risk in rapid prototyping is that the rapid prototype may be built in a way that cannot be replicated in production. While a rapid prototyping service isn’t building a final product or doing in-depth, functional testing, the rapid prototyping process still needs to keep scope in mind. Ensure that the final product can mirror the behavior of the interactive prototype.
How to prototype?
Prototyping comes with a slight learning curve but becomes easier after mastering a few of the core fundamentals of the process. Though the available platforms and tools differ, the principle is that you can link multiple screens or layers together to create interactivity. Let’s look at two of the most popular prototyping tools and how to get started.
Invision
Invision is perhaps the oldest prototyping tool still being used today. It is a web-based application you can publish screens to and link together with “hotspots” to create interactivity. Though you can drag and drop screens from any application into an Invision project, most designers use Sketch to design and a free plugin called Craft, built by Invision, to publish the designs directly from your design file to your prototype.
Once your designs are in your Invision project, it’s time to create hotspots. In the example below, you’ll see an About page wrapped within the header and footer of the Invision interface.
Now, let’s say we wanted to link “Case Studies” in the navigation to that separate corresponding page. Within the default Build mode (highlighted in blue in the footer bar above), we’ll simply draw a rectangle around “Case Studies” and select the desired destination page.
Once saved, you can switch to Preview mode (the play icon in the footer bar), and clicking on that nav item will demonstrate changing the page. The enlarged screenshot of the Link menu below also shows that you can change the settings of the link.
These options allow you to change the trigger and transition of interaction as well as make an anchor link, maintain the scroll position (great for modal windows), and include hotspots in a template. Templates are simply a creation of hotspots that you want to apply to multiple screens to save time. A good example would be navigation links, where the links will be the same on each screen.
The example shown here is relatively simple, but as mentioned before, there is no limit to how many screens and interactions you can build within a prototype, depending on what you’re designing and trying to achieve.
Figma
Figma is fast becoming one of the industry standards for designing and prototyping. One of the reasons why I think the adoption has been so rapid is because Figma has built three core workflow components into one tool: Designing, Prototyping, & Commenting. For years these features have been split between Sketch and Invision, with Sketch providing the design layer and Invision providing the prototyping and commenting capabilities. Figma makes designing and prototyping more cohesive, and contextual comments help designers address updates directly in their designs instead of referencing another platform.
Below is an example of two screens designed in Figma:
Now, the same screens are shown in Prototype mode. This is accessed by pressing “Prototype” in the right sidebar next to “Design.”
In this Prototype mode shown above, we can now click on elements within the designs we want to use as a trigger for an interaction. In our example, I’ve simply linked the image for the destination Frankfurt to the destination detail screen just to the right of the destination menu screen. Figma allows you to create interactions either by dragging connections between screens or by using the menu in the right sidebar and selecting a destination. Similar to Invision, there are advanced settings you can apply to triggers and interactions to refine your prototype.
Other Rapid Prototyping Tools
While Invision and Figma happen to be the tools we use most commonly at projekt202, there are a few other popular solutions in use by designers today. Examples include UX Pin, Adobe XD, Webflow, and Axure RP.
Editor’s Note: What are other prototyping techniques?
If in-depth prototyping isn’t desired, a product team may use static, low-fidelity prototypes rather than rapid, high-fidelity prototypes. Rather than engaging in prototyping, the product team may also develop and push small, incremental changes directly to users, often in selective roll-outs.
A rapid prototyping service may also create a blue sky/best-case prototype rather than a functional rapid prototype – a prototype inclusive of everything the product designers would want in a finished product, regardless of reasonability. In this case, key stakeholders shouldn’t expect the finished product to mimic this early stage of the product development process.
Video Demonstration
Below is a video that walks you through the process of taking a few static screens and linking them together to quickly create a clickable prototype that supports testing a use case.
