Element Design System, Siemens.
Scaling and maturing Element Design System
When I joined Siemens' Element Design System team as a Senior Designer, the setup was very much developer-driven, with a team composition of 11 developers to just one designer. My challenge was to elevate the system, which was serving over 1000 projects, both customer-facing and internal within Siemens.
My task was clear: to help the system grow, make it more structured, and ensure it could easily scale.
Beyond enhancing the system's underwhelming visual design, my role encompassed creating a structured process for request handling, developing clear guidelines, and fostering a community for updates and knowledge sharing. I also focused on crafting educational material to empower users. My aim was to make the Element Design System more intuitive, scalable, and a central tool in Siemens' product development, enhancing usability and adaptability across the board.
-
Role: Sr. UX Designer
-
Tools used: Figma
-
Project Duration: 1.5 yr / ongoing
Scaling Up
In tackling the challenge of scaling the Element Design System for the diverse needs of Smart Infrastructure's various business units, we began with a collaborative workshop to pinpoint each unit's unique challenges and needs.
A key realization was that with only two designers on the team, it was impossible to address every unique need and pattern/component specificity across the diverse landscape of business units. We found ourselves in a reactive stance, rushing to meet immediate demands without sufficient focus on the quality of what we delivered. This approach was unsustainable and detracted from the overall integrity of the design system.
To address this, we identified two critical adjustments. First, we acknowledged the need for the Design System to operate at a more deliberate pace. Rushing to meet every new request in real-time compromised quality and coherence; we needed to prioritize the fundamentals, ensuring a solid and versatile baseline that could serve a wide range of needs effectively.
Second, we recognized the necessity of adding a product layer to the system. This led to the creation of the "recipes" concept. "Recipes" are essentially guidelines for product teams to independently develop features not currently covered by the design system, using its components as building blocks. This allows for the creation of product-specific solutions that are coherent with the overall design language yet tailored to specific product requirements.
This strategy not only alleviated the pressure on our small design team but also enhanced the scalability and adaptability of the Element Design System to meet the evolving needs of Smart Infrastructure.
Design Foundations for Visual Harmony
Despite a robust component base, our design system's appearance and component placement fell short. It became clear that the root issue was a weak structural foundation.
To address this, I honed in on design fundamentals, establishing a consistent grid and standardized spacing. This focus on basic principles transformed our system, resulting in a cohesive and visually appealing interface.
Maturity Boost
As the Element Design System expanded, we noticed that adding new patterns or components was disorganized.
To address this, we began auditing and organizing our Git requests into a backlog. We then engaged key stakeholders, asking them to identify the top three initiatives they wanted us to focus on.
This approach allowed us to prioritize our work effectively, tackling these key initiatives on a quarterly basis.
Community inclusion.
Recognizing the importance of fostering a thriving and informed user base, we introduced an additional layer to Element: the Community.
This new layer focuses on three pivotal aspects:
-
Onboarding: We are working in guide and familiarize new entrants, allowing them to utilize the design system to its fullest potential from day one.
-
Education: We are creating a suite of tutorials, ensuring users, be it beginners or experts, have resources to expand their skills and understanding of the system.
-
Communication: We've initiated a monthly newsletter, a weekly meeting for designers to bring questions and a monthly Hang out sessions, including developers using the system.
Example of resources created
Accessibility
Acknowledging the critical role of accessibility in user experience, we've dedicated significant efforts to enhancing the accessibility features within Element.
Key enhancements include:
-
Keyboard Navigation: In collaboration with the Siemens Accessibility department, we've reworked our components to support comprehensive keyboard interactions, thereby enhancing the navigability of our design system for users who depend on keyboard-based navigation.
-
Automated Contrast Testing: By integrating automated tests into our development process, we now regularly verify that our color contrasts meet or exceed WCAG (Web Content Accessibility Guidelines) standards, ensuring that text and interactive elements are perceivable by users with visual impairments.
After over a year of dedicated effort, we observed notable improvements in both the quality and adoption of the system.
The project earned recognition and was subsequently invited to participate in the private conference, UX@Siemens. It was at this event that I had the opportunity to present our initiatives and their significant impact. Additionally, the project won the Inner Source Award, a internal accolade at Siemens.
Moreover, our contributions to the brand's evolution were acknowledged with the winning of the iF Design Award. This achievement underscores our collaborative efforts through our design system in shaping and enhancing the brand.
Currently, we are focused on continuing to grow our pattern library, developing robust back-contribution processes, and improving our release cycles.