SPRINGBOX / Insights

Why Designers Should Prototype

by Paulo Muzel, June 23, 2017

What is a prototype?

A prototype is a simulation of how a completed product will eventually look, feel and interact. It allows a designer to show how an entire application or single interaction will function through a usable mockup, without having to write any code.

Regardless of how robust the prototype is, having one present throughout the development cycle of a product to test, validate and conceptualize is indispensable. The ability to experience something and communicate through action rather than words is worth the investment. Here are the main reasons you should prototype.


1. Communication

     a. Show, don’t tell – Visualizing motion and interactivity based on static imagery is difficult. Showing these things to designers and especially non-designers is essential to explaining and selling your ideas. People can easily misinterpret stand-alone images, even if they’re delivered in a convincing fashion. A prototype is interactive and tangible. It’s an experience — it doesn’t require an explanation.

     b. Meetings can be shortened extensively or even bypassed altogether by showing easily digestible prototypes that everyone can interact with, eliminating unnecessary questions and explanations, which often arise during lengthy and monotonous presentations.

     c. Although showing clients pixel-perfect mockups may seem like a good way to come across as professional and assure them that they have made a good investment by hiring you, clients and stakeholders often explain what they need in a way that can be easily misinterpreted. By presenting varying solutions to the same problem (albeit not in as high a fidelity), both parties can align on the right version and move forward. Building a solid foundation can help foster trust and accelerate the overall trajectory of a project.

Trending Like 2.gif

Trending "like" animation  vs “As a user, I can view the trending page, view a picture, 'like' it and save it to my favorites in a seperate location.”  

2. Save time + Money

     a. Fail early and cheaply by allowing designers to quickly test out multiple ideas before developers begin to code unnecessary features.

     b. Developers are usually on a tight and busy schedule. Prototypes can be used to explore designs and solve problems during the initial stages, rather than running into roadblocks and having to do reworks during development, often a time-consuming and expensive mistake. This will also prevent you from inaccurately billing a client or having to redo resourcing work.

     c. Showing a client how an idea will function when fully developed allows them to confirm that the product is heading in its intended direction or voice concerns if it isn’t. This will greatly reduce the risk of building the wrong product — there should be no surprises.

Range Calculator.gif

3. Accurately Gathering Requirements

     a. Prevent client dissatisfaction by presenting prototypes early; ideas often materialize  differently than how they originally envisioned them. The added clarity of communication, tightening of scope and shared understanding created by a prototype is a better way of defining requirements.

     b. Set expectations — having a working prototype will give stakeholders a more accurate estimate of how much work needs to be done to create a final version. This will result in more accurate billing and resourcing.

     c. Having a working prototype can help demonstrate and gauge the feasibility of features, which helps to solidify priority requirements. If you work with developers and engineers, they can tell you if they spot any issues from their standpoint; they might even be able to offer alternative solutions.

4. Validate and Facilitate Designs + Collaborate

     a. It doesn’t have to be high fidelity to work. Anything with interactivity is better than an explanation of how a design should work through lengthy, written documentation.

     b. Motivate team members to think about problems and solutions from another perspective. Design-based talks alienate developers and other parties. Imaginative collaboration takes place when all parties can interact with a prototype and explore limitations and potential possibilities.

     c. People’s brains work in different ways, and some may have difficulty interpreting static screens effectively, but if everyone can touch/interact with a working product, they are more likely to contribute something of value. When people share a common vision, the collaboration flows naturally.

     d. UX priorities become apparent when you can experience them right in front of you. On the surface, most designs are simple, but with the added element of interactivity, you are confronted with decisions and obstacles that would not otherwise show themselves. 

     e. Implementing interactivity early on can set the standard for the rest of the product. Working on a tangible product encourages creativity and thoroughly thought-out solutions.

5. Testing Your Designs

     a. By performing usability tests and watching people click through a prototype, you can quickly identify any difficulties the user might be having with a design — like user flow, content, IA and other pertinent factors.

     b. User-centered design should be implemented throughout the entire project, not just at the end, when the product has practically been built. By testing working prototypes early and frequently you will be able to identify and correct pain points, whether it is via immediate team members or through recruited target users.

     c. You can quickly compare multiple prototypes to perform the same function through A/B testing to see which is the best fit.

AB Testing 2.gif


Closing Words

Designs are becoming more and more complex every day. They are not just static, visual images – they rely heavily on interactions. Whether it be for a single feature or the entirety of an application, prototypes not only help provide proof of concept, but they more importantly expose flaws and allow you to explore ideas before fully investing in them. The interactive nature of a prototype is what sets it apart from other types of designs. It is as close as you can get to the functionality and feel of a final product or, in other words, having an actual user experience — an invaluable perspective to have while in the design process.

Topics: Design Thinking, prototype, designers