Figure 8 Design System
Role
Product Designer
Collaborators
Mimi Chen, Sae Bom Choi
Company
Cisco
Tools
Figma
Project Overview
Figure 8 is a design system utilized across two of Cisco’s customer experience platforms: CX and PX Cloud.
There was a significant gap between the documentation and actual implementation of the component library. Additionally, housing the design system in a Figma file posed challenges in maintenance accessibility.
Project Goals
Streamline the design system by:
assessing components for scalability by removing unnecessary variants.
establishing clear design standards and patterns to enhance consistency.
documenting component interactions and guidelines for easy reference by designers and developers.
Goal #1
Migrate the design system from Figma to a dedicated website, serving as a centralized hub for designers and developers.
Goal #2
Process
Phase 1
Compared implementation of the component library to the documentation in the design system to identify which variations needed removal or modification.
OLD - Implementation of the alert component in the component library missing variations.
NEW - Modified component spec of the alert component in the design system.
Referenced other public design systems to compare component behavior and taxonomy.
Updated the taxonomy based on research of industry standards and what made sense according to our products' specific use cases.
Created component interaction specs which outlined optimal design patterns, correct usage, interaction details, and accessibility documentation.
Reviewed component interaction specs with the design system team in weekly spec reviews to gather feedback and iterate.
Shared component interaction specs with the engineering team to identify any challenges or limitations in development.
Collaborated with the visual design team to finalize the component design.
Continued to closely engage with the engineering team after the design handoff to ensure proper implementation.
Phase 2
After all component interaction specs were updated and scaled, we created a dedicated website for the Figure 8 Design System where all design specs were published.
Outcome
Reduced design and development time by scaling components and establishing standardized patterns.
Provided an easily accessible centralized hub for team members from different disciplines to access the most up-to-date information on Figure 8 component interactions and usage guidelines.
Lessons Learned
Effective communication and collaboration between visual designers and developers are essential for the success of a design system project.
Continuous iteration and feedback are crucial for maintaining and evolving the design system over time.
Documentation is key to ensuring successful adoption and implementation of the design system across teams.
Next Steps
Continue to iterate and evolve the Figure 8 Design System based on user feedback, evolving business needs, and emerging trends.
Expand the design system to support mobile and responsive design.