Catalog website Vympel GmbH

Design concept, 3D renders of equipment, integration of an online simulator and unique development of the Vympel catalogue website

The Vimpel Group has been developing and producing innovative measuring systems and automation systems for the gas industry for the fourth decade.

The company needed a new website to attract potential partners and customers in different countries. The goal of the project was to tell users about the advantages of the company’s gas measuring devices in an interesting and accessible format.

CSSDA

Special Kudos. Best Innovation. UI design. UX design.

AWWWARDS

Honorable Mention

The key idea

The high-precision equipment manufactured by Vympel has no analogues among other laboratories. Moreover, the use of the latest technologies and modern materials ensures the safety of operation of a wide variety of gas analysis devices.

The new catalog site should primarily reflect this distinctive feature of the company, while remaining simple and understandable to the user. This prompted us to search for radically new solutions that allowed us to present information about the brand’s products in an interactive form.

At the same time, in order to compile the structure of the site and form the overall design concept, we needed a deep stage of analytics. To a greater extent, it was based on the study of the European market, because it is the target audience of the site.

Interactive Simulator

The Hygrovision Mini online simulator consists of two areas. The right area is represented by the control panel. Here, the user can use a special slider to change the temperature of the condensate mirror to a larger or smaller side, and also choose one of two lighting modes. The left area contains a video that reflects these changes. The simulator helps to visualize the principle of the analyzer, which makes it understandable for a user of any level of training.

Design

The design concept is based on a detailed visualization of the equipment that the company produces. We have developed 3D models of each of the analyzers and made an engaging animation on the main page. The site takes into account all the options of the user path — you can order Pennant products both on the main page and in the corresponding section. Moreover, the possibility of a detailed comparison of the characteristics of the equipment is presented.

We also implemented a system of video tutorials and created an interactive simulator of the Hygrovision Mini model. With their help, the user can get to know the company’s products better and learn how to configure and use Vympel analyzers.

Horizontal scroll

The main page introduces the user to the main products of the company. Using the horizontal scroll, you can consistently learn about different types of analyzers, as well as go to the product page for more detailed information.

Functional

The main difference between this project and all others was an unusual solution of internal functionality — to use 1C-Bitrix with a stack on React.js . Only the core and the admin panel remained from Bitrix, providing convenient ways to store information and configure the logic of the site.

However, everything about the front part has been changed. We have completely abandoned the built—in system of templates and components — each page is represented by unique blocks.

Now the front is implemented via the REST API. In order for the information to come to the front in a format convenient for displaying, we implemented a system of models and controllers, as well as the APIs themselves, to which the front accesses to receive or transmit information.

Result

In the visual component, we have brought to the fore the main feature of the Vympel — their unique equipment. The combination of interactive elements and an unusual approach to development made it possible to make the site informative and visually attractive.