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.
Replatforming with migration to Drupal 10 and redesign from the information architecture, UX and UI of the Enterprise portal.
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.
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Digital Innovation Manager
