Blog post

Better communication during the development process through prototyping

Prototyping
Concept
UI/UX
In the field of software engineering, prototyping refers to the development of samples or preliminary stages as an approximation of a final product. We rely on the use of prototypes for all projects that have a user interface.

What is prototyping?

In the field of software engineering, prototyping refers to the development of samples or preliminary stages as an approximation of a final product. Prototypes created in this way gradually become a finished product over the course of the project - for example, a website, an app or a complex software application.

The prototypes mainly serve as a basis for better communication between the developers, the client and the users during the development process, as the biggest problems often occur due to a lack of or unclear agreements. Prototyping, along with agile software development and user-centered design, is a paradigm that attempts to counteract these problems.

What types of prototypes are there?

A classic example is a user interface prototype, which gives the later software user a first impression of the graphical user interface and the program flow. This lacks reference to the technical functionalities of the overall system and their implementation. This focus on a special area of an application software is called "horizontal prototyping". "Vertical prototyping", on the other hand, picks out a special area of a software and shows the interactions with other components of the system.

In "evolutionary prototyping", the application is gradually developed further. The focus is on feedback from future users or the client. Prototypes can also be useful as a "throwaway model", e.g. for research or demonstration purposes ("experimental prototyping") or as a requirements model in the context of requirements specification ("exploratory prototyping").

How do we use prototyping in our projects?

We rely on the use of prototypes in all projects that have a user interface. For the structural design of a website or app, we usually create a wireframe prototype. This facilitates the information architecture and at the same time supports the requirements specification, as many functionalities can be visualized and clarified. Based on this, we create a design prototype, which we can use to coordinate the user interface design with our customers before the actual implementation. For more complex functionalities, we sometimes also use programmed prototypes, which, for example, focus on the type of implementation of a function or a specific program flow with a generic interface design.

How do we create our prototypes?

We create interface prototypes with the Sketch software. The built-in prototyping feature allows us to link individual screens using buttons. It also simulates a preconfigured viewport with page overflow. Via the Sketch cloud, we can make the prototypes available to our customers via share link.

We create runnable prototypes as a preliminary stage of the final product on our usual technology stack (e.g. Laravel and Vuejs). In this process, only some aspects - such as the final user interface design - are not elaborated. For production readiness, the prototype code then usually needs to be optimized via refactoring. Deployment runs via a test environment on a web server.

What do we see as the advantages of prototyping?

Prototyping is characterized primarily by the fact that feedback loops are generated even before the final product is completed. Prototypes enable better communication than abstract models, and they also improve the early detection of problems and change requests. The elimination of problems or the implementation of change requests can usually be realized more cheaply at the design stage than on the final product. In addition, user requirements can be continuously specified and verified to prevent undesirable developments.

What are the risks of prototyping?

Prototyping can also slow down the subsequent development process unless requirements are correctly elicited and cleanly documented. Of course, there are also additional costs, since a prototype brings an additional effort to the actual development of the product. However, such costs and time expenditures can usually be offset by less rework on the final product.