Network resource node design system

The problem

As OCI Network Visualizer was being built, the need to present increasingly complex cloud network topologies to users became a critical challenge. Without a unified design system, visualizations of network nodes and their relationships were inconsistent, making it difficult for users to quickly interpret diagrams, distinguish node types, or interact with large-scale network maps effectively. Variations in shapes, colors, and interaction patterns led to confusion, increased the learning curve, and slowed down troubleshooting workflows.

To address these challenges, a design system was needed to establish clear standards for how nodes are displayed and interacted with across both Network Visualizer and for additional services like Network Path Analyzer (NPA). By defining consistent visual patterns, interaction models, and reusable components, the design system ensures intuitive navigation, improves accuracy in interpreting network data, and provides a scalable foundation for future features—ultimately enabling customers to troubleshoot and understand their networks with greater speed and confidence.

My impact

• Researached the different types of iconography that was being used in OCI console diagrams, help documentation and sales materials to show network topologies.


• Created a common vector based node design system for Networking resources.


• Designed click interactions for nodes to display routes and other information.


• Defined the shapes, colors, and how to use the nodes for network topologies.

Meaningful results

A well-defined network resource node design system significantly increased development velocity by providing a standardized library of visual and interactive components that could be reused across OCI Network Visualizer and NPA. Instead of engineering teams repeatedly solving the same design and interaction challenges for new features, they could leverage the existing node library with confidence that it was consistent, scalable, and user-friendly.

This consistency eliminated redundant design and development work, reduced integration errors, and allowed teams to focus on building feature-specific functionality rather than reinventing core visualization patterns. As a result, new features that required node displays or interactions were delivered faster, with higher quality, and with a cohesive user experience across products—ultimately accelerating innovation and strengthening customer trust in OCI’s network tooling which is covered in OCI Network Visualizer documentation.