“If a picture is worth 1,000 words, a prototype is worth 1,000 meetings.” – Tom and David Kelley, IDEO.

Before you release any product on the market, you want it to be pixel-perfect and ensure that it solves the user’s problem exactly as intended. This is where a prototype – or a scaled-down version of your product is required to test the idea and design.
Prototyping is an indispensable part of the design thinking process and brings several benefits to the table.

What are the benefits of prototyping?

• Gain insights of how your users are will interact with the product
• Pinpoint the design flaws or usability issues before it is too late
• Test different versions to understand which ones work the best
• Keep reworking and refining the prototypes till the product is ready for release

Often, prototypes are divided into low-fidelity and high-fidelity. Fidelity refers to how close to the final product is the product prototype. It can be a basic model, or closer to the final product. It all depends on what the prototype is used for, or the design stage of the product.

Low-Fidelity Prototyping

This includes the rudimentary models of the product being tested and great for testing broad concepts. It can include only a handful of the features from the final design and can be created using different materials, including paper, wood, or plastic which may not be part of the final product. These are created at low costs and minimal efforts. Storyboarding, card sorting, and sketching are a part of low-fidelity prototyping.

Low-fidelity prototypes are quick to implement and inexpensive. They make it easier to make instant changes and test new iterations. These early-stage prototypes can be easily disposed later, and provide bird’s eye view of the product. This prototype can be created by anyone from a team, and not just designers.

Medium-Fidelity Prototypes

The medium fidelity prototypes are more detailed than the low-fidelity prototype, contains more details and is closer to the final product. These take longer to develop, and can often prove to be costlier. Therefore, it is important to test and get rid of as many early-stage problems and assumptions in the low-fidelity model as possible, before moving on to a medium-fidelity prototype. It is a great option for refining the product, with room for more changes and testing options.

InVision, Adobe XD, Balsamiq, Figma, Sketch, are some of the software that can be used to create medium-fidelity prototypes.

High-Fidelity Prototyping

High-fidelity prototypes are closer to the finished product. Think of 3D-printed models or die-cast models of vehicles are some of the examples of this prototyping variety. This prototype makes it easier to visualize the final product and offers high level of validation at the user testing stage.

What are some of the quickest prototyping methods?

The best way to build prototypes is get started and keep on improving the idea with the user in mind. Every iteration needs to be better than the previous ones and based on user behaviors and needs. That said, here are some of the quickest prototyping methods to implement:

1. Paper Prototype

Paper Prototyping Method used by Creative UX/UI Designers

A pen and a paper – that’s all you need for creating a paper prototype. The main benefit of this method is that it lets you create several versions of the design, and get it validated speedily with the users.

This method is useful for exploring some key ideas and user flows, and to understand which one of them will work best for the users. Since there are no special tools or software involved, you can create the prototype within minutes and at a much lower cost.
Use this method to receive quick feedback from your users in real-time.

2. Storyboards

Storyboards Prototyping Method used by Creative UX/UI Designers

The technique of storyboarding is derived from the film industry, which lets you visualize the users’ journey or how users can experience any problem or a product.

Interestingly, it refers to the classic animation technique developed at the Walt Disney Studios in the 1930s. Animators used to draw several sequential scenes for the cartoons and pin them to the walls.

Currently, the iterative method is used by designers, wherein they create series of images or sketches to show and tell the solution for any given user case. You can use it to understand context of the final product and take several high-level ideation and discussions.

Storyboards are not meant for fine-tuning the details of the product. Instead, these are used to validate the concepts before going ahead with detailed specifications.

3. Clickable Wireframes

Clickable Wireframes Prototyping Method used by Creative UX/UI Designers

Clickable wireframes are the best prototyping methods when it comes to mobile or web app design projects. It is an interactive prototype that links several static wireframes and each of the wireframe includes not more than one key element.

When you require to design a few different versions of the design within a particular design direction, it can be created without a lot of effort.

Clickable wireframes are low-fidelity representation of the product layout and are incredibly easy to modify as you do not require to redraw the entire page or screen to include changes. You can create these by using a Keynote or PPTs as well.

The only drawback is that you need understand how the finished product will end up looking and feeling.

4. Role Play

Role Play Prototyping Method used by Creative UX/UI Designers

What can be better to understand your user’s pulse than to step into their shoes. Role play refers to the experimental method, which helps you explore tangible ideas by recreating the scenario of user engagement with the design.

Use it to capture the users’ emotional experience of using a product or service and also get an empathetic understanding of your users.

This is because its a re-enactment of various situations to give the team a better understanding and focus on improvement. To implement this prototyping method, you need to pre-decide the ideas, the roles, the scenes, and the storylines beforehand along with your team members.

Sometimes, this method can also be combined with other prototyping methods such as – storyboarding to derive lessons from the scenes.

The Wrap

Selecting a specific prototyping method involves choosing the right tool and technique and putting it into action. With every method offering different pros and cons, you need to do some more research to make an informed decision. The key takeaway is to explore the best method, cut down time and costs, and at the end, deliver the perfect product that delights users.

. . .

Are you looking for an experience-driven digital solution for your product or service?
Author Akshay Dafade
Akshay is the Lead UX Designer at Pepper Square and he has defined the user experience for some of the finest global brands over the last four years.

Tigers, Gamblers, Entrepreneurs

Startup UX Design Guide for 2022