Cybersecurity Dashboard
2022-2024
Dashboard (DataTable/Analytics/Data Visualization)
My Contribution
Deliverables
Developed a cybersecurity solution for industrial systems to enhance protection and visibility for critical infrastructures.
Mastering the Digital Defense Dashboard
Bridge the gap between complex data and actionable insights
💻 Product Audit
⚠️ Problem
Integrating a comprehensive cybersecurity solution to enhance protection and visibility across critical infrastructure.
I was a Sr UIUX Designer on a collaborative team of 13+ engineers (7 Backend Developers, 2 Front-end Developers, 2 QA Engineers, an Engineering Manager, and Solutions Architects) dedicated to SageOne, and other 10+ developers across various teams.
My primary role was to design and refine the user interface and experience for SageOne, ensuring seamless interaction and intuitive workflows. This involved closely collaborating with engineers to implement design solutions that aligned with the technical constraints and objectives. I also worked on gathering and incorporating feedback to iterate on designs that enhanced the platform’s usability and functionality.
This project is subject to strict confidentiality agreements, so only limited details can be shared publicly.
Industrial Network Architecture: the Purdue Model
It's a framework used to organize and secure industrial networks, such as those in manufacturing plants.
This model helps in clearly defining roles and enhancing security by separating different types of network traffic and access levels.
Project Highlights
Interaction Study: Data Connection Management
🧠 Effectively managing diverse data connections within a dashboard, considering navigation, scalability, and user needs.
The most important challenge is the visual layout of information on screen devices or how the user will assess meaning and direction given the information presented to them.
# Solution 1: Separate Header List
Pros: Clear categories, simple navigation for small datasets.
Cons: Extensive scrolling for large lists, overwhelming with many connections.
✅ Use When: Limited connections per category (<25), prioritizing simplicity.
# Solution 2: Tabs for Data Separation
Pros: Distinct data pools, easy switching between sets.
Cons: Confuse users if they perceive each tab as a different data poll instead of separate categories within the same poll.
✅ Use When: Distinct categories with moderate connections, focus on specific data sets.
# Solution 3: Button Dropdown for Filtering
Pros: Convenient filtering based on criteria, user differentiation.
Cons: Extra clicks, cluttered appearance with many options.
✅ Use When: Filtering by attributes/roles, large datasets, scalability concerns.
# Considering 25-item minimum pagination
Solution 1: Best for categories with fewer than 25 connections.
Solution 2&3: More suitable for large datasets or prioritizing filtering/categorization.
✑━━━━━━━━━━
Expandable DataTable Study
Dashboard designs tackle the clutter of large datasets with expandable tables. By displaying essential information upfront and allowing users to access more details on demand, the design simplifies navigation and enhances understanding.
Table 1: Checkboxes
🧠 Enables selection of multiple rows for batch operations.
✅ Use When: Multiple simultaneous actions are common.
🚫 Avoid When: Actions are generally row-specific or if user errors could lead to severe consequences.
Backend: Process batch actions via APIs that accept arrays of identifiers from selected rows.
Table 2: Horizontally expandable table
🧠 Manages extensive data attributes without clutter by showing details on demand.
✅ Use When: The table has many columns, with secondary details not always needed.
🚫 Avoid When: Critical information could be obscured, or users might find the expandable mechanism confusing.
Backend: Dynamically handle data requests for expanded rows and optimize data retrieval to maintain performance.
✑━━━━━━━━━━
Optimizing Table Design
1. Half-Open Detail View
🎯 Objective: Provide quick access to key info while keeping users anchored within the main table view.
💡 Insight: Users benefit from referencing essential details without losing track of the broader dataset.
2. Full-Page Detail View
🎯 Objective: Enable users to thoroughly explore data by offering an expanded, detailed view.
💡 Insight: This approach suits users who need a deep dive into the information, even if it requires leaving the main table context.