Quartz Design System

Schneider Electric is a digital automation and energy management company

Design System Name

• Quartz Design System

Design System team size

• 5-10

Design System team make-up

• Designers
• Engineers
• Product Owner/Manager
• Content designer
• Brand

Governance model

• Hybrid

Governance approach

In 2019 Quartz design system was initiated by a designer and a developer and grew from federated individual contributors. In 2020, it was already adopted by over 100 applications. However, it faced the following limitations:

• Lack of dedicated resources to maintain the design system
• Reduction of quality and stability due to hieratic contributions
• Lack of synchronization between design/dev/doc
• Lack of design governance
• Low communication between contributors

In 2021, a new brand and visual language was created for digital products. A transversal design system team was appointed to upgrade the design system and instill that new language.
The design system spans multiple brands, platforms, and domains of expertise. To address this complexity, the governance model combines federated contributors from the product teams with a centralized core team managing the common foundations and system consistency. This hybrid model supports present and future evolutions:

• Maintain the processes and standards of the system
• Ensure the contributions meet the quality standards
• Ensure design and dev assets are always aligned
• Guarantee design consistency at the system level
• Keep alignment between contributors through regular synchronizations

Governance’s challenges

Our main challenge is to maintain consistency and quality in a multi-brand, multi-domain, multi-platform system. The very large scope of domains and platforms has several implications: 

• The maturity of product teams varies greatly. Low-maturity teams need robust guidelines to raise the quality of their outputs. 
• Very different domains mean very different needs. The system must be flexible enough to accommodate those needs and encourage specialized contributions. 
• Brand and visual language consistency across multiple platforms is harder to achieve. 
• Maintaining the quality of the system at a large scale is more challenging.

Vision

One design system for all Schneider Electric digital interfaces. We defined three values for our design system: 

• Open: stand for transparency and encourages everyone to share and move forward together. 
• Neat: strive for efficiency by carefully combining assets, documentation, and support.
• Steady: embrace proven standards and practices to ensure consistency and scalability in the long run. 

Strategy

We introduced three levels of contribution to the system: 

1. The “Core” level contains the universal components, patterns, and guidelines that all products are using. It is the foundation for large-scale consistency across the entire company. 
2. The “Domain” level contains high-level areas of specialization (Applications, Websites, etc.) applying to a large number of products. It avoids ambiguity on which foundational patterns, components, and styles to use. 
3. The “Facet” level contains specialized assets and guidelines within a domain. As they mature, some elements will be contributed to the larger Domain and Core levels. Each level may have teams dedicated to maintaining the scope they are in charge of. Replicating a cross-disciplinary team recursively into the levels ensures the internal consistency of the system and its assets. The ecosystem architecture is mapped on this contribution model to ensure a consistent organization of teams, libraries, and documentation. This also allows decoupled release cycles of the different modules of the system. 

Benefits of this model 

• Maintain system and brand consistency through dedicated Core and Domain teams that ensure the foundational assets are built with the highest standards.
• Make contributions to the system easy and frequent at the Facet level. Facets’ primary purpose is to share the best ideas in a place where everyone can look for inspiration and reuse. 
• Allow decoupled release cycles between the levels allow faster iterations for the product teams, while the Core/Domain teams have more time to build robust assets used at a large scale. 
• Enable to scale the number of brands, domains, facets, and platforms over time. 
• Promote sharing and communication across all teams. This model is the best solution to maintain consistency across all products without hindering efficiency across dozens of domains and multiple brands. The fully federated contribution domain was too close to the previous contribution model and led to many inconsistencies. Replacing it with one large centralized team could significantly slow the request, validation, and creation of assets, especially for specific domain patterns and components.

Roadmap 

1. Get support from leadership and appoint a dedicated team Asset level: translate the visual language into semantic design tokens. Architecture level: build a modular system architecture with strong foundations. Processes level: internal processes, tooling, and quality standards 
2. Restore the value of the design system and address users’ pain points Asset level: have a dedicated space for communication, documentation, and assets. Architecture level: version management for coherent releases, automated tests and continuous integration for reliability. Processes level: onboarding, feedback, and community management 
3. Bring active contributions and keep product teams engaged Asset level: open source, multi-brand, and multi-domain spaces. Architecture level: decoupled releases between core, domains, and facets. Processes level: contribution process for all levels of the system. We are currently at the early stage of opening contributions for the Website and Applications domains.

One of the challenges we successfully accomplished is when the design system team was appointed, frustrations were growing regarding the previous Quartz version. While the technical side of the system was very open to contributions, its design side had a more top-down approach without much room for contribution. Internal inconsistencies arose, and initiatives to build better UI kits and design systems started spawning across the company. New projects were confused as to which UI kit or system they were supposed to use and contribute to. Eventually, some product teams saw the design system as a constraint rather than a resource and provided excuses to avoid using it entirely. Trust was severely damaged. The strategic vision crafted by the new core team focuses on system reliability, visual language consistency, and close connection with the community to feed the system back. The layered architecture and governance model define clearly delimited areas of the system, allowing the core team to guarantee internal consistency while empowering contributing teams to build on top of shared robust foundations. While still in beta, the new version of the design system received a lot of positive feedback from the community, with a few pilot projects already using it. Detractors were listened to and are now experimenting with the new version to assess the migration effort and benefits. Connections with key stakeholders have been set up across the company, breaking silos, raising awareness and desire to adopt it at scale. A “Domain team” of designers and developers from another business unit is allocated full-time to maintain the “Websites” domain. It is empowered to contribute a significant portion of the system, building on the Core foundations and working closely with the Core team to ensure consistency and robustness. An official Domain team should be set up very soon for the “Applications” domain. Associated brands from the Schneider Electric group want to use Quartz for their new products and are committed to dedicating resources to maintain their brand within the system once released. Trust was restored beyond expectations.

For the future, here are the challenges we’d like to address.

Scaling up the team

Our immediate challenge is to expand the core team and build a network of ambassadors and contributors. The federated side of our governance requires careful syncing between the Core team and contributors to feed the system from the product teams while maintaining its internal consistency. The Core team needs the bandwidth to support a large-scale close collaboration and needs to grow. In parallel, we have been building trust and partnerships across the company since the beginning, sharing our vision and roadmap to get them on board when ready. Those partners promised to dedicate resources to contribute to the system, and some of them have already done so. This external support comes from the global brand team, a couple of associated brands, the industrial design team, the legal team (open-sourcing), and heads of design and development from several business units.

Large-scale deployment and contributions 

We are moving our focus from building the foundations to making the experience of consuming the system smooth and easy. As we had to implement foundational changes between versions of our design system, the upcoming challenge will be to provide onboarding, support, and guidance to the product teams to help them migrate their existing products to the new version. We intend to tackle this challenge first by preparing onboarding and migration material (tutorials, videos, playgrounds, etc.). We will also leverage our team of ambassadors across the company to help onboard new teams, collect feedback, and share it with the Facet/Domain/Core teams. This links back to the first challenge of growing both the Core team and the contributors teams. 

Open-sourcing 

We’ve been willing to make a portion of the design system open source from day one. That’s why we embraced the open-source good practices even for our internal product management, and we host our source code on GitHub (private space). We obviously can’t share everything, as we must protect Schneider Electric’s intellectual property. So we have abstracted the brand identity elements into independent packages in the system. This allows us to publish a “generic brand” package to the open-source community as a starting point to create a custom brand. The “Schneider Electric brand” package, alongside other brands from the group, is only published internally. Also, we expect some Facets to embed business expertise, which is a competitive advantage. Those Facets will also be published only internally. Making our system fully modular from the ground up allows us to control the access policy to every part of it. From a documentation perspective, we publish two websites, one public and one internal. The internal one is synced from the public one and adds the restricted content on top of it. The public websites will “showcase” the Schneider Electric brand in the examples but will not make that brand available to download and use. The strong support from the Legal team helps us share the best of our work without compromising the Schneider Electric company’s interests.

Our governance helped with collaboration and collaboration on different levels. 

A single place for our entire community

We create an internal Microsoft Teams group including direct and indirect users of the system, including designers, developers, product managers, marketing, etc. This group is where the Core team makes announcements and provides support. This is a strongly opinionated decision to promote sharing and support between community members. Having all the disciplines go to the same place also promotes cross-domain discussions and sharing. Also, as our company is global, someone is always available to give help. This is especially valuable for unbalanced teams, where only some skills are available: dev teams without a designer, standalone designers working upfront a dev team, or even marketing teams crafting product visions to share with executives or key customers. This group grew from 70 people in early 2022 to over 600 in mid-2023. New people are joining every day as system adoption continues to grow. Nowadays, almost every question asked in this group is answered at least by one community member in addition to the Core team. We’ve seen developers asking for design advice, as well as designers asking for technical advice to consider in their design work or to support discussions with their devs peers. 

Federated governance 

Setting up the federated governance model opened the door to cross-business unit collaboration and restored trust in the willingness of the design system team to be inclusive of all product teams. One example is the institutional website, which had built its own design system, mostly disconnected from the previous Quartz version and other company products. A complete redesign is undergoing, building on the Core of the new Quartz and feeding website-specific assets back into the “Websites” domain foundations. Other B2C websites will then migrate to Quartz and adopt the new design language. Two associated brands, part of the Schneider Electric group, are waiting for our go signal to dedicate resources to adopt the new Quartz and contribute their own brand package. 

Iconography governance 

Another example is the new transversal iconography governance the Quartz team has proposed. Although not central to the system, icons are important to the design language. The existing pictogram library had a significant design debt, mostly caused by a lack of centralized governance. Many unpublished icon sets created by individual product teams created even more inconsistencies between the digital applications. We assembled a cross-domain, cross-cultural board of designers from several company areas that had not collaborated in the past (global brand, industrial design, digital design, legal). This board is now working together to provide a major review of the thousand pictograms in our library. The legal team is also involved in the review process to take care of the IP-related questions. The updated library will be published on new corporate platforms and promoted as the reference library for physical, digital, and packaging products. A unique, central pictogram request process is being set up with this board. The global marketing team provides the platform for managing this request globally. This cross-domain collaboration will greatly contribute to better quality, adoption, and maintenance of the new pictogram library. Product teams will benefit from the improved quality, and the clear, cross-domain, cross-cultural governance model will enable them to get the pictograms they need.

Summary and next steps

The above examples demonstrate the large-scale impact of the new governance model and mindset we have promoted. It addresses corporate-wide foundational issues and will have a long-lasting impact on all product teams. Next, we will expand our network of contributors and ambassadors to further create a close connection between the design system and the product teams. The flexible contribution model will allow fast contribution, quick iterations, and large-scale sharing and adoption.

Consistency and efficiency

Our strategic product decisions led to improved consistency and efficiency: – We guarantee a common visual language and hierarchy for 95% of our products with a Core/Domain/Facet architecture that shares the same design tokens foundations. – We offer clear and efficient contributions by aligning the contribution model with the system architecture. – Quartz speeds up the design-dev handoff and ensures the consistency between design and dev through a strict policy of aligning Figma and code APIs. – We reduce the learning curve by aligning our guidelines and assets with established web standards and APIs. – We empower product teams to control system version updates by embracing the Semantic Versioning principles and providing automatically generated release notes. – We increase contribution efficiency for Domains and Facets by enabling decoupled releases that allow faster iterations than the Core. – Quartz speeds up design and development by providing unified semantics across the system through common design tokens and ready-to-use templates. – Associated brands without a design system will benefit from all the aforementioned benefits by adopting Quartz and quickly creating their brand identity package.

Most significant positive impact

We have achieved significant success in building a governance model that addresses the complexity of our large-scale organization. By convincing key stakeholders to advocate for the design system across their business units and invest resources into Quartz contributions, we have made a collective effort to improve our design system. This ultimately leads to an increase in the overall quality of customer-facing products.

Evidences

Even if we are at the beginning of our journey, we already have collected promising feedback and metrics to evaluate our governance and design system impact. 

Testimonials 

• ”This is an upgrade from where it started. This now looks like software designed for the 2020’s and not the 2000’s. I like the look, feel, and intuitiveness of this design.” — Schneider Electric’s customer and software end-user 
• “Quartz Open is easy to use and saves me much time (I build ten screens in a couple of hours). It improves the internal consistency of my application and provides a simple, refined, and clear visual language.” — Alice B. UX Designer and Quartz user 
• “Using the Quartz Design System really sped up our development workflow by two months. The flexibility of the library helps us achieve our goals very easily. The UX/UI guidelines were easy to reach, understand, and implement. Thank you for this great initiative.” — Guillaume B. , Lead Developer and Quartz user 

Key figures

Full AA accessibility compliance +10% in Accessibility score with AA compliance +30% development efficiency