Streamlines UI consistency, accelerates development, and facilitates easy theme updates
The Galaxy Design System
It is a decoupled approach where frontend design components operate independently of the backend, enhancing flexibility and consistency across platforms.
Role
UX/UI Designer
2022
Year
Tools
Challenge
Outcome
Responsibility
When I joined Contal as the sole designer, I was immediately tasked with the significant responsibility of redesigning multiple projects simultaneously. Without the support of a style guide or base components, I had to create cohesive designs from scratch. Upon auditing the existing project designs, I discovered that, in the absence of a dedicated designer, developers had been making their own design decisions. This led to a product that was visually and functionally inconsistent, highlighting the urgent need for a unified design approach.
After creating a design system at Contal, the outcomes were transformative and far-reaching. The design system established a unified set of guidelines and components, which significantly improved the consistency and quality of the product's user interface. This standardization not only streamlined the design and development process but also reduced the time and effort required for upcoming projects. Also this cohesive approach not only enhanced the user experience but also increased customer satisfaction and engagement, ultimately contributing to the product's success and the company's growth.
Throughout the project, I kept stakeholders continuously informed of progress and quality updates.
To ensure consistency and scalability across various platforms, I created Design Tokens managed by the Tokens Studio plugin, which was synced with GitHub.
I conducted a comprehensive audit of existing designs to identify inconsistencies and areas for improvement.
I created the style guide and base components
I made sure User Interface (UI) was built on meeting the Web Content Accessibility Guidelines (WCAG) 2.1 level AA accessibility criteria so no users are left behind.
DEFINE
How can I make this helpful for designers?
Design Tokens
I implemented design tokens within our Design System to centralize and standardize design decisions such as colors, typography, and spacing. This approach ensured consistency and scalability across multiple platforms and products, serving as a single source of truth for all design elements. By utilizing design tokens, I streamlined the design-to-development process, enabling easier maintenance of brand consistency and efficient implementation of updates across all digital touchpoints.
3. Component Tokens
Components tokens are created for few basic components like Buttons, Textbox, etc.,
Token Layers
In this Design System, I categorised the tokens in 3 layers
1.Core / Primitive Tokens
I created core tokens for styling properties like colors, border width, box shadow, font family/line height/size/letter spacing/case/decoration and dimension. Additionally, developing generic tokens in the dimension group helped to reduce the number of tokens needed for properties like size, space, and border radius, thereby enhancing the efficiency of the design process.
2. Alias / Semantic Tokens
Semantic tokens are created by referring the core tokens. This Semantic token is used as a reference value for component tokens and utilized as references for any UI elements or components that don’t have a specific component token. This feature enhances flexibility and maintains a cohesive visual language throughout your design system.
IMPLEMENTATION
How can I make this helpful for developers?
Synced with GitHub
These UI components are encapsulated into design tokens, which are named variables representing these styles (e.g., primary color, font size). I used Tokens Studio plugin to manage design tokens which was synced with GitHub. Storing tokens on GitHub was beneficial as it is version controlled, allows to work on different branches and provides varying access levels such as read or write access. A library of reusable UI components, like buttons, forms, and cards, were then built using these tokens to ensure consistency. I created comprehensive documentation within Figma to provide guidelines, usage examples, and best practices.
PLANNING
How did I organise libraries in Figma?
Seperate libraries
After start working on Design System, all components created for multiple products are in same file and started to grow bigger and ran into memory limitations. So I decided to group the components and moved into multiple libraries. This tends to scale much better.
Foundation Library: contains style guide and its token details
Global Library: contains basic components like buttons, textfield, etc.,
Product Library
By separating components/styles into different documents/libraries, only the required libraries can be enabled for the right subset of users or teams.
RESEARCH
How did I start & what did I learn?
Foundation Library
To create a design system, I started with defining the core visual and functional elements such as color palettes, typography, spacing, and icons, that form the foundational visual language.
Global components
Meanwhile I conducted a comprehensive audit of existing designs and came up with a UI component list. Then started designing reusable UI components (buttons, forms, cards, etc.) library on Figma and ensured components are responsive and WCAG 2.0 accessibility standards.
When I started, I had no idea how to organize all my components. Luckily many great companies like Carbon, Material design and Atlassian Design systems are public for me to learn from. However, these design systems were huge and served more as an inspiration rather than a guide. Also, a Design System bootcamp course really helped me to level up more on defining tokens, structuring the components and organising the libraries.
MAINTENANCE
Treat the Design System like a product
Design system maintenance is a continuous operation requiring human, time, and financial resources to evolve and mature it. As the it grows, I hope to create more standardized assets that can be reused in many ways. Integrating comprehensive and up-to-date documentation, including guidelines, best practices, and code snippets, will ensure that developers and designers can efficiently utilize and contribute to the design system. Regularly scheduled reviews and updates, informed by this feedback and emerging trends, will keep the system robust and future-ready.
As the design system slowly gets implemented, I look forward to seeing if it continues to keep the design consistent. I would love to implement a survey on how the team interacts the design system on a day to day, and how that has increased their work speed and productivity (or not).