Event Categorization
Arista Networks
The Project
In any given network, thousands of things can go wrong at any moment, ranging from minor issues like a slightly overactive CPU fan to critical failures such as a complete device outage. CloudVision helps users manage and detect these issues by providing a system for managing Events, alerts that highlight potential issues in the network. Users are able to set custom parameters for each event, allow them to prioritize urgent problems while filtering out less critical ones. This allows users to quickly identify which parts of their network need immediate attention and which can be addressed later.
Role - Lead UX Designer
As the sole UX designer, I was in responsible for the creative direction, from user research and concept development to prototyping and implementation. I also worked closely with cross-functional teams, including product managers, developers, and stakeholders, to create a collaborative and inclusive design process.
Tools Used
Figma and Adobe Illustrator were primarily used throughout the design process.
//Project Restriction
Project Goals
The goal of this project is to create a system that categorizes network events, assisting users to quickly identify which aspects of their network require critical attention. By organizing events into clear categories, such as Hardware, Environment, and Layer 1 (L1), CloudVision allows users to easily distinguish between physical issues and network-related problems. This structure enables more efficient troubleshooting, helping users prioritize actions based on the severity and nature of the issue at hand.
More information regarding design process and success metrics can be shared in interviews.
Final Designs and Deliverables
Workflows and mockups below have been slightly modified to show ONLY relavent mockups created by myself, and have remove any sensitive information and interactions pertaining to the other parts of the product.
Drag and Drop
A new interaction, with the help of the design team, that was created for this purpose and added to the design system.
(Interaction example created through Figma Make - For a more accurate representation of the designs, please refer to the mockups below)
Event Categorization
The main categorization workflow
Creating a Custom Category
The initial empty state users would see
Empty State - Drawer
The empty state for when users attempt to inherit a category
Adding Events
Users can choose to drag and drop items or select items from the drawer that appears
Removing an Event
Items from the list also are selectable for bulk actions
Removing Events Modal
A confirmation modal for when users attempt to remove events from the category
Removing Inherited Category
A confirmation modal for when users remove an inherited category







