--- title: "Comparison Model" url: "https://www.girishhegde.com/comparison-model" language: "en" --- Network Operations UX Design Comparison Model # Universal Comparison Model for Network Operations Universal Comparison Model enables users to compare any network objects - such as devices, events, incidents, topologies, or configurations - across time or context. This flexible, cross-domain feature streamlines root cause analysis, change validation, and troubleshooting by providing a unified, side-by-side comparison experience within the product. ![Universal Comparison Model UI](https://20l43wd5v0.koniglecdn.com/images/comparision-modal-home.webp) ## Goal Enable users to easily compare any network objects, incidents, or events side-by-side across different use cases in a consistent and scalable UX pattern. ## Problem Statement Users need to frequently compare network nodes, devices, incidents, or event timelines to analyze differences in performance, behavior, or configuration. However, the current product lacks a unified, intuitive comparison mechanism that works across modules, causing inefficiencies and data silos. ## Design Thinking The steps used to solve the problem 1 ### Understand the Problem * Problem discovered through stakeholder brief, user feedback * Clarified business goals and user needs 2 ### User & Market Research * User interviews, surveys * Personas or roles involved \(e.g., NetOps, InfraOps, SRE\) * Competitive analysis 3 ### Define Use Cases * Specific use cases that need solving * Edge cases or cross-domain comparisons 4 ### Information Architecture * Mapped out comparison types and entry points * Structured navigation 5 ### Ideation & Wireframes * Early sketches to explore layout * Explored variations in layout * Feedback loop from peers or stakeholders 6 ### High-Fidelity Mockups * Final UI with visual hierarchy * Icons, charts, legends, states * Accessibility and responsive behavior ## User Personas ![Network Administrator](https://static.wixstatic.com/media/11062b_953c1d4956d04539aeeed927240553fd~mv2.jpg/v1/crop/x_1398,y_0,w_2662,h_3327/fill/w_320,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Work%20From%20Home.jpg) ### Network Administrators Product: Network Observability Role Overview * Manage physical and virtual network devices. * Config backups, health checks, inventory audits. * Respond to alerts or outages affecting connectivity. Research Focus * How do they compare devices for troubleshooting? * Validate config differences across routers/firewalls? * How often do they look at metrics side-by-side? Key Insights * "We compare config files manually using Notepad++." * "I place screenshots side by side in PowerPoint." * Need config diff and metric overlay in one interface. ![IT Operations Engineer](https://static.wixstatic.com/media/11062b_539e26e6c0a9408bb07c5382979886b1~mv2.jpeg/v1/crop/x_1075,y_0,w_2458,h_3072/fill/w_320,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Remote%20Working.jpeg) ### IT Operations Engineers Product: Infrastructure Observability Role Overview * Oversee performance and uptime of infrastructure. * Use monitoring dashboards to detect anomalies. * Respond to alerts triggered by system thresholds. Research Focus * Compare metrics from different devices or time ranges? * What does root cause analysis look like? * How do they collaborate during outages? Key Insights * "I want to overlay CPU, memory, traffic across nodes." * "Everyone uses two browser tabs." * Suggested a unified panel linking metrics, logs, config. ![Site Reliability Engineer](https://static.wixstatic.com/media/11062b_fb0f45bafbba42c4a8ff5df25b168fdf~mv2.jpg/v1/crop/x_2397,y_0,w_3584,h_4480/fill/w_320,h_400,al_c,q_80,usm_0.66_1.00_0.01,enc_avif,quality_auto/Freelancing.jpg) ### Site Reliability Engineers Product: Infrastructure Observability Role Overview * Ensure reliability and scalability of services. * Monitor SLIs and error rates. * Cross-domain analysis \(infra + app metrics\). Research Focus * Correlate incidents with changes in network/config? * Compare traces or alert patterns across time periods? * What workarounds do they currently use? Key Insights * "I need to compare last week's incident with today's." * "Metrics and config diffs are missing from Splunk." * Favored timeline-based comparison with annotations. ## Use Cases 01 Compare Network Devices Scenario A network admin needs to investigate performance differences between two edge routers in different locations \(e.g., India and Germany\) during a suspected congestion issue. User Goal Identify why one router is experiencing higher latency or packet drops compared to another. Value * Identifies performance degradation * Validates hardware or config discrepancies * Aids capacity planning or upgrade needs 02 Compare Events or Incidents Scenario A site reliability engineer wants to compare two incidents triggered by high network latency — one from last week, another from today — to spot patterns or root causes. User Goal Understand if two separate incidents are related or follow similar patterns. Value * Reduces time-to-resolution \(TTR\) * Prevents recurring issues * Improves postmortem accuracy 03 Compare Network Topologies Scenario An engineer wants to compare the state of the network before and after a major outage to validate recovery and understand changes. User Goal Identify changes in connections, node states, or layout across two topology snapshots. Value * Visual confirmation of network healing * Audit trail for change management * Helps validate rollback or DR plans ## Competitive Audit ![Competitive Audit – Datadog](https://static.wixstatic.com/media/ba39b2_52b0cf1df24c433d9c1216774e3955ec~mv2.png/v1/fill/w_979,h_224,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/CA_Datadog.png) ## Flow Diagram ![Flow Diagram](https://static.wixstatic.com/media/ba39b2_10a56fcf2df44e40b88f9b482f5e85e0~mv2.png/v1/fill/w_600,h_761,al_c,q_90,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202025-07-26%20220220.png) ## Wireframes ### Compare Network Devices ![Compare Devices 1](https://static.wixstatic.com/media/ba39b2_fc9cd8373d5c43fcbc438aa569fad1c9~mv2.png/v1/fill/w_600,h_381,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202025-07-20%20114253.png) ![Compare Devices 2](https://static.wixstatic.com/media/ba39b2_5dc6b54ec0e1486296b07a2b5e0b0b0f~mv2.png/v1/fill/w_600,h_327,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/Screenshot%202025-07-20%20114239.png) * → Open "Compare Devices" from network inventory or map. * → Select Router A and Router B. * → Open Comparison view — CPU, memory usage, interface throughput, packet drop rate or any metrics. * → Time-aligned overlays with tooltips. * → In Basic information tab, compare device type, firmware version, interface settings. ### Compare Events ![Compare Events 1](https://static.wixstatic.com/media/ba39b2_453ef3063dc04650832cf62d9adf39bd~mv2.png/v1/fill/w_600,h_375,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/362.png) ![Compare Events 2](https://static.wixstatic.com/media/ba39b2_3273e39c97c34b0c9dec58a36f7f4a88~mv2.png/v1/fill/w_600,h_327,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/363.png) Go to the Events/Incidents view, select **Incident \#13456** and **Incident \#14029**. * →**Events:** Time-aligned comparison — alerts triggered, affected services, duration, severity. * →**Logs:** View key messages \(e.g., errors or connection timeouts\). * →**Configuration:** Check if any config changed between the two incidents. ### Compare Network Topologies ![Compare Topologies 1](https://static.wixstatic.com/media/ba39b2_b86b453222cb4963b76fed6da1570933~mv2.png/v1/fill/w_600,h_327,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/364.png) ![Compare Topologies 2](https://static.wixstatic.com/media/ba39b2_9e4f899e79b2405fb00713f5a65165d1~mv2.png/v1/fill/w_600,h_327,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/365.png) Navigate to the network map and choose a timestamp \(Snapshot A — before outage\), then select Comparison model. * → Select Snapshot B then view: Nodes added/removed. * → State changes \(up/down\). * → Path changes \(route updates\). * → Hover or click to inspect node properties, interface states, or visual overlays. ## Prototype * ![Prototype screen 1](https://20l43wd5v0.koniglecdn.com/images/cm-m1.webp) * ![Prototype screen 1](https://20l43wd5v0.koniglecdn.com/images/cm-m2.webp) * ![Prototype screen 1](https://20l43wd5v0.koniglecdn.com/images/cm-m3.webp) * ![Prototype screen 1](https://20l43wd5v0.koniglecdn.com/images/cm-e1.webp) * ![Prototype screen 1](https://20l43wd5v0.koniglecdn.com/images/cm-e2.webp) * ![Prototype screen 1](https://20l43wd5v0.koniglecdn.com/images/cm-e3.webp) * ![Prototype screen 1](https://20l43wd5v0.koniglecdn.com/images/cm-d1.webp) * ![Prototype screen 1](https://20l43wd5v0.koniglecdn.com/images/cm-d3.webp) 1 / 5 ![Full size prototype view]() 1 / 5