Why you should love Rapid prototyping

Years ago, standard process for developing a product from the design perspective was to create: first, several low fidelity wire-frames; second, one high fidelity wire-frame; third, mockups and design specs after the mock-up sign-offs.

This worked well since the stakeholders could understand how the site would function without having to waste money building it first.

Now fast forward to today. Desktop Software is dying, websites are responsive, and mobile apps rule the day.

In 2017 Interaction design is the goal, and rapid prototyping is the way.

At TitanFile, back in 2011, we switched from traditional design process to rapid prototyping, and, consequently we gained about a 20% increase in productivity and deployment speed. We kept rapid prototyping with Zora and advocated it to the most of the Volta companies.

In the lines bellow I will try to outline the biggest benefits with rapid prototyping as a software development approach.

Isn’t making a prototype a waste of time and money?

Making a functional prototype used to take a lot of time. Not any more. Thanks to asset libraries, UI patterns and standardized interface elements you can put together a hi-fi mock-up with Photoshop or Sketch quickly and then make it interactive with tools such as inVision or libraries such as React.

How does it work for designers?

Wire-frames discourage designers from working with developers. The advantage of rapid prototyping is that designers often sit next to developers and literally work with them to change the design ad-hoc and see how their design behaves once it’s turned into code.

Once designers start to collaborate with developers, they will understand what’s possible with the front/back end that they’re using and they will be able to fully flesh out a thorough user experience. Designers definitely do not need to know how to code but they should know the lingo as this is called “Human-Computer Interaction” after all.

How does it work for developers?

Creating, documenting and annotating designs take a lot of work. Once that work is done it is very easy for designers to throw the SPEC over the fence to the developers, hang a big “mission accomplished” banner and move on to the next task.

With rapid prototyping, design specs are created ad-hoc as the prototype evolves. This ensures that design SPEC is a living document that always reflects up-to-date information and reduces the number of design kickbacks that developers have to fix later. If you are truly adventurous, you can use tools such as Axure which will automatically generate design specification for you.

By having designers work directly with developers we avoid scenarios such as when, if we have 10 hours to do something, we discover that something what “looks nice” will take 5 hours to do because there is a disconnect between design and developers.

Developers in sync with design; they work alongside in harmony, not one after another.

How does it work for business?

It is a lot easier to get actionable feedback from stakeholders once a device is in their hands and they can see exactly how the feature will look and work “in action” as opposed to on a computer screen.

Simply put: rapid prototyping communicates form and function better. Since wire-frames are static by nature, it is impossible to do any meaningful usability testing. Prototyping puts only the device screen glass between you and your users/stakeholders.

How does it work for product?

In the case of product management, users have trouble weighing the desirability of some theorized product with the feasibility of actually using the product. This is a result of a Psychological distance phenomena and it’s caused by human brain’s inability to predict how it will react in circumstances removed from the circumstances it is currently in.

In one of the Georgetown University experiments, users were presented with the wireframe concepts of two different alarm clocks: one simple clock with the alarm being its only feature, the other — more complex with features like reading the weather and traffic patterns to the user, among a dozen other features. Most people picked the product with the most features. However, when those products were actually produced and sold, almost all of the people in the study picked the simpler product. From a distance users prefer desirability, but up close prefer feasibility.

Rapid prototyping provides a shortcut to establishing what is feasible and how strong is the “Fingerspitzengefühl”.

The German word “Fingerspitzengefühl” is almost impossible to translate 100% to English. The closest translation to English would be “that fingertip feeling”; it’s a quality you cannot precisely express, but which you know is there.

Rapid prototyping allows you to feel how a user would feel before you go too deep down the development rabbit hole.

How much should you prototype?

Simply put — You should prototype 20% of the feature where users will find 80% of the value.

If your job is to prototype a new search screen, focusing on nailing the interaction with and clarity of the search fields is a lot more valuable than tweaking the layout of the results.

You do not prototype everything at once.

Wire-frame approach de-risks the process by honing in on the winning design in passes (low-fi, hi-fi, mockups). Rapid prototyping reduces the risk by breaking down the process into steps: most valuable (and most risky) elements are prototyped first and supporting elements (such as CTA’s and entry/exit points) last.

In closing, I would like to leave one big caveat — make sure to communicate that prototypes are not finished features but merely one of many directions a feature can take. Sometimes this is achieved by just presenting multiple “lower effort” prototypes alongside the main candidate.

Stakeholders that understand this will not sidetrack the discussion by talking about colors or font sizes used, but appreciate the benefits rapid prototyping brings to reaching clarity faster.