Caleffi New Website

Enterprise Portal Redesign and Replatforming.

The client

Caleffi develops and manufactures components for air conditioning and plumbing systems, heat metering systems, controlled mechanical ventilation and specific components for renewable energy systems. All production processes take place in Italy in the 12 factories owned by strategic conviction, guaranteeing total quality and organizational control.

The Group is composed of 4 owned companies (CALEFFI, PRESSCO, RDZ, CRISTINA), two multibrand subsidiaries (ALTECNIC, ALLVALVE) and 9 distribution branches. It has more than 1630 employees; distributes in more than 90 countries with a consolidated turnover of 484 million euros for the year 2023.

Logo Caleffi

The objective

Replatforming with migration to Drupal 10 and redesign from the information architecture, UX and UI of the Enterprise portal.

The challenge

Caleffi’s enterprise portal has always been a primary and solid point of contact with the market. With a catalog of thousands of instances active in 30 countries and some 20 languages, a digital magazine, a collection of design diagrams and dimensioning software, the portal has over time become a true information hub that has crossed the boundaries of the company’s purely commercial intent.

The site previously online since 2013, also the result of a collaboration between SparkFabrik and an innovative digital agency in the Treviso district, has guaranteed more than optimal performance for ten full years responding to a continuous improvement approach based on a partnership between Caleffi and SparkFabrik, one of the positive aspects in choosing a partner and not a supplier tout court.

Diagram explaining the cloud devops platform for Caleffi

Since the previous release, the site has undergone constant evolutionary interventions (the migration of the Chinese subsidiary to Alibaba Cloud at one point in history is an important example).

Needing to migrate to Drupal 10, the company decided to seize the opportunity and redesign the entire portal by integrating a third-party PIM (Product Information Management) through a documented Rest-API system, and reviewing every aspect of user experience for the three primary users (installers, wholesalers, and designers) characterized not only by very different consultation needs, but also by specific device usage (between mobile, tablet, and desktop).

La soluzione

The multi-country, multi-language catalog organization was redesigned from scratch. Up to that point managed with a database on Drupal 7, it changed to a complex object based on Drupal 10 and the consumption of APIs exposed by an external PIM.

As is bound to happen, over the years layers of processing had been deposited that were not always consistent and had led to an organization of information that was no longer relevant to external users and internal editors. The opportunity was taken to strategically reorder and rethink the journeys of regular users of the site with a massive reevaluation of the assets that denote the products.

Logo Caleffi

Caleffi’s site is in fact not a showcase site, but a real working tool intended for different users-such as installers (plumbers), thermo-technical designers, wholesalers-which is the reason that led us to carefully define a greater granularity in the information of the individual articles even on the code front: a key aspect was in fact the decoupling between data and platform, which required a great deal of coordination work between Drupal and PIM.

Laptop overlaid with balloons explaining backend features

Drupal + PIM

To ensure continuity of use even if the two were not connected, we took advantage of Drupal’s great advantages, including data storage capacity. In other words, Drupal stays listening to what the PIM (single point of truth) communicates, exposes the data derived from it, but supplements it with additional editorial information created and managed by Caleffi editors using the CMS.

Complete editorial control

From an editorial point of view, the result is a very broad system that provides maximum flexibility for individual country editors, who are free to build new pages, staying within the perimeter defined by the Design System, or to leverage and optimize content created by others through an intuitive and all-inclusive dashboard (an option that supports those branches that do not have the strength to create content themselves).

Strategic analysis

Project processing started from a strategic assessment, carried out through co-design actions together with the client. This phase defined the new business goals related to the site and derived, from the analysis of behavior on the site of the different targets, the goals for each cluster.It started with a qualitative construction of personas together with the client, then trying to define the desirable customer journey for each target cluster. Through these two forms of design thinking it was possible to identify needs, user points, moods and actions of the target users.

Diagram explaining the streategic analysis for the project

Theassessment resulted in a ranking of useful operational macro-actions to be brought to the new site, categorized by priority and formalized through user stories. Consistently, theinformation architecture of the portal was also created, working in constant synergy with partners for SEO and PIM management.

New content sections were designed, in coordination with Caleffi’s digital team, in order to maximize the work already done in other communication channels, such as social.

Venn diagram composed of Personas, Customer Journeys and User Stories, with at the center the SparkFabrik logo

Personas

Qualitative construction of personas together with the client

Customer journey

Defining the desirable customer journey for each target cluster

User stories

Formalization of operational macro-actions to be performed

In the redesign of the information organization and the consequent UX considerations, a pivotal need arose from the analysis of the analytics of the site up to that point, which detected a significant fruition from mobile devices by technical and commercial figures looking for specific and detailed product information.

It seems a triviality to talk about mobile first development, but it is not so for a catalog that has thousands of references, product variants and dozens of information assets for each individual product master sheet (we are talking about videos, descriptive brochures, navigable diagrams, technical drawings in different formats, BIM and more), assets that must be easily and quickly consulted even in special situations, such as construction sites, thermal power plants, inspection environments that are not always convenient.

Design System

Speaking of editorial activities, Caleffi’s activities have been increasing over time, so much so that over the years the portal has become a real industry information hub, recognized by all operators.

So many editors in different time zones, so many different market needs, so many distributed communication thrusts needed to be made autonomous, visually cohesive and independent within a perimeter that was yes controlled by the parent company, but not castrating. We therefore proposed to Caleffi to formalize and elevate their digital communication language by creating a strong Design System that would allow brand consistency and visual impact internationally on the one hand (the upstream control of brand guidelines mentioned above) and maximum creative freedom to editors on the other.

Mockup of the mobile website overlaid with cursors representing different stakeholders in the design project

The implementation of the Design System begins with a co-design and UX research phase through which we identified the best behavioral patterns, components and page templates needed to meet the previously defined targets.

Diagram explaining the design model for Caleffi

Caleffi made available to us the latest brand identity documentation, and together with the experience and knowledge gained over the years with them (we have been their suppliers for more than 10 years) we concretized everything by defining first of all solid “foundations”. As the term suggests, real foundations thanks to which we put together all the visual rules that describe and characterize the brand, going from color palette to typography, from space management to image management.

Color palette
Three different color palettes with shades
Shadows
Examples of different shadow styles applied to boxes
Typography
Typography examples
Icon library
List of different icons used in the project
Grid system and spacing
Example of spacing and columns
Images and assets
Assets guidelines

Having established this set of rules, the design of the user interface begins, moving from the atomicity of the smallest components to the construction of true functional patterns.

Careful design of all components, definition of all interactive states and responsive behaviors ensure that the editor has a completely autonomous experience and will only have to worry about choosing from a wide range of editorial possibilities (library of components and/or templates) without having to worry about the resulting visual balance, since it is guaranteed by the initial design. The editor will for all intents and purposes be able to intervene freely in the page content as well as having the ability to create fully customizable internal ecosystem pages and/or landing pages.

Components and patterns
Web components library
Templates
Mockup of different templates for web pages
Documentation
Screenshot of the project documentation

A great milestone finally achieved, a Design System that from now on becomes a universal and international communication language** for all of Caleffi’s touchpoints, with the goal of becoming an indispensable guide for all future digital solutions that will be launched.

Consistency, precision and harmony in a digital ecosystem.

Launch project
Walter Bertona

Walter Bertona

Digital Innovation Manager

More than a new site, last September's go-live represents a revolution in data management and the timeliness of product information and assets in the company.

The combination PIM+CMS allows us to centralize and maintain all product information in real time enhancing the immense document assets, all this available and in autonomous management of all our subsidiaries worldwide.

A beautiful collaboration with SparkFabrik in a difficult and complex project, in concert with all other active players.

Our success stories

Discover our projects

Caleffi New Webiste

A multi-cloud infrastructure to optimize Caleffi's digital presence in China

Loropiana

An iconic Cloud Native Journey for an Italian excellence: the containerisation of fine yarns

CNP Vita Intranet

Beyond the traditional Intranet towards an Employee Experience Platform

Get in touch

Follow us on social media
Listen to Continuous Delivery