After successfully designing, leading the development and managing the Sync design system at Extron, I was asked to join Xylem and build their design system
After acquiring multiple brands and their respective software products, Xylem recognized the importance of achieving a consistent look and feel across its software offerings. In response, our goal was to develop a design system that established cohesive standards and empowered our design teams to deliver visually enhanced products more efficiently. By implementing the design system, we aimed to achieve a unified and visually appealing software experience for our users while enabling faster and more streamlined design processes.
Platform-agnostic
The Design System is versatile in its practical applications, offering a way to be used with any stack or technology. We offer guidance how to use it with most popular setups. It does come with a set of naming conventions and semantic decisions that don't have to, but can be enforced within your project.
Dependable and empowering
The Design System relies on research and expertise of a multidisciplinary team, guaranteeing a unified design platform that can be depended on. It empowers non-designers to confidently build brand-aligned, accessible user interfaces.
Living and maintained
The Design System is actively kept up to date by the Foundation team, ensuring cohesiveness and synchronicity of existing and future interfaces.
To ensure effective buy-in for the design system, I leverage my experience in developing style guides and focused on creating tangible and memorable elements. Collaborating with the marketing team, we named the design system "Metry" and developed a strong brand identity. This allowed me to successfully evangelize the concept across our global growth centers. Additionally, I formed a federated team consisting of passionate individuals from various departments, educating them on the benefits of a design system and gathering valuable feedback on the project's progress.
Our approach to building the Metry design system involved employing the Atomic design methodology, which emphasizes the meticulous description and organization of every component within the system. By implementing this approach, we were able to effectively categorize our design components into five distinct levels, each serving a specific purpose in the design ecosystem.
Basics
At the foundational level, we have the Basics category, encompassing the smallest building blocks of the project. These elements, such as text styles, buttons, icons, and input fields, cannot be further divided without compromising their functionality.
Elements
Moving up to the Elements level, we encounter more complex entities comprised of multiple atoms. These include notification toasts, data values, and input fields with buttons. While some molecules within this level can function independently on any page, they often find greater value when integrated into larger organisms.
Components
Components represent the next level, serving as truly functional parts of a page. These components are assembled from groups of atoms and molecules and can include significant elements like navigation menus, sidebars, forms, and data-rich pop-ups. Organisms within this level can become intricate and may even contain smaller organisms, mimicking the natural world's complexity.
Templates
At the penultimate level, templates constitute pages without real content. These layouts bring together various organisms to form a cohesive website structure. They provide a standardized arrangement that can be utilized for multiple pages.
Pages/Features
Finally, at the highest level, we have Pages/Features. By incorporating content into templates, we can generate specific pages. For example, a Wikipedia article can be based on a template consisting of organisms like a menu sidebar, header, footer, and article body. Each real-content Wikipedia article utilizes the same template structure.
It was also critical that we audit our current software to identify needs and develop an hierarchical list of requirements. This gives a good roadmap on what elements and components to build first.
Tier 1 Products are existing applications that have a generous release cycle with no scheduled updates and tend to be smaller in scope. These applications are good for the initial development of the basics, elements and some smaller components in our design system.
Tier 2 Products are new applications, big or small. These "green-field" applications make it easy to build out the larger sections of our design system (Components and Templates)
Tier 3 Products are existing applications that have unique or new features that have to be accounted for. These applications tend to be a heavier lift or the design system.
It was also critical that we audit our current software to identify needs and develop an hierarchStyle is a distinctive appearance—it defines the look and feel of our products. Style consist of the base elements such as color, typography, voice, spacing and iconography.
I goal was to make Xylem’s products pleasant to use. The interfaces must minimize frustration and present information in an intuitive manner.
We also sat out to improve our products readability: Xylem's product interfaces must be easy to understand, consume and act on.ical list of requirements. This gives a good roadmap on what elements and components to build first.
Color has multiple roles within our products. We use color to reflect the Extron brand and give our products consistency. We also use color as a tool to assist users through the interface.
Text is the primary way that users digest content and accomplish work, so it’s important to use good typographic principles to establish a clear visual hierarchy and to maximize legibility.
Space is everywhere. It rivals color as the most ubiquitous aspect of screen-based design. Space can be used to both separate and connect elements in design. Wider spaces separate elements from each other and narrower spaces combine elements to reveal relationships between them.
Numbers are a big part of our interface. We need a typeface and styling that aligns with our goals of being readable and efficient. Proportional and lining numerals are ideal for data charts.
Components & Patterns are at the heart of the System. All the previously mentioned elements will help us to create them and deliver a consistent experience.The components are our LEGO blocks. They’re used in Sketch by designers, and directly in the code by developers. Their functional behaviour must be specified.
As for the patterns, they are the building instructions that will allow us to use these components in a logical and consistent way, across all the products.
We had to find the right balance between strictness and flexibility: a stringent system might repel designers and developers who will not want to use it. Conversely, can we still speak about a Design System if this one is too loose?
A strict system will have a comprehensive and detailed documentation and will be fully synchronized between design and development. There will be a strict process for introducing a new pattern in the System. A strict system should be very broad in order to cover the majority of cases the teams may encounter.
A loose system will leave more space for experimentation. The System is here to provide a framework for the teams while preserving some freedom. Designers and developers are free to use it or not, regarding their particular needs for their product.
