Figure 8 Design System

Role
Product Designer

Company
Cisco

Tools
Figma

Project Overview
Scaling, standardizing, documenting, centralizing, and ensuring accessibility of a design system used by two of Cisco’s customer experience platforms: CX Cloud and PX Cloud.

The project addressed a significant gap between the documented components and their actual implementation, which led to inconsistencies in the user experience. Maintaining the system solely in Figma created additional challenges with scalability and upkeep. To resolve these issues, I partnered with cross-functional teams to align design and development efforts, improve component accuracy, and establish sustainable practices for long-term maintenance and accessibility.

Goals

Streamline the design system by assessing components for scalability, removing unnecessary variants, and establishing clear standards to enhance consistency.

Document component interactions and usage guidelines to support accurate implementation.

Migrate the design system from Figma to a dedicated website that serves as a centralized hub for designers and developers.

Audit & Gap Analysis

I conducted a thorough audit of the existing component library by comparing the implemented components to the documented specifications. This revealed inconsistencies and missing variations that caused UI discrepancies and slowed down design and development. For example, the alert component lacked certain variations that were documented but not implemented, leading to confusion among developers and inconsistent user experiences.

OLD - Implementation of the alert component in the component library missing variations.

NEW - Modified component spec of the alert component in the design system.

To prioritize updates, I collaborated closely with engineering and product teams to identify high-impact components that would improve consistency and scalability across Cisco’s CX Cloud and PX Cloud platforms. This cross-functional alignment ensured efforts focused on areas that would deliver the most value.

Research

I referenced multiple public design systems to benchmark component behaviors and taxonomy. I adapted industry best practices to fit our specific product needs and user contexts. This research informed the refinement of our component taxonomy and interaction patterns.

Interaction Design

I developed detailed interaction specifications, including design patterns, correct usage, and accessibility requirements. These specs served as a collaborative tool, reviewed weekly with the design system team and shared with engineers to ensure alignment.

Visual Design

Working closely with the visual design team, I finalized component designs that balanced aesthetics with usability and accessibility. I maintained continuous communication with engineering during and after the design handoff to address any implementation challenges and ensure fidelity.

Iteration played a key role in the process. We incorporated feedback from design system stakeholders and engineers through multiple review cycles, which helped fine-tune components and improve documentation clarity.

To streamline collaboration and version control, we leveraged Figma’s commenting features and scheduled regular sync meetings. These practices fostered transparency and quick resolution of issues throughout the project.

Website Launch

After updating and scaling all component interaction specs, we launched a dedicated website for the Figure 8 Design System. This site hosted all specifications and served as a single source of truth.

Outcome

This project enabled significantly faster design and development time by streamlining components and establishing standardized patterns. Additionally, the centralized and user-friendly platform made it easy for team members to access up-to-date information on component usage and interaction.

67

components used and maintained

100%

of designers actively using the system

Lessons Learned

  • Cross-disciplinary collaboration between visual designers, product designers, and developers ensures components are polished, consistent, and usable

  • Living, accessible documentation and clear standards reduce ambiguity and support efficient onboarding and implementation

  • Iterative feedback loops and ongoing maintenance keep the design system relevant, scalable, and aligned with evolving product needs

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