A prototype is a quick visual representation of a future product. The prototype allows you to see the projected system at the earliest stage.
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.
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.
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:
From information chaos, the designer begins to identify patterns, cut off excess, create hypotheses and assumptions.
Business processes are described:
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:
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:
For complex feature set, we think out the logic of work:
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):
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.
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