The Problem Space
I initiated the process by conducting a competitive analysis using Google's Material Design. The familiarity of M2 amongst our development teams made it a crucial point of reference, allowing me to identify successful patterns and potential areas for improvement in our own system.
M2
CLS
Design Philosophy
Consistency & Familiarity
Simplicity & Pragmatism
M2
CLS
Key Features
Components, documentation,
theming, & accessibility
Components, color styles,
& text styles
M2
CLS
Strengths
Stability, documentation, & accessibility
Legibility, flexibility & efficiency
M2
CLS
Weaknesses
Static & may require more development effort
Accessibility, stability,
& documentation
CLS Design System
CLS Design System
Outcome
The revised CLS design system, a unified language of components & principles, boosted productivity among UX designers and developers.
Timeline
Lead UX Designer
7 weeks
Tools
Process
[Research]
[Ideate]
[Prototype]
[Evaluate]
[Refine]
Reasons for Revamp
Reasons for Revamp
Reasons for Revamp
Issues
Lack of organization and clarity
Intuitive navigation & documentation
Frequent information requests
Streamlined hand-off process
Inconsistent product landscape
Optimized product experience
Goals
Recognizing the need to bridge the workflow gap between UX designers and developers, I was tasked with transforming our design system into a live and accessible resource.
Issues & Goals
Lack of organization and clarity
Intuitive & accessible navigation & documentation
Frequent information requests
Streamlined hand-off process
Inconsistent product landscape
Optimized product experience
The Problem Space
I initiated the process by conducting a competitive analysis using Google's Material Design. The familiarity of M2 amongst our development teams made it a crucial point of reference, allowing me to identify successful patterns and potential areas for improvement in our own system.
Design Philosophy
Philosophy
Key Features
Strengths
Weaknesses
M2
Consistency & Familiarity
Components, documentation,
theming, & accessibility
Components, documentation & accessibility
Stability, documentation, & accessibility
Static & may require more development effort
Static & may require development
CLS
Simplicity & Pragmatism
Components, color & text styles
Components, color & text styles
Legibility, flexibility & efficiency
Accessibility, stability,
& documentation
Issues & Goals
Lack of organization and clarity
Intuitive & accessible navigation
& documentation
Frequent information requests
Streamlined hand-off process
Inconsistent product landscape
Optimized product experience
Recognizing the need to bridge the workflow gap between UX designers and developers, I was tasked with transforming our design system into a live and accessible resource.
Reasons for Revamp
Outcome
The revised CLS design system, a unified language of components & principles, boosted productivity among internal staff members.
Timeline
Lead UX Designer
7 weeks
Tools
Process
[Research]
[Ideate]
[Prototype]
[Evaluate]
[Refine]
Outcome
The revised CLS design system, a unified language of components & principles, boosted productivity among internal staff members.
Timeline
Lead UX Designer
7 weeks
Tools
Outcome
The revised CLS design system, boosted productivity among internal staff members.
Timeline
Lead UX Designer
7 weeks
Tools
The Approach
The competitive analysis helped us in identifying the strengths, weaknesses, and areas of opportunity opportunities. As we embarked on the journey in transforming our design system, my main goal was to create a flexible yet accessible live resource for both UX designers and developers.
The competitive analysis helped us in identifying the strengths, weaknesses, and areas of opportunity opportunities. As we embarked on the journey in transforming our design system, my main goal was to create a flexible yet accessible live resource for both UX designers and developers.
General Structure
BEFORE
BEFORE
1
This structure [Main & Backup] suggests an undefined hierarchy, potentially causing confusion and navigation challenges.
This structure [Main & Backup] suggests an undefined hierarchy, potentially causing confusion and navigation challenges.
2
Missing labels on frames hinders workflow as time is spent on searching for specific design elements.
Missing labels on frames hinders workflow as time is spent on searching for specific design elements.
3
A disorganized information and visual hierarchy led to the creation of an inaccessible repository.
A disorganized information and visual hierarchy led to the creation of an inaccessible repository.
AFTER
1
Implementing a table of contents via Figma's Pages, streamlines access to the system's components, styles, and assets.
Implementing a table of contents via Figma's Pages, streamlines access to the system's components, styles, and assets.
Implementing a table of contents via Figma's Pages, streamlines access to the system's styles and assets.
2
Clear and consistent labelling for each frame facilitates quick identification, significantly improving overall workflow efficiency.
Clear and consistent labelling
for each frame facilitates quick identification, significantly improving overall workflow efficiency.
Clear & consistent labelling for each frame facilitates identification, significantly improving workflow efficiency.
3
Enriching guidelines paired with visuals and labeled diagrams empowers employees to grasp
the function & application of the system.
Enriching guidelines paired with visuals and labeled diagrams empowers internal employees to grasp both the function & application of the design system.
Enriching guidelines paired with visuals and labeled diagrams empowers employees to grasp
the function & application of the system.
Guidelines paired with visuals and labeled diagrams empowers employees to grasp both function & application.
Typography & Colors
BEFORE
1
Hidden color and typography values in Figma's styles limited accessibility, hindering workflow efficiency.
Hidden color and typography values in Figma's styles limited accessibility, hindering workflow efficiency.
AFTER
1
A comprehensive overview of all values (RGB, HSL, HEX) for colour, as well as weight and size for typography are easily accessible.
A comprehensive overview of all values (RGB, HSL, HEX) for colour, as well as weight and size for typography are easily accessible.
2
Leveraging local variables to centralize control, simplify updates, maintain consistency across projects, and ensure dynamic color schemes.
Leveraging local variables to centralize control, simplify updates, maintain consistency across projects, and ensure dynamic color schemes.
Components
BEFORE
1
The order of components within the list and the absence of labels demonstrates a lack of a clear structure.
The order of components within the list and the absence of labels demonstrates a lack of a clear structure.
Components
BEFORE
1
1
1
The order of components within the list and the absence of labels demonstrates a lack of a clear structure.
The order of components within the list and the absence of labels demonstrates a lack of a clear structure.
The order of components within the list and the absence of labels demonstrates a lack of a clear structure.
AFTER
1
Each component contains concise descriptions of its purpose, definitions of key terms, and examples of practical use cases.
Each component contains concise descriptions, definitions of key terms, and examples of practical use cases.
Each component contains concise descriptions of its purpose, definitions of key terms, and examples of use cases.
2
Each component contains clear labelling and state differentiation, enhancing interaction and navigation.
Each component contains clear labelling and state differentiation, enhancing interaction and navigation.
Lessons Learned
The Power of Information Hierarchy
The Power of Information Hierarchy
The Power of Information Hierarchy
Guidelines: Concise yet informative summaries are crucial to quickly grasp the essence of components.
Labelling: Clear and consistent labeling ensures each element is readily identifiable which assists with intuitive navigation and understanding of the system's structure.
Diagrams: Visual representations like diagrams provide valuable context and clarity, especially for complex components. They help visualize relationships and interaction patterns. Furthermore, demonstrating real-world scenarios using practical use cases helps with understanding the purpose and value of each asset.
Guidelines: Concise yet informative summaries are crucial to quickly grasp the essence of components.
Labelling: Clear and consistent labeling ensures each element is readily identifiable which assists with intuitive navigation and understanding of the system's structure.
Diagrams: Visual representations like diagrams provide valuable context and clarity, especially for complex components. They help visualize relationships and interaction patterns. Furthermore, demonstrating real-world scenarios using practical use cases helps with understanding the purpose and value of each asset.
Documentation as a Living Entity
Documentation as a Living Entity
Documentation as a Living Entity
Comprehensive Documentation: Maintain thorough documentation that includes guidelines, and usage examples. This provides a single source of truth for both designers and developers, ensuring consistency and reducing confusion.
Accessibility: Ensure documentation is accessible to users with diverse needs.
Comprehensive Documentation: Maintain thorough documentation that includes guidelines, and usage examples. This provides a single source of truth for both designers and developers, ensuring consistency and reducing confusion.
Accessibility: Ensure documentation is accessible to users with diverse needs.