Co-creating in harmony

Five product clusters and hundreds of developers building a host of applications, platforms, and solutions to meet the needs of the Elia Group’s digital transformation. Questions of colour and look may seem trivial compared to their functionality. Yet they contribute to a satisfactory user experience and, ultimately, to the adoption of these new tools.

“Nova is Elia Group’s design system, i.e., a catalogue of reusable components (such as buttons, icons, functionalities, etc.) that designers and developers can use when developing applications and interfaces for Elia Group. Nova also incorporates the company’s visual guidelines (colours, fonts, etc.), which help to create consistent interfaces and thus contribute to a solid brand image. Nova provides ready-made answers to many of the questions that arise when designing front-end interfaces, enabling designers and developers to focus more on content than on graphic issues.”

“I’ve been Nova’s Product Owner since the beginning of 2024. Nova was created two years ago. Originally, it was an initiative between the UX Centre of Excellence (now UX Chapter) and the developers within IT. Elia Group’s digital transformation confirmed the usefulness of such a design system, and over time Nova grew from a handful of enthusiasts working on it alongside their day-to-day projects, to a fully-fledged product with a dedicated team of 5 people. Nova is a product of the ERA product cluster.”

Henry also ensures consistency in the development of user interfaces within the MCCS ecosystem. Getting closer to Nova was obvious, but not without its pitfalls.

“As part of MCCS, the future grid control system, product teams are developing a whole series of modules and web applications. I’m the Product Owner of the “Team Galaxy”, which is responsible for facilitating and improving the consistency of user interfaces for all these web applications. Like Nova, my team is developing a design system for frontend development, with design guidelines and design and code libraries which developers can use to efficiently and consistently develop and maintain their web applications.”

Henry: “It’s not that simple. We didn’t do things in the logical order: first develop a design system for the whole Group, and then apply it to all developments. Digital transformation within our organisation is much faster than that. Nova and MCCS are two recent initiatives that emerged separately and have evolved incredibly in less than two years.

The MCCS teams had already started developing without Nova. At the beginning of the year, Elia Group reiterated the importance of having a consistent design across all products and interfaces under construction. That’s when we started talking to the Nova team to see how we could integrate Nova’s design system. We quickly realised that it wouldn’t be that simple, because MCCS is a web application very different from the ones developed with Nova so far, with specific requirements that are more complex than what Nova was offering.

It took a few months to get to know each other, to understand what each party needed and could offer. Together, we came to the conclusion that it’s not possible to directly use the technology provided by Nova, not only because the technology stack is different but also because our two initiatives are quickly evolving in parallel. If we were to create a technical dependency between the two design systems, we risk blocking each other. However, we have agreed to take over Nova’s specifications at the ‘atomic and molecular’ level, i.e., fairly simple elements such as colours, fonts, and buttons. We are in close contact, keeping each other informed of our progress, difficulties, and best practices. A ‘loose coupling mode’ that works for both parties.”

Arnaud: “The MCCS is a very important and exciting product, but we couldn’t devote our efforts solely to their needs. We have other customers as well, and we’re trying to develop a general design system that can help a maximum number of developments within the Group. It was very challenging to find common ground, but we opted for constructive dialogue. Nova has learned a lot from this collaboration, both technically and organisationally.”

Arnaud : “In early October, we released the beta of our new version, Nova Tycho, a complete rewrite of our codebase and assets. This version aims to add a new level of abstraction to the current system. This level of abstraction will offer greater flexibility for all the specialists who use our solution. It also enables us to better support the various technologies used within the Group (Angular, React, Vue, Blazor, etc.). Finally, this new version offers perfect synchronisation between the design and development disciplines, facilitating dialogue between these two specialties.

The next steps will be to continue evolving this new version, with a view to delivering a stable version by early 2025. Through the development of new components, more in-depth documentation and concrete examples, we hope to make the creation of digital products even easier.”