Design System
Design System
Design System
Overview
Aware that I would be joining a startup where the design lacked consistency, I took the initiative to enroll in a Design System course to prepare myself. In this chapter, I will share my experience of creating a design system from scratch and how I organize and maintain it.
My contribution
Design system & maintenance
The team
1 × product designer
Year
2023 onwards
Overview
Aware that I would be joining a startup where the design lacked consistency, I took the initiative to enroll in a Design System course to prepare myself. In this chapter, I will share my experience of creating a design system from scratch and how I organize and maintain it.
My contribution
Design system & maintenance
The team
1 × product designer
Year
2023 onwards
Overview
Aware that I would be joining a startup where the design lacked consistency, I took the initiative to enroll in a Design System course to prepare myself. In this chapter, I will share my experience of creating a design system from scratch and how I organize and maintain it.
My contribution
Design system & maintenance
The team
1 × product designer
Year
2023 onwards
Process
Intro
The concept of a design system is fascinating to me. It's not just about creating a set of UI components and guidelines; it's about establishing a cohesive framework that streamlines the design process and ensures consistency across products. As a designer, I see the design system as a powerful tool for fostering collaboration, improving efficiency, and maintaining brand identity.
As the sole designer at ContractHero, I took on the responsibility of creating and maintaining a design system along with its documentation. While it may not be perfect, it fulfills my daily design needs effectively. Moving forward, my goal is to encourage the development team to start implementing and utilizing the design system in our product.
Step 1:
Established a Team to organize all design files, including a ready-for-dev file for design-dev handover, and a design system file comprising Design Foundations, Icon library, and the Design System itself.
Step 2:
Conducted a UI inventory to identify and document the components used in our current platform, revealing a reliance on input fields, select options, autocomplete features, modals, buttons, and AG grid data tables. This informed the prioritization of components for inclusion in our design system.
Step 3:
Engaged in discussions with frontend developers to understand the source of components in the storybook, discovering a predominant reliance on Material UI. Subsequently, delved deeper into the Material UI design system.
Step 4:
Procured the MUI design system and commenced the customization process to align it with our specific requirements.
Step 5:
Established colours, typography, and token variables within the Foundations section of the design system.
Step 6:
Implemented colours and tokens across various components to ensure consistency and coherence.
Ongoing:
Perform regular maintenance, avoid excessive upkeep and focusing only on essential updates as needed. Update design tokens upon changes.
Process
Intro
The concept of a design system is fascinating to me. It's not just about creating a set of UI components and guidelines; it's about establishing a cohesive framework that streamlines the design process and ensures consistency across products. As a designer, I see the design system as a powerful tool for fostering collaboration, improving efficiency, and maintaining brand identity.
As the sole designer at ContractHero, I took on the responsibility of creating and maintaining a design system along with its documentation. While it may not be perfect, it fulfills my daily design needs effectively. Moving forward, my goal is to encourage the development team to start implementing and utilizing the design system in our product.
Step 1:
Established a Team to organize all design files, including a ready-for-dev file for design-dev handover, and a design system file comprising Design Foundations, Icon library, and the Design System itself.
Step 2:
Conducted a UI inventory to identify and document the components used in our current platform, revealing a reliance on input fields, select options, autocomplete features, modals, buttons, and AG grid data tables. This informed the prioritization of components for inclusion in our design system.
Step 3:
Engaged in discussions with frontend developers to understand the source of components in the storybook, discovering a predominant reliance on Material UI. Subsequently, delved deeper into the Material UI design system.
Step 4:
Procured the MUI design system and commenced the customization process to align it with our specific requirements.
Step 5:
Established colours, typography, and token variables within the Foundations section of the design system.
Step 6:
Implemented colours and tokens across various components to ensure consistency and coherence.
Ongoing:
Perform regular maintenance, avoid excessive upkeep and focusing only on essential updates as needed. Update design tokens upon changes.
Process
Intro
The concept of a design system is fascinating to me. It's not just about creating a set of UI components and guidelines; it's about establishing a cohesive framework that streamlines the design process and ensures consistency across products. As a designer, I see the design system as a powerful tool for fostering collaboration, improving efficiency, and maintaining brand identity.
As the sole designer at ContractHero, I took on the responsibility of creating and maintaining a design system along with its documentation. While it may not be perfect, it fulfills my daily design needs effectively. Moving forward, my goal is to encourage the development team to start implementing and utilizing the design system in our product.
Step 1:
Established a Team to organize all design files, including a ready-for-dev file for design-dev handover, and a design system file comprising Design Foundations, Icon library, and the Design System itself.
Step 2:
Conducted a UI inventory to identify and document the components used in our current platform, revealing a reliance on input fields, select options, autocomplete features, modals, buttons, and AG grid data tables. This informed the prioritization of components for inclusion in our design system.
Step 3:
Engaged in discussions with frontend developers to understand the source of components in the storybook, discovering a predominant reliance on Material UI. Subsequently, delved deeper into the Material UI design system.
Step 4:
Procured the MUI design system and commenced the customization process to align it with our specific requirements.
Step 5:
Established colours, typography, and token variables within the Foundations section of the design system.
Step 6:
Implemented colours and tokens across various components to ensure consistency and coherence.
Ongoing:
Perform regular maintenance, avoid excessive upkeep and focusing only on essential updates as needed. Update design tokens upon changes.
Outcome
The impact of implementing a design system in my team remains to be seen. Presently, our focus is on adding features rather than maintaining overall consistency. However, there is an underlying understanding among team members regarding the advantages of having a design system. They recognize its potential to accelerate workflow and uphold consistency and brand identity.
I've been exploring methods for implementing a design system within our sprints. Recently, I came across a post by Vitaly Friedman, UX Lead on LinkedIn, which outlined the key steps for launching design system components. Here are the main points:
📋 Set up a components board
🗓️ Component sprint runs for 10 days
🧱 Map impact vs. effort ← Prioritize components to work on.
🕹 Pair designer and engineer
🕵️ Run a broad discovery
🐑 Shepherding to discuss behavior, accessibility, variants etc.
🛠 Work in progress ← designer and dev work asynchronously
🥔 Hot potato process ← throwing ideas back and forth quickly
🗄 Document before launch ← design/code must exist in documentation
🚀 Sync launch ← work must be delivered in Figma and in code
I am proposing a forward-looking approach to develop the design system on a sprint basis, to be implemented alongside the upcoming epic story in Q2/2024.
Outcome
The impact of implementing a design system in my team remains to be seen. Presently, our focus is on adding features rather than maintaining overall consistency. However, there is an underlying understanding among team members regarding the advantages of having a design system. They recognize its potential to accelerate workflow and uphold consistency and brand identity.
I've been exploring methods for implementing a design system within our sprints. Recently, I came across a post by Vitaly Friedman, UX Lead on LinkedIn, which outlined the key steps for launching design system components. Here are the main points:
📋 Set up a components board
🗓️ Component sprint runs for 10 days
🧱 Map impact vs. effort ← Prioritize components to work on.
🕹 Pair designer and engineer
🕵️ Run a broad discovery
🐑 Shepherding to discuss behavior, accessibility, variants etc.
🛠 Work in progress ← designer and dev work asynchronously
🥔 Hot potato process ← throwing ideas back and forth quickly
🗄 Document before launch ← design/code must exist in documentation
🚀 Sync launch ← work must be delivered in Figma and in code
I am proposing a forward-looking approach to develop the design system on a sprint basis, to be implemented alongside the upcoming epic story in Q2/2024.
Outcome
The impact of implementing a design system in my team remains to be seen. Presently, our focus is on adding features rather than maintaining overall consistency. However, there is an underlying understanding among team members regarding the advantages of having a design system. They recognize its potential to accelerate workflow and uphold consistency and brand identity.
I've been exploring methods for implementing a design system within our sprints. Recently, I came across a post by Vitaly Friedman, UX Lead on LinkedIn, which outlined the key steps for launching design system components. Here are the main points:
📋 Set up a components board
🗓️ Component sprint runs for 10 days
🧱 Map impact vs. effort ← Prioritize components to work on.
🕹 Pair designer and engineer
🕵️ Run a broad discovery
🐑 Shepherding to discuss behavior, accessibility, variants etc.
🛠 Work in progress ← designer and dev work asynchronously
🥔 Hot potato process ← throwing ideas back and forth quickly
🗄 Document before launch ← design/code must exist in documentation
🚀 Sync launch ← work must be delivered in Figma and in code
I am proposing a forward-looking approach to develop the design system on a sprint basis, to be implemented alongside the upcoming epic story in Q2/2024.