Summary
I spearheaded a comprehensive overhaul of our design system, focusing on key issues like component categorisation, usage documentation, and availability. By re-categorising components based on usage and documenting their applications, I streamlined the design process and enhanced consistency. A thorough review and consolidation of components reduced redundancy, optimised performance, and improved usability.
Creating a centralised documentation repository ensured uniformity, improved resource accessibility, and facilitated better collaboration and onboarding. Implementing a token-based solution for our multi-brand design system enhanced scalability and consistency. Close collaboration with developers ensured seamless integration.
Addressing component detachment through trend tracking, naming convention alignment, and stakeholder research resulted in a 78.67% reduction in detachment rates and a 27.58% increase in design system adoption, reducing component files from 120 to 70 and cutting maintenance time and costs. These projects underscored the importance of systematic documentation, thorough audits, and effective collaboration between designers and developers for system efficiency and consistency.
Planning and Auditing
Introduction
In my recent project to plan and audit a design system, I identified several key issues that needed addressing to establish and streamline the design process and improve overall consistency.
Component Categorisation:
Components were initially categorised based on specific scenarios, leading to fragmentation. This hindered the ability to see components in a unified manner and caused inconsistencies in their application.
Usage Documentation:
There was a lack of comprehensive documentation detailing where each component was used. This made it difficult to track and manage the components effectively, leading to potential redundancies and inefficiencies.
Component Availability:
It was unclear which components were available in the development library, resulting in confusion and delays during the design and development process.
Process
I undertook a project to plan and audit a design system, focusing on categorising components based on their usage. I identified where each component was used and documented all components and their variants in an Excel spreadsheet. To ensure clarity, I created a glossary and outlined whether each component was available in the development library.
Results
This structured approach streamlined the design process and improved consistency across the project.
COMPONENT CREATION AND OPTIMISATION
Introduction:
A thorough review of the design system revealed significant redundancy and fragmentation, with many components having similar features and functionalities.
Components were scattered and lacked consolidation, making it difficult to manage and utilise them efficiently. Additionally, opportunities to optimise components for performance and usability were identified but had not been previously documented or addressed.
Process:
I conducted a thorough review of components across the Central Design System (CDS) to identify those with similar features and functionalities. I compiled and grouped these components into a single file, ensuring a consolidated view of the design system. After analysing our findings, we documented areas where components could be optimised for better performance and usability.
Results:
By leveraging best practices from the industry, I ensured our design system was cohesive, efficient, and user-friendly, enhancing the overall user experience and simplifying the design process.
DOCUMENTATION
Introduction:
The design system faced several challenges, including inadequate documentation, resource accessibility issues, inconsistent design standards, and transparency problems between design and development phases. These issues led to inefficiencies, discrepancies, and hindered onboarding and collaboration across teams.
Process:
Comprehensive Documentation -
All principles, processes, and guidelines related to the design system were meticulously documented.
Enhanced Resource Accessibility -
Clear and accessible resources were created for all team members, ensuring easy access to essential information.
Centralised Standards -
A single source of truth for design standards and practices was established to maintain consistency and efficiency.
Detailed Component Guidelines -
Detailed descriptions of component usage, design patterns, and best practices were included to facilitate better collaboration and faster onboarding.
Improved Transparency -
Efforts were made to ensure components were visually consistent and transparent between the design components in Figma and development components in Storybook, reducing discrepancies through ZeroHeight.
Results:
Implementing documentation has improved collaboration and efficiency through clear documentation, centralised standards, and detailed component guidelines. This enhances workflow efficiency, reduces discrepancies, and elevates product quality and consistency.
MULTI-BRAND DESIGN SYSTEM THROUGH TOKENS
Introduction:
There were a few issues I addressed in a design system that is being used across over 5 brands and over 500 developers, designers and stakeholders:
Brand Inconsistency -
Without a unified system, different brands may suffer from inconsistent use of colours, fonts, and other design elements, leading to a disjointed user experience.
Error-Prone Updates -
Manually updating design components for various brands can lead to errors and inconsistencies, increasing maintenance efforts and reducing overall quality.
Customisation Complexity -
Tailoring design elements for each brand individually can be cumbersome and inefficient, limiting flexibility and slowing down the design process.
Scalability Challenges -
Managing an increasing number of brands without a structured system becomes unsustainable, leading to inefficiencies and potential misalignment with brand guidelines.
Collaboration Issues -
Lack of standardised design elements can hinder effective communication between designers and developers, causing misunderstandings and delays.
Accessibility Problems -
Ensuring consistent accessibility standards across multiple brands is challenging without a cohesive system, potentially resulting in non-compliant design elements.
Inefficient Workflow -
Repetitive design tasks and a lack of streamlined processes can slow down the workflow, making it difficult to quickly implement changes or new features across brands.
Process:
Audit and Identification -
Conducted a comprehensive audit across all brands to identify components that were either new, similar in functionality to existing ones, or considered design debt.
Semantic Pattern Analysis -
Analysed the semantic patterns across all components from the audit. Initially created individual token sets for each component, but recognised this approach was not sustainable for future maintenance.
Token Creation -
Developed tokens based on brand guidelines, component structures, and a consistent hierarchy. This included defining colours, typography, and spacing.
Component Testing -
Tested the new tokens on multiple components across all brands to ensure compatibility and functionality.
Token Application -
Applied tokens to all components, ensuring consistency and scalability within the design system.
Developer Collaboration -
Worked closely with developers to integrate tokens into a JSON file, which was then linked to CSS properties applied to the components. Ensured seamless integration and maintained the single source of truth.
Storybook Testing -
Verified the correct application of tokens by testing components in Storybook, ensuring alignment between design and development.
Design Communication -
Kept all stakeholders, including designers and developers, informed about design changes and updates throughout the process.
Token Workshops -
Conducted workshops to educate designers and developers on the use and implementation of tokens within the design system, fostering a shared understanding and efficient workflow.
Results:
Implementing the token-based solution significantly streamlined our multi-brand design system, enhancing consistency and scalability. The initial audit eliminated redundant components, while unified tokens based on brand guidelines ensured a cohesive framework. Collaboration with developers integrated tokens into the codebase, validated through Storybook testing.
Workshops and clear communication fostered a shared understanding among designers and developers, improving efficiency and workflow. This comprehensive approach elevated the quality and reliability of our design system across all brands.
DESIGN SYSTEM ADOPTION
Introduction:
Component Detachment Issues:
Designers frequently detach components from the design system, leading to increased design debt. Current tools, such as Figma Library analytics, provide limited insights and fail to present a holistic view of detachment trends.
Lack of Trend Analysis:
There is no comprehensive method to analyse whether component detachments are increasing or decreasing over time.
Underused Components:
Not all components are consistently used, and there is no system in place to visualise this usage across different brands, platforms, and teams.
Filtering and Tracking:
The inability to filter and track component usage and detachment by specific factors such as teams, platforms, or brands hinders effective management and optimisation of the design system.
Cross-Platform Visibility:
There is no centralised documentation to confirm if a component exists in both design and development, leading to inconsistencies and inefficiencies.
Stakeholder Perspectives:
There is a lack of qualitative data capturing stakeholders' views on the design system, making it difficult to assess satisfaction and areas needing improvement.
Process:
Data Collection and Tracking:
Created an Excel spreadsheet to track total instances, inserts, and detachments of components on a monthly basis.
Documentation:
Recorded whether components exist in both design and development to ensure alignment and consistency across platforms.
Visual Analysis:
Developed graphs to monitor monthly detachment rates, allowing for filtering by different platform teams to identify trends and areas needing attention.
Naming Convention Alignment:
Analysed and aligned naming conventions between design and development to reduce discrepancies and improve communication.
Stakeholder Research:
Conducted qualitative and quantitative research studies to assess stakeholder satisfaction with the design system and identify areas for improvement and next steps.
Results:
Over the past year, the design system has seen remarkable improvements. The detachment rate has decreased by approximately 78.67%, indicating a significant reduction in design debt and improved component stability. Design system adoption has increased by 27.58%, demonstrating greater engagement and utilisation across the organisation.
Bug fixes and component updates have surged by 50%, ensuring better alignment between design and development, and all identified bugs are now ready to be addressed.Furthermore, by removing outdated design debt and optimising components, the number of component files was reduced from 120 at the end of 2023 to 70 by June 2024.
This reduction has led to decreased maintenance time, saving both time and costs for the business. Future steps include conducting a qualitative study with designers to gather insights and continue enhancing the design system's effectiveness.