Logo BergeratMonnoyeur

Product configurator for the official distributor of CAT® machines in Poland

Project type

Product configurator




logo Drupal Drupal
Logo TypeScript Typescript
Logo Vue.js Vue.js

Scope of work

Graphic design, UX, development

About project
  • The complicated products configuration process
  • Incompatibility of elements with a given type of machine
  • Extended machine selection time
  • Dissatisfaction (and sometimes even resignation) with the purchase of CAT® products

About the Client

Bergerat Monnoyeur is an authorized distributor of CAT® machines in Poland. The company offers comprehensive service and technical support for the machines. BM-CAT provides a wide range of products – excavators, backhoe loaders, and bulldozers. The machines are suitable even for the most demanding construction or industrial projects.

Before implementing the configurator, selecting a machine on the CAT® website was challenging. All types of machines and additional equipment were presented separately. To configure the machine, the customer had to save individual selections and then send his request. This involved the risk that the elements indicated by the client might be incompatible with a given type of machine. 

logo Drupal
Logo Vue.js
Logo TypeScript

Our goal was to create a product configurator that would facilitate and shorten the process of selecting machines, and thus increase customer satisfaction as well as speed up the work of the sales department.

The project's goal
Background element

The official Bergerat Monnoyeur website was built on Drupal, so it was natural to continue operations on this system. What solutions have we introduced?

  • Displaying the home page and admin panel based on Drupal 9;
  • Dynamic configurator built in Vue.js that works as a SPA (Single-Page-Application);
  • 4-step configurator – selection of machine type, basic configuration (e.g. selecting the cabin, engine, lighting), additional options (non-standard equipment, type of oil or warranty type), and a summary;
  • The possibility to see the full configuration and cost calculation in the last step as well as the option to send an inquiry regarding the configured machine. 

The configurator allows the client to quickly and conveniently select a machine and match it with compatible elements; see the equipment cost in a given leasing configuration, and automatically send an inquiry. Moreover, during the machine selection process, the customer can freely change the settings and return to previous steps. 

Solution Details

User experience

User Experience

Before the development work, our team was also responsible for creating the configurator’s graphic design. The key was to ensure maximum comfort in using the solution on both mobile and desktop devices. That’s why we used e.g. clearly described configuration stages, the option to collapse/expand each section, and “next” buttons, thanks to which the user can be sure that they will not skip any stage of the machine creation. 

Single-Page Application

Single-Page Application

As mentioned earlier, we built the configurator as the SPA. It means that any further action taken within the configurator, e.g. moving to the next stage of machine creation, doesn’t result in a page reload. This solution significantly speeds up the process, while ensuring the user's comfort.

Selecting the Equipment

Selecting the Equipment

Only components and accessories compatible with a given type of machine are available in the configuration process. Thus, the client can be sure that the quote they create doesn’t include equipment that may not be compatible with a specific machine. 

Leasing Options

Leasing Options

During the machine configuration, the client can see how the price changes depending on selected options. In the leasing section, the user can set up and change for example: 

  • leasing type,
  • agreement duration,
  • initial payment percentage,

At the end, the final price of the configured machine is displayed.

Offer Generation

Offer Generation

After completing all configuration stages, the customer can not only send an inquiry to the sales department but also view the offer and download it as a PDF for their own use.

Data Import

Data Import 

The data in the configurator can be imported in two ways:

  1. Classic method – by clicking the available options in the admin panel.
  2. Using the CSV file – this option allows massive data download, e.g. about prices or technical requirements of the machine, to the panel.

Here are the results of our work:

We implemented all the assumptions and maximally streamlined the CAT® hardware configuration process. After implementing our solution, Bergerat Monnoyeur customers no longer have to go through complicated steps to create a machine tailored to their needs.

The Effects
  1. Transparent and intuitive machine and leasing configurator that facilitates selecting the equipment tailored to the user’s needs.

  2. Simplified process of submitting machine inquiries.

  3. Unlimited possibilities for developing the configurator with new options and stages.

  4. Modern graphic design that matches the brand’s visual identification.

  5. Simple configurator management via Drupal’s extensive admin panel.


hours spent on creating the configurator (including the graphic design phase)


desktop and mobile views


people were part of the project team: Backend Developer, Frontend Developer, Tech Lead, and Project Manager

Need a product configurator? 

Leverage our experience