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.

**This project is subject to strict confidentiality agreements, so only limited details can be shared publicly.

‍

🛠 Industrial Network Architecture: the Purdue Model

Imagine a factory as a multi-layered fortress. The Purdue Model is the blueprint that organizes these layers—from office networks (IT) to machines on the factory floor (OT).

Each level has a specific role: IT systems manage business operations at the top, while industrial control systems and machines handle production at the bottom. This structure helps keep operations secure and efficient by controlling how data flow between layers and limiting risks from cyber threats or system failures.

‍

👤 User Persona: IT Director

‍

🔍 Project Highlights

‍

📌 Interaction Study: Solutions for 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.

‍

#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.

‍

#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.

‍

#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.

‍

# 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.

‍

# 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.

‍

User Testing

A/B Testing Design & Validating Product Decisions

We tested our design with solution architects, engineers, and PMs to evaluate usability and decision-making efficiency. To measure usability, we focused on key tasks such as identifying threats, prioritizing incidents, and executing response actions. We tracked qualitative feedback on clarity and efficiency.

‍

Takeaways

Lessons Learned

Successful Launch & Business Impact

The table components were successfully launched in the latest product release, directly contributing to improved user engagement and data accessibility. This release aligns with business goals by enhancing workflow efficiency and driving seamless user interactions.

‍

‍

User-Centric Enhancements & Problem Solving

The design iteration effectively addressed critical user pain points, streamlining data interaction and management. Through iterative design refinements and close collaboration with cross-functional teams, the solution improved usability, ensuring a more intuitive and productive experience for users.