How we prototype

19 October

What is a prototype?

A prototype is a quick visual representation of a future product. The prototype allows you to see the projected system at the earliest stage. Prototype prev

A prototype can take up half the time of a project interface development. At this stage, we fix concept, search for solutions and adjust initial plans.

Prototype plus Terms of reference

Designing should be conducted flexibly, there should not be rigid, constant technical tasks. During prototyping, there is an understanding of how everything should work. Writing Terms of reference and prototyping is a complementary process.

When we write Terms of reference, we must already understand what the project will look like, but at the stage of prototyping, new solutions will necessarily appear that will differ from the original design.

Investigation

First, the project is discussed with the Product Owner, the tasks and goals are clarified. At the same time, other information on the topic is collected: market, competitors, audience are analyzed, portraits of users of the product are compiled.

Нельзя просто так взять и сделать прототип

Gradually the concept begins to loom, there is an understanding of how the product can look. The first approach to the prototype can be described as follows:

Research and prototype

From information chaos, the designer begins to identify patterns, cut off excess, create hypotheses and assumptions.

Business processes are described:

Business scheme

The first prototype

At some point, the collected information becomes sufficient and you can proceed to visualization. The first sketches appear at the very beginning of the work, but let’s take as a prototype what is obtained after a thorough study.

First, one key screen is drawn. From it you can understand the basic principles of the system:

Interface prototype

From this moment the development takes a cyclic character. Each variant is tested, hypotheses are put forward, changes are made.

Other functions are being worked out:

All prototypes

For complex feature set, we think out the logic of work:

User interface iteraction

Interactivity

The prototype always means interactivity. To understand the system’s composition, you can only try it in dynamics. Most modern prototyping systems allow you to create interactive prototypes that simulate the real use of the system.

Interactive prototype allows to understand the work of the product in dynamics

For our projects, we use the prototyping service UXPin.com. This is a powerful online prototyping tool.

Often interactive design prototypes are associated with ready-made layouts. In this case, it is not possible to implement all the animations and interactions, but it turns out to look at the design in action. For this purpose we use marvelapp.com

Try (clickable areas are highlighted):

Ready-made prototype

As a result, after many iterations, a complete representation of the future system is developed. Some elements can be simplified, and the design is sketchy, but the product owner and developers now have a complete idea of how everything will function.

All Prototypes

Before proceeding to the next stage, the interface design, I recommend that you carefully check all the details. The more accurate and complete the prototype, the easier it is for the designer to draw the interface and programmers to develop. A good prototype is saving time, money and nerves for all participants in the product creation

Andrey Ivanov

Stay Tuned!