Design System Expansion
Design Systems
Expanding the Cisco UI Kit for Security Insights
Cisco’s Security Insights platform was built on the Cisco UI Kit Design system. However, after system deprecation, it became more important for me to document any new UI components used in features for the development team. Most new designs required specified interactions for use cases based upon project and role scope for the platform.
I created a Figma Design Library file for the development team to reference. In addition, close communication with development on GitHub issues/pull requests and copying information to React Storybook set the team up for success in better understanding our evergrowing design system expansion.
The expansion of this Design Library has resulted in cross-functional teamwork with various Cisco internal tools teams and UI standardization for Certificate Compliance within Cisco’s Security & Trust organization.
PROBLEM
How might we best document and communicate evolving UI components for the Security Insights Development team?
Introduction of Left Navigation Panel component
RedLine Guidance in Figma Design Library File
Table Expansion for Build Environments
Solutions Visual Graph
Empty State Assessment
UI Component Description with Specifics – Cards
GitHub issue explanation of new expanded filter design
