Product configurator for the official distributor of CAT® machines in Poland
Project type
Product configurator
Industry
Construction
Technologies
Drupal
Typescript
Vue.jsScope of work
Graphic design, UX, development
The Problem
- 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.
The Challenge
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.
The Goal
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 Solution
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
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
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
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
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
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
The data in the configurator can be imported in two ways:
- Classic method – by clicking the available options in the admin panel.
- Using the CSV file – this option allows massive data download, e.g. about prices or technical requirements of the machine, to the panel.
The Effects
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.
Transparent and intuitive machine and leasing configurator that facilitates selecting the equipment tailored to the user’s needs.
Simplified process of submitting machine inquiries.
Unlimited possibilities for developing the configurator with new options and stages.
Modern graphic design that matches the brand’s visual identification.
Simple configurator management via Drupal’s extensive admin panel.
Statistics
750
7
4
Need a product configurator?
Leverage our experience