Bergerat MonnoyeurThe product configurator for an exclusive CAT machines distributor in Poland
Check out how our team designed and deployed the solution allowing a complex CAT machine configuration.
Before the configurator development, the machine choice on the Bergerat Monnoyeur website was a challenging task. All of the machine types and additional equipment were presented as individual products. Thus, when a customer wanted to configure the machine, he had to write down all the elements and then sent an inquiry via email. Although it was a time-consuming process, there was a high risk that chosen parts were not compatible with the machine. The product configurator development was a big step ahead. It could vastly improve and shorten the configuration process. As a result, it might increase customer satisfaction and speed up the sales department's work.
The official Bergerat Monnoyeur website is based on Drupal. Thus, the technology choice for this project was not surprising. The configurator’s administration panel was made using this CMS. Moreover, Drupal 9 is responsible for displaying the home page. Our team used Drupal’s API to build a dynamic product configurator in Vue 3, which works as a Single-Page Application.
The configurator consists of four steps – machine choice, basic configuration (e.g., cabin, doors, engine choice), additional equipment (e.g., customized parts, warranty type), and the summary. In the last step, the customers can see all information about the configuration, including estimated costs. Then, he can send an inquiry in one click. The customer can conveniently choose and customize the machine using the configurator. He can see how much the product will cost and send an inquiry within a few clicks. Furthermore, during the configuration process, the customer can freely change settings and go back to the previous steps.
Solution in details
There are two ways to import data to the admin panel – by clicking available options in the admin panel or via a prepared CSV file. Thanks to the second option, one can import multiple product price or technical requirements data. Such a solution is a real-time-saver for the configurator’s managers.
As mentioned, the configurator was built as a SPA. It means that any action, e.g., moving to the next configuration step, doesn’t induce the page reload. Such a solution vastly fastens the application, simultaneously ensuring convenience to the users.
During the configuration process, the customer can only choose elements and accessories compatible with the particular machine type. As a result, there is 100% assurance that the estimate includes solely the equipment compliant with the machine specification.
When configuring the machine, the customer can see live the machine cost changes, depending on the chosen options. In the leasing section, the user can set and change, e.g., the leasing type, the contract duration, the percentage of the initial payment, or check the final cost of the configured machine.
In the final step of the configuration, the customer can not only send an inquiry to the sales department but also see and download the offer in the PDF for his use.
Our team was responsible not only for the development works but also for the graphic layout design. The biggest priority was adjusting all views to the mobile and desktop devices to ensure maximum convenience for all users. Thus, the project includes, e.g., configuration steps, drop-down sections, and a „next” button on each configuration stage.
Realization in numbers
The graphic design and development works took us around 750 hours.
We designed and deployed 7 mobile and desktop views.
The team consisted of 1 Back-End Developer, 1 Vue Developer, 1 Tech Lead, and 1 Project Manager.
- An intuitive machines configurator that greatly eases elements/accessories choice.
- Simplified inquiry process.
- Nearly unlimited development possibilities in the future.
- An up-to-date graphic layout compliant with the brand’s visual identification.
- Simplified configurator management thanks to Drupal’s extended administration panel.