Transforming an idea into a product is not a magic trick that you pull off. It involves prototyping your idea, assimilating different feedbacks of customers, and making those iterations. This is how you realize a product. You can refer to this guidebook, to understand a product’s journey.

There is no one way to represent a Prototype. You can always create a simulation giving an authentic feel of the product, but if you have fine sketching skills, then you can create a prototype on a piece of paper as well.

So what exactly is Rapid Prototyping?

If you build a website or an application in one go and with a fixed mindset, chances are that it will backfire. Rapid Prototyping is an antithesis of this approach, as it takes into consideration the feedback of users, developers, designers, and stakeholders, to visualize the perfect product. It constantly paves way for iterations and improvements.

Moreover, it makes communication seamless among the parties involved. This is how you can conceive a product that is ‘By Everyone’ and ‘For Everyone’.

From functionalities to workflows to interfaces, you can prototype almost anything. You can look into popular examples like Instagram Story, the interface of Apple’s Watch, or the workflow of Medium’s publishing process, to understand how crucial Rapid Prototyping is.

Is there a need for it?

If you value User Experience more than anything else, then you need Prototyping more than anything else. It streamlines your product, takes your attention away from the full-fledged functionalities for a while, and makes it about User Experience. Although, maintaining a balance is the key.

Your Prototype should have a ‘Goldilocks Quality’ to it.

It needs to resemble the actual product, so you can’t be too tacky. At the same time, you shouldn’t aim to create a highly refined version, or you will take the word ‘Rapid’ out of the equation. So you need just the right blend.

Understanding The Process

Essentially, it’s a simple 3-step process, which should be executed on a loop.

• Prototyping: Creating a visual mockup of the application’s Interface.
• Reviewing: Involving users and letting them evaluate the Prototype, to understand the workability of it.
• Refining: Identifying ways to improve UX, on the basis of users’ feedback.

Make sure there is an iteration plan in place.

You can create a simple mockup for starters. The detailing should be done only after subsequent iterations. Just remember, more data you receive through feedbacks, more authentic your Prototype will appear. This, in turn, will increase the fidelity of the profile.

What to include, and What to leave in a prototype?

The idea is to streamline your product as much as you can. That is the bottom line. Remember ‘Goldilocks Quality’?

It’s always better to take one User Flow at a time, and then Prototype it. The designers should see themselves as storytellers. For that, they need to focus on a particular User Flow, like Sign up/Sign in/Reset Password. You can refer to this guidebook to understand more about User Journey mapping. 

These three processes flow together, so they must be prototyped accordingly, like a story, and shouldn’t be seen as individual screens.  

What’s fidelity, in the context of a Prototype?

The difference between ‘What you propose’ and ‘What you produce’ decides the degree of fidelity. More the difference less will be the fidelity.  So how closely the prototype resembles the end product or how accurate it is, decides its fidelity.

That said, it’s important not to go overboard in establishing fidelity, or you may end up compromising on the goals of the prototype. As designers, you need to be smart in achieving the fidelity.

Users generally want to see how smoothly a prototype is functioning. So, it’s better not to invest too much into visual fidelity at the initial stage of prototyping, by focusing too much on the layout and design, or it might distract users and take their attention away from basic functionalities.

Similarly, while putting content in the prototype, using ‘Lorem Ipsum’ (Standard Text) is recommended, as users can then their feedback based on the functionality, rather than on the quality of text which can be improved in the later stages.

Also, it’s better to design an interactive prototype rather than a static one, as an interactive prototype can be easily tested for usability, and it can be used for the purpose of User Training. Although both static and interactive models have their pros, in the long run, the interactive model seems to be beneficial.  

There are levels to fidelity. Let’s see

1. Low-Fidelity

When the fidelity stakes are low, static prototypes created using pencil and paper can be used, having a poor visual appearance for obvious reasons. As users are focused more on the functionalities rather than the look and feel of the product, it works well.  

2. Medium-Fidelity

When the fidelity stakes are medium, prototypes are created in the form of wireframes and workflows, using computer-based tools. Users are interested in evaluating their experience of using the product, and knowing whether their requirements are being met or not.   

3. High-Fidelity

When the fidelity stakes are high, prototypes as realistic as the actual product are made using cutting-edge tools like InVision, Figma, Adobe XD, Framer, to name a few. Although such prototypes take a lot of time to be made, these tools make it possible even for a non-technical chap to create one. Such prototypes are extremely useful in executing later usability testing and providing training to users.

How to decide on the fidelity level?

It all depends on the complexity of the product. If the product has an intricate layout, then fidelity stakes are high, and you can’t rely on rough sketches for an ideal evaluation.

At times, the nature of the prototype used depends on the client’s requirements or focus area. For example, at times a slight modification in the UI may bring about a visual impact. So to evaluate that impact, you will need as interactive design instead of a rough sketch.

Also, the product may be heavily dependent on the content. So naturally, using real content is preferable to using ‘lorem ipsum’ in the placeholder, to decide on the fidelity.  

Selecting the right Prototyping tool

Based on your needs and approach, there are quite a handful of tools available for prototyping. So before you zero in on the tool, you must consider the following questions:  

• How complex is the tool and how much time will you take to master it?
• What range of prototypes does it support?
• Are prototypes easily shareable with others, for the purpose of getting feedback?
• Can you easily modify the prototype, based on the iterations?
• Is there a scope for using pre-defined templates with this tool?

Prototyping is just one aspect, and there is an entire Development Lifecycle that you need to. We will discuss that in later writeups.