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 which 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 favourite 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 which 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 which 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 flavours 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 favourite, 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 utilise 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 utilising 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:
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.
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 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 utilise 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.
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.
Continue learning with UX studio
As UX/UI designers, we commit to finding the best way to make usable products with useable tools. Discover why Adobe XD will conquer the world of UI design tools and prototyping.
How design transforms organisations and inspires innovation? Find out how to unlock business opportunities with design innovation!
Planning a design OR research project soon? Get in touch with UX studio and find out how we can help you conduct usability research and create a powerful UI that will appeal to your target audience.
Users drop from your website and the conversion rate is low? UX audit might help pinpoint usability flows in your product and define key steps to improve its performance. Learn more about UX Expert Review from UX studio –>>