Pestalozzi Stahl­techik System Calculator

Simple and efficient planning thanks to an online calculator
With the web-based calculator, Pestalozzi Stahltechnik customers can configure selected products, such as fire protection doors, themselves and immediately receive an initial price calculation.
Client
Pestalozzi AG
Since
2023
Links
Configuring a door with the system calculator

Having already developed the Haustech mobile app for Pestalozzi Haustechnik, we have now also been able to support the Stahltechnik division. 

Pestalozzi Stahltechnik - Steel and metal since 1763

Pestalozzi Stahltechnik, a division of Pestalozzi AG, is a specialist in steel, metal and custom services for industry and metal construction. Pestalozzi Stahltechnik offers its customers a comprehensive range of products and services.

Products individually configured

Certain products (such as fire protection doors) require customized planning and configuration and result in correspondingly individual prices. With the System Calculator, Pestalozzi customers can now configure products themselves and obtain an initial price calculation quickly and easily. 


The initial version of the System Calculator contains systems for fire protection doors from Forster and Jansen. In the future, the calculator will be expanded to include other manufacturers and product categories. To make this possible, we have built a flexible system together with Pestalozzi Stahltechnik.

Why a web-based configurator and calculator?

The introduction of a web-based configurator brings benefits both for Pestalozzi's customers and for the company itself.


From the customers point of view 

The process of planning and preparing quotations for products in the metal construction sector often still involves a lot of analogue work. 

This is well illustrated by the example of fire protection doors. These have to be configured differently depending on the building and their planning is complex, as regulations have to be adhered to.

Metalworkers often base their planning on projects that have already been implemented and the guide prices, catalogues and specification sheets provided by AM Suisse to ensure safety. They often also use their own checklists to compile all the relevant facts and components. Keeping these up to date is time-consuming and therefore the latest material prices are not always taken into account.

Swiss Metalworking Union brochure Calculation aid for metal construction
Page in Calculation aid for fire protection doors

The configuration and quotation process is therefore not only error-prone, but also time-consuming, which is not ideal given the high price pressure and increasing importance of accurate prices. Accordingly, there is a need for efficient and reliable price calculation.

The System Calculator ensures that no important points are forgotten during planning and that safety aspects and current material prices are taken into account. A price calculation for the desired system is supplied, which can serve as the basis for the quotation.

From a business perspective 

For Pestalozzi Stahltechnik, the System Calculator offers an opportunity to increase efficiency in the sales process. The digital solution allows customers' needs to be addressed in a targeted manner. At the same time, the Pestalozzi sales team can support its customers in finding the right products and configurations in a more targeted and data-based manner with the help of the demand shown in the calculator.

Pestalozzi is thus also positioning itself as a technically competent and modern company that responds to the needs of its customers.

Calculator functions: what the tool currently offers

  • Login with existing e-shop login

  • Dashboard with overview of all objects and items, either as tiles or in a list view

  • Create new objects (construction projects, such as a house) and items (e.g. a door system)

Overview of the items created in the system calculator in tile view
Overview of the items created in the system calculator in list view
Create a new item in the Calculator system
  • Step-by-step configuration of the desired product. This ensures that the configurations are technically valid and feasible.

  • Generated is an indicative price calculation as well as an overview of all components and processing steps. The information is provided in sufficient detail so that it can be integrated 1:1 into quotations.

Selection of the desired system
Selection of the desired product
Configuration of the desired model
Specification of the required dimension
Selecting the door lock
Selection of the desired lever handle
Selection of tapes
Selection of locking bolts
Lock selection
  • Download the calculation as a PDF or Excel file

  • Notifications in the event of price updates for the respective products (automatically generated from the backend) or marketing messages that can be entered and sent in the CMS.

  • Easy access to the respective product documentation from the manufacturer

Overview and price calculation for customised fire protection door

How did we ensure that the right functionalities were implemented in an easy-to-use interface?

Initially, interviews were conducted with Pestalozzi customers to find out how configuration processes currently work, what difficulties exist and what needs customers have with regard to the configuration of fire protection doors. For example, it became clear that price is one of the most important criteria and that it is therefore helpful to know an indicative price for a door system as quickly as possible.


Based on the findings from these interviews, a clickable prototype was built based on wireframes. This illustrated the scope of the solution. With the help of this prototype, internal testing was carried out with Pestalozzi Stahltechnik employees. Initial feedback and the resulting changes were incorporated into the prototype.

The internally validated and optimized wireframes were then presented to selected customers. The results of this qualitative user research and testing with the prototype were considered in the design and implementation phase.

For example, it was noted that the font size should be adjusted for better readability, that English terms should be avoided or that the test subjects would like to be able to copy objects or items.  

Insight into the workshop of a metal construction company
Insight into the workshop of a metal construction company

This process of multiple validation of the scope and concept helped us to better understand the different target groups and take their needs into account during implementation. The result is a solution that actually generates added value in the context of the users. In addition, inspiration for continuous development has already been gathered. 

Davide Abbamonte

«Apps with love accompanied us throughout the entire process with a great deal of expertise - from initial discussions, to the execution and evaluation of the user testings, the development of the specifications and the technical implementation. Apps with love supported us with a great deal of passion and provided us with a lot of advice and assistance.»

Davide Abbamonte, Head of Stahltechnik division

Less is more

Pestalozzi decided to launch the calculator initially with «only» one type of product, namely fire protection doors from the manufacturers Forster and Jansen. A conscious decision was made to keep the product range small at the beginning and to build the system in such a way that it would be scalable in the future, meet the needs of users and work with a good data basis. This ensured that a solid foundation was created for further developments in the future.

The implementation in practice

The System Calculator was implemented for desktop and tablet due to the usage requirements. To ensure expandability, we created a component-based design, which also simplified the implementation. Close collaboration with the Pestalozzi data team and Pestalozzi IT in general was also important for efficient implementation. This created a good user experience for customers: With the existing Pestalozzi e-shop login, they can also log in to the System Calculator. An interface to the existing and well-structured database ensures that the content in the calculator system is always up to date and correct. 

We implemented the frontend with Next.js, React and TypeScript as the basis, as well as the PHP/Laravel/Statamic stack in the backend.

System architecture of the Pestalozzi Stahlechnik System Calculator
Sketch of the system architecture
Overview
Roman Hofer
Roman Hofer
Co-Head of Project Management
Always has a smile on his face and is ready to crack a joke, but when it's serious you can rely on him like no other. When he's not out in the fresh air with his phone to his ear, you're sure to find him on a bike trail.
Kim Jeker
Kim Jeker
Web Development
He dreams of the wildest backend, frontend, API and CMS concepts and when you ask him if they are feasible, his answer is a simple "yes". No wonder with such a treasure chest of experience!
Kajetan Som
Kajetan Som
Web Development
He could easily earn his money with Photoshop artwork, but to our delight he also likes to implement web projects. With degrees in computer science and visual communication, he brings the perfect mix of skills to the table. And thanks to the Google Meet background feature, we still get to enjoy his penchant for graphics, typography and whimsical image compositions.
Nick Gerber
Nick Gerber
Concept & Design
He knows every shortcut and every Easteregg, there's not a single software tool that he hasn't already tested and sworn at. The clear winner: Notion. He uses it to work in such a structured way that, in addition to conceptualizing, designing and developing websites, he has time to ask the really important questions in life. For example, who tops the own goal statistics in table soccer.
Milena Rutz
Milena Rutz
Head of User- and Innovation Research
She uses scientific methods to find the key issues that are all decisive for hit or flop. You’d better listen to her and do exactly what she says: her know-how is worth its weight in gold.
Rémy Böhler
Rémy Böhler
Head of Web Development
If he wanted to, he could program a website with his little toe while blindfolded... but he doesn’t want to. Our secret weapon when it comes to web development.
the logo of the company Opinov8 on a white background
Opinov8
Web & App Development
We just noticed that you surf with Internet Explorer. Unfortunately, our website does not look so nice with it.

You want to know why that is?
We have written about it.

Blog

You need help with the changeover?
Get in touch. We are happy to help

Contact

Install a new browser?
There's lots of choice.

Browser