User Experience for Insights EP Manager

Project Overview

The problem needing solved in this project was to find a way to effectively manage monitor thousands of networking endpoints that are physically located across the United States. Not only did the status of these devices need to be monitored, they also needed to be configurable directly from the dashboard.

‍

Project Requirements

1. A search bar to search for devices by name or IP address
2. A dashboard to quickly see a summary of all device statuses
3. A device page with configurable fields
4. The ability to launch a terminal window to the device directly
5. An open field to add device notes

1. Main Screen

The dashboard will serve as a central hub for monitoring and configuring networking endpoints. The layout would prioritize device statuses and quick searchability for ease of use. Here's the layout breakdown:

• Top Navigation Bar:
  • Search Bar: A prominently positioned search bar at the top of the dashboard, allowing users to search devices by name or IP address.
  • User Profile & Settings: A drop-down in the top-right corner for user management and preferences (dark mode, notifications, etc.).
• Device Summary Section (Main Panel):
  • High-Level Status Overview: Use a visual representation showing a breakdown of device statuses: Total, Online, Offline, Maintenance, and Error.
  • Device Status Widget: A widget for each device with key info like status (color-coded), name, IP address, and a button for more details or configuration.
  • Filters & Sorting: The ability to filter devices by status (e.g., online, offline) and sort by parameters such as IP, location, or name.

2. Device Page (Detail & Configuration View)

Once a device is selected from the dashboard, the user will land on the device detail page. This page will be divided into a few key sections:

• Device Information & Status:
  • Display essential details about the device: Name, IP address, status, and last checked time.
  • Editable Fields: Any configurable fields like device name, location, etc., with a save button.
  • Device Status Indicator: A real-time indicator showing whether the device is online, offline, or under maintenance.
• Terminal Access:
  • A "Launch Terminal" button that opens an integrated terminal window for remote access to the device, allowing configuration changes or troubleshooting directly from the dashboard.
• Device Notes:
  • Notes Field: An open text area for users to add and save notes related to the device (e.g., maintenance logs, issues, etc.).
  • Editable with timestamping functionality so users can track when changes or additions were made.
• Historical Info: 
  • Backup: Downloadable files containing historical config, changes, and restorable backup.
• Endpoint Control: 
  • Run Full and Quick Diagnostics.
  • Ability to Reboot Device.

3. Footer/Secondary Navigation:

• Help/Support: A link to documentation or help sections.
• Notification/Alerts Center: Shows any alerts related to devices or maintenance schedules.

4. Interactive Elements:

• Hover & Contextual Actions: Hovering over devices on the dashboard will provide quick options like “View details” or “Reboot device”.
• Real-Time Updates: Use a system of colored badges or alerts for instant visibility into critical device issues (e.g., flashing red for offline).

Design Considerations:

• Consistency in UI Elements: Make sure buttons, drop-downs, and text fields follow a unified style guide to avoid user confusion.
• Accessibility: Ensure keyboard navigation, screen reader compatibility, and sufficient contrast for readability.

‍