Architecture & Management of a Multi-platform Design System
The company is a multinational leader in the AEC (Architecture, Engineering, Construction) sector operating on a global scale, offering advanced software solutions for architectural design and automated prefabrication. Its suite includes complex 3D modeling tools, production management software, and control interfaces that integrate the world of digital design with physical industrial processes.
Between 2022 and 2023, I held the role of Design System Manager, assuming responsibility for the optimization and governance of the entire multi-platform digital ecosystem.
The main objective of my intervention was to centralize design through a scalable Design System, ensuring consistency and accessibility within a frontier technological context. My task involved coordinating designers on the correct use of components and creating granular technical documentation for the development team.
A crucial challenge was educating the engineering team on the implementation of components within a development environment in Unreal Engine 5, translating design logic into a native environment and systematically managing technical limitations and the performance required by the software.
Example of the Design System principles applied. Actual content is protected by NDA.
Modena, Italy
AEC Software
$ 1,3+ B (2023)
Project Objective
The assignment involved the supervision and evolution of the Design System for a technological entity operating on an international scale. The main challenge consisted of ensuring visual and functional coherence among various complex software platforms, while simultaneously managing the transfer of information between a design team located in Europe and a development team based in India.
My Role
As the person responsible for the system, my task was not only the creation of graphic assets but the management of the entire governance of the digital ecosystem, acting as a technical bridge between design and engineering.
Method: Atomic Design
To ensure scalability and maintainability, I structured the entire library by strictly following the criteria of Atomic Design.
This allowed for the creation of a logical and modular hierarchy:
Atoms
Definition of fundamental tokens (Colors, Typography, Spacing, Shadow, Border-radius).
Molecules
Aggregation of atoms into simple functional components (Input fields, Button sets, Tooltips).
Organisms
Complex and independent sections (Navigation bars, Data tables, Modals).
Template & Pages
Structural validation of layouts to ensure that every new interface respects the constraints of the predefined system.
Workflow & Design Governance
My daily work was structured along three main lines to maintain system integrity:
Auditing & Review
Constant monitoring of the templates produced by fellow designers. I verified that every element used was registered in the system and that the layout rules were applied correctly.
Component Creation
Analysis of new business and design needs and the planning of new components upon request, evaluating the impact on the existing library to avoid redundancies.
Cross-Platform management
Management of the complexity deriving from the need to adapt components to different platforms (Web, Desktop, Mobile), while maintaining a unified visual language.
Technical Handoff & International collaboration
A fundamental pillar of my activity was the collaboration with the development team, a process that required absolute communicative rigor to overcome geographic and technical barriers.
Coordination took place through weekly sessions in technical language (ENG), during which I conducted an in-depth analysis of the components to illustrate their behaviors and dynamic states, such as transitions between the classic states of Idle, Hover, Focus (via the "TAB" activation key for keyboard navigation), and many others.
This handover was not limited to aesthetics but entered into the merit of the "grammar" of the design, defining logical rules and technical limitations. This approach was decisive in reducing interpretive friction between the project file and code implementation, ensuring that every component maintained its functional integrity once developed.
Technical Documentation (Deep Dive)
To support this workflow, I produced extensive technical documentation for every single element, transforming the Design System into a true operating encyclopedia.
Each sheet was designed to be a comprehensive document describing the anatomy of the component through pixel-perfect specifications and associated tokens, placing them alongside usage guidelines and best practices for designers.
Particular attention was dedicated to the management of edge cases, preemptively defining system behaviors in critical scenarios such as validation errors, text overflow, or data loading variability, thus making the system autonomous and resilient.
Anatomic analysis of an Alert component: how to break down elements to make them dev-ready.
Results & Added Value
The introduction of this governance system allowed for the establishment of a definitive Single Source of Truth, eliminating visual discrepancies and consolidating a common technical language among the international team.
The most tangible result was a clear increase in operational efficiency: the availability of pre-validated and documented components accelerated development times, allowing the team to focus on new features rather than resolving technical debt.
The implementation of such granular documentation, in fact, usually reduces "back-and-forth" clarification sessions between design and dev during the sprint phase by approximately 50%*.
*Estimate based on standard efficiency patterns in Enterprise-level Design Systems.