Why to Build Prototypes and How You Can Choose the Right Prototyping Tool

Why do we make prototypes? To test something we are working on. If we start prototyping right at the beginning of the design process, we can instantly gather feedback and reap the rewards. Want to know how to do it right and what kind of tools you can use instantly? In this article, I will guide you behind the idea of prototyping and show you some tips and tricks along the way to use it effectively.

A lot of digital design processes fail if you start showing and testing out ideas as soon as you can. Since we are working with digital products, iterations can go insanely fast and you can modify prototypes even multiple times a week if needed.

So why not build prototypes? What’s holding you back? Lack of time? You could start with really basic prototyping tools that let you add interaction with hotspots or start with paper prototypes. Lack of money? Look for free prototyping tools. Issues with complexity? Tools range broadly from very simple to some which provide the actual complexity of an app. By the time you finish this article, you’ll have the general concept of prototyping, knowledge about different types of prototypes, and recommendations for prototyping tools as well.

Why do we make prototypes?

We can choose from quite a few options to build prototypes, but before diving into prototyping tools, let’s check why you actually need prototypes! Originally, it described a primitive form of something and this description actually fits our purposes quite well. When we come up with an idea, we try to build a crude version of it as fast as we can.

We can show this initial version to stakeholders, users, and everyone else who takes part in the design process. So at its core, prototyping gives us an advantage since it seemingly slows the process down but in reality, it accelerates the design process with the early feedback. We can weed out bad ideas and solutions without dwelling on them too much.

Back to our original question: Why do we actually build prototypes? Let’s start with the scientific method and testing out things. When I started to work in digital design, Paul MacCready told one of my favorite stories, how he built the Gossamer Condor, the first human-powered aircraft.

For him, the other teams framed the challenge wrong since they could only try out their ideas once a year. He viewed the challenge as not to design the aircraft itself but to come up with a faster design process. So he created a modular solution that let him re-assemble the parts in just a few hours. With this, iterations went much faster and after just six months, he had designed a version that won.

We can apply the same idea for our design process – and prototypes delivery! First, understand the idea behind the iterations and the prototype. Then we can find the best tool, fidelity, or whatever to fit our needs best.

How to choose a prototyping tool you need

Now that we’ve defined what we need prototypes for, let’s look at the flavors they come in.  We usually define them as high- or low-fidelity. The more the prototype resembles the final product, the higher the fidelity.

A vast number of prototyping tools abound for designers. Just to name a few: Mockplus, Balsamiq, Flinto, Framer X, Axure, Origami, InVision, Proto.io, UXPin, Marvel, Justinmind and the list goes on. But keep in mind that in a lot of cases you don’t even need an additional program to build prototypes. You can also use Sketch, Figma, Adobe XD, Keynote, PowerPoint, or even a piece of paper.

I haven’t personally tried them all but we’ve tried quite a few at UX studio. Everyone has their favorite, but consider three things before you pick:

• Prices can vary greatly, so think about whether using the particular tool would pay off. Can you actually utilize its full potential?
• How fast can you get the desired outcome? The faster you can produce a prototype, the better. But it usually comes with a trade-off in the fidelity.
• How close will it come to a finished product? Different tools vary greatly in their fidelity. Based on the state of your design process, you can choose the right tool for you.

Assessing these three things will bring you closer to the tool you need in that particular situation. Let’s see three examples of different prototypes, showing the value they can bring to your process.

3 examples of utilizing prototypes

As mentioned, prototyping comes at different levels. You can even start testing with paper prototypes. This lowest fidelity prototyping can still bring surprising results. At the other end of the spectrum, we find prototypes built with code. Although some unicorns can do this quite fast, it pays to start testing with simpler things. Here I list three examples and situations where you can use different kinds of prototypes effectively:

Paper prototypes

We had a project where we wanted to quickly simulate how users would build automatic workflows by dragging and dropping different elements in an editor. We wanted to play around with our initial concept of having building blocks and gather feedback on this core concept. Quick paper prototypes sufficed to get the feedback and direction we needed at that point to continue with the design process.

What makes paper prototypes good? This method’s cost-efficiency and speed let us include it right from the beginning. You can start gathering feedback right off the bat and actually move forward at a much faster pace. Also, we can do it without learning another tool. That means we can turn it into a habit without trying out some new tool every day. By gathering feedback early on, we identified some problems with the concept and instantly solved them when moving to the wireframing phase.

Axure prototypes

To test out the structure of a newly built sports app, we used black and white Axure prototypes to make sure that we didn’t have usability issues in the app before moving into a detailed design. Basically, we made the wireframes interactive, the most common way of user testing at UX studio.

We make multiple iterations with these kinds of prototypes before moving into detailed design. This way, we can root out most of the usability problems and still work on the concept a bit to make it better for the users. In the right hands, Axure makes for a powerful prototyping tool although it has a steep learning curve.

Framer X prototypes

If you’d like to test really high fidelity prototypes, Framer X can provide you an excellent choice. Prototypes made with it really feel like a functional application.

This tool also has a steep learning curve and you also utilize your coding skills as well. It really shines if you can code a bit but you don’t have to be a developer to play around in it. And even without coding, starting to use it with the components downloaded from the store comes quite easily.

Takeaways

You can use prototypes in generative and evaluative studies as well, in nearly every stage of the design. For best results, start using them as early as you can in your process to accelerate the process by gathering feedback you need right from the beginning.

What strategy do you have for prototyping? How do you plan your process? Let us know in the comments, we’d love to hear your feedback.

Take the next step to improve your website’s UX

UX studio has successfully handled 250+ collaborations with clients worldwide.

Is there anything we can do for you at this moment? Get in touch with us and let’s discuss your current challenges.

Our experts would be happy to assist with the UX strategy, product and user research, UX/UI design.