The goal
New configurator underpins system expertise
Heating manufacturers increasingly see themselves as providers of integrated heating and air conditioning systems. With this in mind, ROTEX wanted to enhance its own Internet presence with a heating configurator that would position the company as the number one provider of complete heating systems for private consumers. With the configurator, potential customers should be able to easily put together their ideal heating system from more than 10,000 possible combinations based on individual key data. Following the configuration, the customer is forwarded to the nearest specialist installer. In this way, ROTEX aims to increase the usefulness of the website on the one hand and to support sales with qualified advance information on the other.
From the outset, there were also plans to make the website available as an independent app for tablets at a later date.
FUF puts everything on one page
When implementing the heating configurator, the Stuttgart-based Internet agency opted for a single-page web application. The entire configuration process takes place within one page without any reloads. As part of the client/server architecture, the entire volume of data required is transferred to the client right at the start of the configuration - after that, all configuration processes run in the browser. The advantage of this is that the calculations are faster. Despite an immense calculation logic that runs in the background, the heating configurator therefore has a high performance.
Frank und Freunde designed the application logic that implements the calculations and processes all the parameters: Various system proposals are compiled based on the building data to be entered. Corrections can be made at any time and are processed immediately by the application - the customer no longer has to restart the calculation. Following the system recommendation, the customer can call up detailed information on the selected heating system and generate the corresponding system data sheet as a PDF. To round things off, the Stuttgart-based Internet agency integrated a list of the nearest ROTEX system partners in the familiar Google Maps display via an interface.
Pioneering solution as a single-page application
The configurator's data is maintained using the schema-free, document-oriented open source database MongoDB; this software is non-relational and uses a simplified data model, which brings flexibility in use and cost savings in development. In contrast to relational databases, MongoDB returns complete data records.
FUF has used the compact JSON data format as the REST interface between the applications. For the interface for the product data (middleware) and the admin interface, the internet agency relied on the tried-and-tested Symfony 2 framework. The browser-based single-page application was created using the open source framework AngularJS - this is where the business logic and user interface are located. The JacaScript-based browser application makes it possible to run the application completely in the client/browser.
Work quickly and effectively with a single server query
The innovation of the ROTEX heating configurator is the application logic, which Frank and friends transferred completely to the client. As all relevant product data is transferred from the server to the client when the "Find systems" button is clicked for the first time, the application no longer needs to query the server when the filter settings are subsequently changed. The configuration runs without annoying reloads, as the HTML can be reassembled using the existing data records thanks to the use of JavaScript. A useful side effect: local storage means that the heating configurator can also be used offline in future.
The success
The focus of the configurator: heating as a complete system
With the new heating configurator, ROTEX has gained an equally convincing consulting and promising marketing tool. With this offer for its website visitors, ROTEX has also responded to a new direction in the industry, which looks at the heating system as a whole rather than the individual components. Despite its complex calculation logic, the heating configurator is easy to use for users, who can reach their desired goal with just a few clicks and entries. With the configurator, ROTEX has gained a future-proof and expandable system that can also be provided as a stand-alone app for tablets in the future.
Conclusion
The internet agency FUF // Frank und Freunde has quickly familiarized itself with the heating industry and the complex calculations that run in the background and has acquired in-depth specialist knowledge. The Stuttgart-based company has used future-proof technologies in such a way that they are optimally suited to the task at hand and benefit the customer. The heating configurator for the customer ROTEX demonstrates once again that, in addition to the functionality of the applications, FUF always focuses on maximum user experience.
Project facts
ROTEX Heating Systems GmbH
6 months Implementation period
3 heating system categories
More than 10,000 different system combinations
Rotex Heating Systems GmbH
ROTEX Heating Systems GmbH is an innovative manufacturer of complete heating systems for energy-saving heating and cooling. ROTEX was one of the first companies in the world to consistently focus on the new condensing boiler technology. The Swabian company stands for high innovative strength and comprehensive know-how in the field of environmentally friendly heat generation, storage and distribution. ROTEX is a member of the DAIKIN Group, the world's leading manufacturer and supplier of heating, cooling and air conditioning systems, and employs around 300 people at its Güglingen site.
The target group
The heating configurator is aimed specifically at consumers who want to build or renovate a property and are therefore interested in purchasing advanced complete heating systems. The single-page application is also aimed at specialist tradespeople and consultants.
The technology facts
Symfony2: Implementation of the administration area with user management and authentication for data maintenance.
Document-based MongoDB database in the backend.
Delivery of the data as JSON via a REST interface.
Offline-capable JavaScript client for the REST interface of the backend with programming of the application logic.
Responsive web design with HTML5 and CSS3.
Offline data storage incl. application cache.
Data maintenance with the Symfony2 bundle Sonata.
Glossary
ANGULARJS Open source JavaScript framework from Google for programming browser-based web applications.
BUNDLE Bundles are separate units of a web application.
JSON (JavaScript Object Notation) Data exchange format used for communication between server and client.
MONGODB Document-oriented open source database that impresses with its high performance, flexibility and easy scalability.
SONATA PROJECT An open-source set of bundles developed on the basis of Symfony2. Each bundle reflects a specific benefit.
SYMFONY An open source web application framework written in the PHP scripting language.
Special feature //
The best conditions for an app
The technical solution that Frank und Freunde opted for makes it possible to make the heating configurator offline-capable in future. This is because the data required for the configuration is completely transferred from the server to the client with a one-off online connection.
The user can then also use the configurator offline. This solution is the ideal starting point for the implementation of a tablet app: the app, including the complete database, can be made available for download. If required, the database can be synchronized by connecting to the Internet. This would also make the app offline-capable.