Background
The Copper design system faced significant challenges that hindered its adoption and effectiveness. Low adoption rates were primarily attributed to a lack of clarity regarding its usage, relationship with Magnetic, and component availability. Inconsistencies between the Figma and UI libraries, unclear ownership and contribution, and inadequate documentation further exacerbated these issues.
The Copper design system's relationship with Magnetic was often misunderstood, leading to confusion about which components were derived from Magnetic and which were custom-built for Copper. This lack of clarity made it difficult for designers and developers to effectively use the system. Additionally, the discrepancy between the available components in the Figma library and the UI library created further challenges and inconsistencies.
Ownership and contribution to the Copper design system were unclear, leading to confusion about who was responsible for maintaining and updating the system. This lack of clarity hindered collaboration and made it difficult to ensure the system's ongoing development. Furthermore, the absence of comprehensive documentation for Copper components and the overlapping guidelines with Magnetic components made it challenging for users to understand and apply the system correctly.
The communication of updates and features related to the Copper design system was also insufficient, leading to a lack of awareness among users. This hindered the adoption and effective use of the system. Additionally, the system request process was disorganized, with ad hoc requests and reviews frequently occurring after work had already been completed and implemented. This inefficient process contributed to delays and inconsistencies in the system's development.
Process
Audit and talking with different stakeholders
To enhance the effectiveness of use case projects, I conducted interviews with key stakeholders and conducted a thorough audit of the Copper design system. This process revealed several areas for improvement.
The design system team highlighted the need for a more structured process for system requests. They expressed frustration with ad hoc requests and reviews that often occurred after work had already been completed. Additionally, the team noted that component requests frequently arrived from product design teams after designs had been shared with engineering and implemented, which was too late in the process.
My audit identified significant gaps between Copper and the old design system, Particle, as well as issues with broken components and inconsistent product branding overrides.
Identifying areas for improvement
Based on these findings, I identified the following areas for improvement:
Collaboration: Clearly define the collaborative relationship between the design system team and product design teams, as well as the connection to the Cisco common design system.
Process and Contribution: Establish a structured process for the design system team to make updates and define a contribution model for the product design team.
Communication: Enhance communication regarding guidelines, documentation, and updates to the design system.
By addressing these areas, we can significantly improve the efficiency and effectiveness of use case projects and ensure a more streamlined design process.
Outcomes
Enhanced collaboration
The implementation of a representative model facilitated closer collaboration between the design system team and product design teams, fostering a more integrated approach to product development. By embedding a design system representative within product workstreams from the initial stages, the team was able to ensure that design system requirements were considered early and continuously throughout the product development process.
This collaborative approach not only improved the alignment between design and development but also enhanced knowledge sharing and communication. Design system representatives gained a deeper understanding of product initiatives, enabling them to provide tailored advice and support to product designers. Conversely, product designers benefited from having direct access to design system expertise, leading to more informed decisions and improved design outcomes.
In addition to the representative model, a refined contribution process was established to streamline the submission and review of design system requests. By clarifying the distinction between requests and contributions and defining different contribution levels, the process became more efficient and transparent for both the design system team and product design teams.
Communication improvements
Regular syncs with product design team leads ensured effective communication and tracking of updates and new components. These meetings provided a platform for discussing ongoing projects, identifying potential challenges, and coordinating efforts between the design system team and product design teams. By maintaining a consistent cadence of communication, the teams were able to stay aligned and address issues proactively.
In addition to regular syncs, the creation of announcement spaces and quarterly showcases further enhanced information dissemination to the product design team. These channels provided a centralized platform for sharing updates, new components, and best practices related to the Copper design system. By leveraging these communication channels, the design system team was able to ensure that product designers were kept informed and empowered to use the system effectively.
Cohesion between Copper design and developement
To foster stronger alignment between the Copper Figma components and the UI library, several new practices were introduced. These practices included weekly syncs, participation in mid-sprint demos, and the establishment of a collaborative review process.
Weekly syncs provided a regular forum for discussing ongoing projects, identifying potential issues, and ensuring that both teams were working towards the same goals. By participating in mid-sprint demos, the design system team was able to stay informed about the progress of UI development and provide feedback on the implementation of Figma components.
A collaborative review process was also established to ensure that changes made to the Figma components were aligned with the corresponding changes in the UI library. This process involved joint reviews of proposed changes, ensuring that both teams were in agreement and that there were no inconsistencies between the two systems.
Design system cleanup
The Copper Figma library and guidelines underwent a comprehensive overhaul to improve their usability and maintainability. Key improvements included:
Versioning: The introduction of versioning for the Figma library allowed for better documentation and tracking of updates. This enabled teams to easily identify and reference specific versions of the library as needed.
Changelogs: Detailed changelogs were implemented to document exactly which components, styles, or variables were added, modified, or removed in each update. This provided transparency and helped teams understand the impact of changes on their projects.
Component Identification: Components were clearly identified as either derived from Magnetic or custom-built for Copper. This information was documented alongside each component, providing clarity and context for users.
Magnetic Alignment: The alignment with the Magnetic design system was documented, specifying the version of Magnetic used as a reference. This ensured consistency and compatibility with the broader Cisco design ecosystem.
Streamlined Update Process: A more efficient update process was defined, outlining the steps involved in getting requests published and considering potential breaking changes. This streamlined the process and reduced the time required for updates.
Breaking Changes: A careful evaluation of breaking changes was conducted to identify and mitigate any potential disruptions to existing projects. Migration paths were defined to guide teams through the transition to updated versions of the library.
Library and UI Alignment: Strict enforcement of alignment between the Figma library and the UI library was implemented. Updates to the Figma library could only be merged and published after corresponding changes were made in the UI library, ensuring consistency and preventing potential issues.
Gap Analysis: A comprehensive gap analysis was conducted to identify any discrepancies between the Figma library and the UI library. This analysis helped to identify and address any inconsistencies or missing components, ensuring a unified and cohesive design system.
These improvements collectively enhanced the usability, maintainability, and consistency of the Copper Figma library and guidelines, making it a more valuable resource for product design teams.
Key Learnings
This project highlights the importance of effective collaboration, clear communication, and a user-centric approach in building and maintaining a successful design system. Key learnings include the need for proactive engagement between design system teams and product designers, early involvement in the product development process, and structured updates to ensure consistency. Additionally, comprehensive documentation, component parity, and continuous improvement are essential for a mature design system. Open communication, transparent updates, shared responsibility, and a collaborative approach are crucial for fostering a positive and productive working environment. Finally, user research and iterative design are vital for creating a design system that meets the needs of users and enhances the overall user experience.
