Why Create a Prototype, and How to Do It Right

Prototyping is the most crucial step in the whole software development process, and the most underappreciated one at the same time. Do you need it? Definitely! But why? Find the answers in the article!

Why Create a Prototype, and How to Do It Right

While developers fully understand the necessity and importance of prototyping, sometimes it can be hard for clients to see its full potential. Well, here we go!

What is a prototype?

And what is common between a BMW car and, for example, your fitness app?

They both started with a prototype.

A prototype is a rough implementation of the 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). The giants of the automobile industry, such as the above-mentioned BMW, for example, don’t start any new production without this ‘draft’ stage. The first prototype of a car could be made from anything, e.g. like wood, clay, or even playdough, and it usually looks strange at the very beginning (sometimes, it's very far from what the final automobile will look like). But getting rid of all the functional and design mistakes made at the initial stage gradually turns it into the version that would later be launched on the conveyor.

In the tech sphere, a prototype is mostly called wireframe, and it looks like black-and-white screens with only the main functional blocks without any design elements. Like the prototype of the automobile, it becomes better and better with each step, until it is assembled into a clickable version with the basic functions of a future app.

Why is prototyping 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 on.

To fix some mistakes in the later development stages, you might need to rebuild the whole app’s architecture (and pay triple for the work of the developers), but at the prototyping stage problems are easily solved with just a few clicks of a designer in Sketch or Invision.

What the prototype MUST NOT be

It must NOT be beautiful. And we mean it, really. No colors, no pictures, no animations, or fancy design elements.

Just a set of black-and-white squares put in the correct order.

And there are two reasons for that.

The first one – design, even a simple one, takes time. And, at this initial stage, time could be spent much more wisely – for example, by conducting research about the industry or testing the first screens on potential users. In the end, it is this information that is crucial for the success of the future product (and not the color of some squares).

And the second reason – the most important one – all of the beautifications just distract you from the future product itself. Being captivated by the incredible screen animations, you most likely won’t notice that the app is hard to use. And if it's hard to use, people simply won’t like it, even if there is a nice animation of a cat hidden somewhere.

But what is a good prototype then?

That is easy. The prototype must:

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

And, most importantly, it must speak for itself with new users. If they need detailed explanations on how to use the prototype, then it is a bad prototype. The perfect prototype – a clear and simple structure that is obvious regarding how to use it from first sight.

How do we build prototypes here at Yellow?

1. We talk

We talk with the client a lot. And then we talk again. And then some more – because that is the only way to see and feel what the client wants to get in the end and how they see their product.

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

2. We draw

When we get all of the necessary information, we create one to three main screens with the most important elements of the future app and show this first variant to the client. The client gives us feedback, and we, in turn, redo the prototype to fit the comments. The process repeats, the number of main screens can grow up to 5 or even 10, and after some edits we arrive at a version that completely suits both the client and our team.

3. We test

After the first 5-10 main screens are done, it’s the best time to show them to the test users. They are an extremely important source of feedback because it can play a decisive role at this time. 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 it is hard or impossible to do – no problem, even showing the first prototype to friends, neighbors, and relatives is still much better than nothing and is hard to underestimate.

3. We draw (again)

After completing ‘the skeleton of the skeleton’, we draw the rest of the screens. In general, the prototype contains 30 to 50 screens that are done quickly enough because we already have the core.

4. We build

As all of the necessary screens are ready, we assemble them in a clickable prototype. This prototype most clearly and accurately shows how the application will work. And test groups can give the most complete feedback for the further work on the product.

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

How long will it take?

Terms are usually specific for each project. It depends on the complexity of the task, the degree of the client’s involvement in the process, and many other factors. However, on average, creating a prototype takes 3 to 6 weeks.

And some more advantages of prototyping

Creating wireframe is the cheapest and most effective way to test the company with literally no risk for the client at all.

It’s the first stage of working on a product, so no strings are attached. Clients can see how we work, and feel, whether they like working with us, and if not – just take the ready wireframe and finish the product with another company (although we’ve never had cases like that). All in all, the intellectual property belongs to the client, so it’s as simple as that.

As a well-done wireframe is also a good specification of the future product itself, the client  also has all of the data to create a design, make all of the necessary estimates, and build the app’s architecture.

As we don’t charge much for the wireframe (although sometimes it requires hours and hours of work of the whole team), it is beneficial for the client and totally risk-free. Because, in the end, we do not sell a couple of black-and-white screens – we sell our expertise, our experience, and the professionalism of each member of our team combined together.

To sum it up

We hope that this information was useful, and if you have any other questions (or if you want to build a prototype), please feel free to contact us.

Don't want to miss anything?

Get weekly updates on the newest design stories, case studies and tips right in your mailbox.

Seems like this email is already subscribed!
Related Posts
REST Security Basics
REST Security Basics

From basic authentication to JSON web tokens—four ways to implement user authorization in a nutshell.