Why Your Product Needs a Prototype, and How to Do It Right

While developers fully understand the necessity and importance of prototyping, sometimes clients have trouble understanding its full potential. Well, here we go!

What is a prototype?

And what do a BMW car and your fitness app, for example, have in common?

They both started with a prototype.

A prototype is a rough implementation of a future product. It is a skeleton, a basic structure of the future product that shows its main functions.

All product companies create prototypes (well, at least most of them do). Giants of the automobile industry like BMW never start new production without this ‘draft’ stage. The first prototype of a car could be made from anything, like wood, clay, or Play-Doh. It usually looks kind of strange and sometimes very different from the finished car. But as designers get rid of the functional and design mistakes made in this initial stage, the prototype gradually turns into the version that will be launched down the assembly line.

In the tech sphere, a prototype is typically called wireframe — it looks like black-and-white screenshots with no design elements, showing only the product’s main functional blocks. Like the prototype for a car, it becomes better and better with each step, until it comes together as a clickable version with the basic functions of the future app.

Why is it essential?

The main aim of the prototyping stage is to make mistakes. Literally, the more mistakes, the better — because if you make mistakes at this point, you won’t make them later.

Fixing some mistakes in later development stages might mean rebuilding the app’s entire architecture (and paying developers three times as much), while at the prototyping stage the same problems can be easily solved with just a few quick clicks by the designer in Sketch or Invision.

What the prototype MUST NOT be

It must NOT be beautiful. And we really mean it! No colors, no pictures, no animations, no fancy design elements. Just a set of black-and-white squares put in the correct order.

There are two reasons for that.

The first one — design, even a simple one, takes time. At this initial stage, time can be invested much more wisely — for example, by doing research about the industry or testing the first screens on potential users. In the end, it’s information like this that is crucial for the success of the final product (and not the color of some squares).

The second reason (and the most important one) — all the embellishments just distract you from the future product itself. While you are being captivated by the incredible screen animations, you probably won’t notice that the app is just plain hard to use. And if it’s hard to use, people won’t like it, even if a nice animation of a cat is hidden in there somewhere.

But then what IS a good prototype?

It’s easy. The prototype must:

• …be functional.
• …have the correct user flow.
• …show how the product will work.

And don’t forget that the wireframe must speak for itself to new users. If they need detailed explanations of how to use it, then it is a bad prototype. The perfect prototype — a clear and simple structure whose use is obvious from the first sight.

How to build a prototype?

1. Talk

Talk with your team a lot. And then talk again. And then some more — because that’s the only way to see and feel what the product will be in the end.

Different members of the team should join the conversation at different stages, which allows to accurately determine the product’s features—so calls with project managers, CTO, developers, and designers help to stay on the same page and see clearly what needs to be done.

2. Draw

The first step here is creating from one to three main screens with the most important elements of the future app. After the first review, the prototype is redone according to your feedback. The process repeats, the number of main screens can grow up to five or even ten units, and after even more edits you and your team will most likely come to a version that completely suits everyone.

3. Test

After the first five to ten main screens are done, it’s the best time to show them to test users. Test groups are an extremely important source of information because the feedback they give can play a decisive role at this point. It’s always a good idea to test the prototype with the future target audience — to put it simply if it’s an app for future moms or teenagers, it’s better to test it with future moms or teenagers.

But if that’s hard or impossible to do — no problem. Show it to friends, neighbors, relatives. It’s still much better than nothing and the value of that feedback is hard to overestimate.

3. Draw (again)

After completing “the skeleton of the skeleton,” the team draws the rest of the screens. In general, the prototype contains from 30 to 50 screens, which are done quickly enough, because the core is already created.

4. Build

After all the necessary screens are ready, your team assembles the prototype into a clickable version. It shows most clearly and accurately how the application will work. This means that test groups can give the most complete feedback for further work on the product.

The most important point here — building a prototype is a joint effort of the client and the team (project manager, developers, CTO, business analytics, etc.). Each contributes a share of their ideas and expertise to the project in order to see the result from the largest possible number of perspectives.

And some more advantages of prototyping

Doing a wireframe is the cheapest and most effective way to test the development company with literally no risk at all. It’s the first stage of working on a product, so no strings are attached. Just find a company that doesn’t charge much for the wireframe, settle the legal issues — this way the whole prototyping process will be risk-free and beneficial for you and the company you’re working with, as they will have a chance to prove themselves.

Since a well-done wireframe is also a good specification for the future product itself, in the end you will also have all the data to create the design, make all the necessary estimates, and build the app’s architecture.

Final words

To top it all off, a prototype is not a couple of black-and-white screens — it’s a result of good communication between you, your team, the test users and the foundation of the future product.

Originally published at https://yellow.systems.