Siemens: Design system for SiGREEN

Project summary

Team:
SiGREEN, product team in Austria
Timeline:
Dec 2022 - Mar 2023
Project duration:
3 months
Role:
UI Designer
Product area:
Design system for desktop app
Tools & Skills:
Confidential - Under NDA

Can't spill the details of what I worked on (hello NDA!), but here's a peek into the approaches and aspects I have worked on ✨

The challenges

The primary objective involves transitioning the design system from Adobe XD to Figma and refining the organization of components within the SiGREEN design system, possibly necessitating partial reconstruction of certain elements.

Utilization of design tokens

We employed design tokens as containers for values, liberating both designers and engineers from the constraints of hex color codes. This allows designers to seamlessly switch colors without impacting other design elements, facilitated by the utilization of both Option Tokens and Alias Tokens. Our decision to adopt Design Tokens was further motivated by their capacity for referencing and reusing values, enhancing efficiency and consistency within our design system.​

As such, my responsibilities include developing design tokens that can link to pre-existing values or color codes.

Iconography

Regarding icons, our team's primary objective is to ensure effortless swapping for all users, not just the design team, without the need to navigate the icon structure to modify colors. Once an icon is swapped, its color remains consistent. The initial issue with our iconography was that when swapping icons, certain parts would display different colors than intended.

Therefore, my tasks and responsibilities involve researching optimal practices for managing various icon sizes and default colors. Additionally, I am responsible for organizing each icon's structure based on vectors, outlines, or fills, and when necessary, recreating icons to address these challenges.

Base elements and others

Numerous components, such as Base Elements and form controls, are still in development. My responsibilities involve assisting the design team in Austria with recreating these components and conducting thorough quality checks on all aspects, including paddings, margins, colors, and finer details.

I particularly focus on the naming of each component and assessing the scalability of each component to prevent issues like overflowing or lack of scalability when these assets are utilized in future designs.