Patricia Patitucci

Monitoring Flows

In this project, I designed a solution to help network engineers visualize and analyze data flows through routers, enabling them to identify traffic patterns and quickly diagnose issues. My role involved understanding the feature's use, ensuring clarity for the team, coordinating with designers, and getting hands-on with mock-ups. I also validated designs with subject matter experts and customers to refine the user experience.

ROLE

Head of UX, Principal UX Designer

DATE

2022

Overview

Network engineers are responsible for maintaining the safety and performance of corporate networks. By continuously monitoring network devices and data flow, they can detect and address issues like slowdowns, bottlenecks, or security risks, ensuring reliable and secure operations.

Problem statement

Network engineers need a simple and intuitive way to visualize data flows across routers, identify traffic patterns, and quickly diagnose issues. They must be able to see which applications and users are generating the most traffic and optimize bandwidth allocation when needed to prioritize critical services. Additionally, historical analysis is crucial for spotting trends and detecting potential security threats. An effective solution will enable engineers to resolve issues swiftly and maintain high network performance.

Process

At this fast-paced start-up, our process had to adapt quickly. The product manager would draft a technical PRD (Product Requirements Document) that I would simplify for our design team, focusing on key inputs. I worked closely with the PM and subject matter experts to gather use cases and identify competitor strengths and weaknesses.



After this, I conducted competitor research, watched demos, and explored how other industries solved similar challenges, looking for design patterns that could inform our work.



Next, I created task flows for more complex features before diving into wireframes. We iterated rapidly, holding bi-weekly feedback sessions with key stakeholders. Our team of three designers worked together in Figma, continuously refining the prototypes.



I also validated our designs with a small group of customers during stealth mode, gathering valuable feedback from real users. As wireframes evolved into detailed mock-ups, we polished all margins and elements before handing them off to the front-end team. Post-handoff, we stayed involved to ensure smooth implementation and design consistency.

Solution

Application Traffic Overview
Users can view application performance by clicking on Applications. The landing page displays traffic data from top applications, allowing comparisons between them. While the data is live, users can also analyze traffic over specific time periods. A second chart visualizes the data path, helping engineers identify potential issues.

Flow Analysis for Detailed Insights
In the Flows section, users get a detailed view of data movement through devices. Expandable cards highlight key metrics such as top IPs, applications sending or receiving the most data, total traffic, and the most-used protocols. Users can also review historical traffic patterns and assess the impact of configuration changes, tracking what was altered, who made the changes, and how it affected data flow.

Traffic Breakdown by Applications and IPs
Users can view all traffic-generating applications and IPs, with the option to drill down into specific flows for deeper analysis.

Outcomes

Customers praised the feature for its intuitive design, clear data visualization, and ease of use. The ability to review past configurations and assess their impact was considered a game-changer. This feedback validated our design approach and helped shape future iterations, ultimately improving the overall user experience.

< Back to main page

Next Project >