Haewon Song

Enchanted Design System

Enchanted Design System is a comprehensive collection of reusable design elements and components created for HCL Software. It ensures consistency, cohesiveness, and user-friendliness across HCL's digital products while promoting efficiency and scalability for design and development teams.

My Role

Libraries and Component Designer, Accessibility Audit

Team

2 Senior Designers, 3 Lead Designers, 3 Developers, 2 Product Managers

Year

2023-2024 (Continuous refinement)

Duration

1 year

Problem Statement

Before the design system was introduced, HCL's digital products suffered from inconsistent interfaces and disconnected branding. Additionally, the absence of reusable components led to inefficiencies, with designers repeatedly creating similar interfaces from scratch. This prolonged the design process, increased errors, and delayed product launches.

Problem Statement

Outcome

I used Figma's component properties and collaboration features to create standardized design elements and components for the HCL Enchanted Design system. This significantly increased uniformity across products, decreased design time by approximately 30%, and ensured a seamless, user-friendly experience across all HCL digital portfolio and platforms.

Outcome

Typography library

I developed a typography system featuring Inter, Helvetica Neue, and Sans-serif font families with standardized font weights for consistency.
Typography tokens are structured within the design framework, allowing scalability and flexibility, including support for size variants and adaptive text styles.

Color library

Created a base set of color variables (primitives) integrated into themes to ensure consistent color usage and effective management.
Developed theme-specific color tokens with clear, descriptive names to provide context for different design layers.
Enhanced the color system to meet accessibility standards, ensuring contrast ratios align with WCAG guidelines.

Elevation (Shadows)

Created set of shadows that can control relative depth or distance between two surfaces.
Surface that is in higher elevation uses larger shadow.

Component creation

Designed reusable components and conducted accessibility audits to verifying compliance with color contrast and state differentiation (focus, hover, pressed).
Applied various Figma's component properties to streamline customization of each component in different context:
- Variants for different states (e.g., default, hover, active, disabled).
- Boolean Properties to toggle elements (e.g., show/hide icons).
- Text Properties for easy text replacement without detaching components.
- Instance Swaps for switching icons or nested elements within components.

Documentation and guideline

Developed comprehensive written documentation for the entire design system.
Created guidelines to help developers implement components correctly and assist designers in choosing appropriate components for specific scenarios.
This documentation streamlined collaboration between design and development teams, reducing errors and improving feature rollout efficiency.

Process

Design process

Creating a design system is a strategic process that requires careful planning and execution to prevent repeating mistakes.Below is the detail process how we created design system.

Design process

Creating a design system is a strategic process that requires careful planning and execution to prevent repeating mistakes.Below is the detail process how we created design system.

Atomic Design

The design system was built using the Atomic Design methodology, which breaks interfaces into foundational components: atoms, molecules, organisms, templates, and pages. This approach ensured scalability, reusability, and ease of maintenance across HCL’s diverse product portfolio.

Atomic Design

Reflection

Working on the Enchanted Design System taught me the importance of structure and foresight in creating scalable, reusable design assets. Building this system not only improved efficiency but also highlighted how strategic planning and collaboration between design and development teams can elevate product quality.
Through this project, I delved deeper into Figma features like component properties, variants, and design tokens, enabling me to create more flexible and efficient design solutions. I also became proficient in using Figma's collaborative tools, such as shared libraries and versioning, to maintain consistency across teams and products.

Working on the Enchanted Design System taught me the importance of structure and foresight in creating scalable, reusable design assets. Building this system not only improved efficiency but also highlighted how strategic planning and collaboration between design and development teams can elevate product quality.
Through this project, I delved deeper into Figma features like component properties, variants, and design tokens, enabling me to create more flexible and efficient design solutions. I also became proficient in using Figma's collaborative tools, such as shared libraries and versioning, to maintain consistency across teams and products.

Reflection

Working on the Enchanted Design System taught me the importance of structure and foresight in creating scalable, reusable design assets. Building this system not only improved efficiency but also highlighted how strategic planning and collaboration between design and development teams can elevate product quality.
Through this project, I delved deeper into Figma features like component properties, variants, and design tokens, enabling me to create more flexible and efficient design solutions. I also became proficient in using Figma's collaborative tools, such as shared libraries and versioning, to maintain consistency across teams and products.

Go Back To Top