How Graphiant's Application of Atomic Design Cut Network Deployment Time in Half
We introduced a modular approach to enterprise network configuration that drastically simplified rollout.
I directly contributed to web portal design using a UI library in Figma—prototyping new features, conducting user interviews, and writing user stories to keep our design team unblocked. Throughout the process, I built a hypothesis-driven design practice, ensuring we demoed our routine experiments and distilled what we learned into actionable insights.
Our D3.js experiments were developing nicely, but when it came down to connecting every device, link, and site in an enterprise network—our underlying setup was brutally manual. Long, manual onboarding didn’t just waste engineering hours—it slowed the entire sales cycle.
We started with a CSV Upload feature where admins could dump all their IP addresses, VLANs, and firewall rules. It became clear that mismatched columns, missing fields, and error handling undercut the entire time-saving premise and, while it would make development faster, our portal UI library would not make work easier for our users.
We later began mapping out criteria for a new Policy Tags feature—basically a three-level structure (L0, L1, L2) for region, domain, and site. The user was to attach rules at each level, dividing the network into neat zones. This worked well for firewall policies, but the equipment settings didn't map effectively in a small hierarchy, so we ditched that part of the model.
Atoms are your most basic fields or directives, like an IP address (192.168.1.10), a subnet mask (/24), or a circuit name (CLE-HQ-Circuit-1). By keeping these granularity of this information atomic, you can define them once and reference them everywhere.
Molecules group related atoms into cohesive configuration blocks—like a these Circuit settings. If atomic values (ie CLE-HQ-Circuit-1 or Comcast) change, the molecules defined by those atoms are updated, saving you from combing through multiple device configs.
Organisms are multiple molecules named as policies, rules, and device settings. Our workbench allows users to deploy more consistently while retaining the ability to trace every local deviation back to its underlying atoms or molecules. This ensures custom configuration remains visible and controlled, rather than lost in a sea of one-off exceptions.
Templates combine one or more organisms into a full device profiles—for example, connectivity is managed in HQ-Gateway-Profile and routing in HQ-OSPF-BGP-Fallback bundling WAN/LAN molecules, firewall and BGP organisms. Deploying a new site then becomes as simple as selecting the relevant template—no more copy pasta.
Cut onboarding to ~3-4 weeks, giving new enterprises near-instant payoff.
Roughly 40% fewer support tickets related to manual misconfigurations.
Reduced total cost of ownership (TCOS) by up to 67% compared to MPLS.
Finally delivered the D3.js topology that displays real-time, trustworthy visibility.
Everyone aligned on the mental model, minimizing repeated work.
See more screens here
