Scope Security - OmniSight UI Enhancements
Scope Security is a healthcare cybersecurity company that created it's own detections for threats to hospital infrastructure and internal systems (i.e. - electronic health records, medical devices, and administrative access). Their client-facing UI, OmniSight, was to be used by the Security Operations Center (SOC) to assess Anomalies and determine whether or not they posed a viable threat to the hospital ecosystem to be investigated (Investigations), and provide follow up guidance to the hospital (Escalations).
Table Uniformity Across Tabs
The OmniSight UI had some quite advanced features, including Drop Zones that functioned across multiple browser windows (thanks to our Senior Frontend Engineer, who rebuilt the FE from scratch in 2021). When I joined Scope in May of 2022 my goal was to create a DesignOps workflow and smooth out any wrinkles in the OmniSight UI.
Anomalies Tab. The Anomalies tab was quite complex - we had to pop open a drawer of details for each anomaly, but also categorize them as New or Reviewed.
Drop Zones on Pages
The Anomalies and Investigations pages had Drop Zones, implemented with React, which triaged the Anomaly: Creating an Investigation promoted the incident to the Investigations tab, Closing as False Positive or Resolved marked the anomaly as closed and inactive.
Anomalies Tab with all dropdowns collapsed, and a single Anomaly selected for drag and drop.
Investigations Tab. Similarly the Investigations Tab had a Drop Zone for creating an Escalation from an Investigation.
Investigations Tab. Each Investigation could have multiple Escalations associated with it, and Escalations could be in two states: Published or Unpublished. It was possible that a single Investigation could have more than one type of Escalation attached to it (or no Escalations at all!), so I had to come up with an icon hierarchy for this eventuality. Using Material UI icons, I built a system that allowed for us to communicate visually which Investigations had Escalations, and of what kind.
Escalations Tab. Escalations could be Acknowledged or Unacknowledged - an Acknowledged Escalation got an assignee and a timestamp of acknowledgement.
Escalations Tab. Escalations could be filtered by Acknowledged or Unacknowledged. This was a simple dropdown with no iconography embedded.
Investigations Detail Pages
The Investigations Detail Page - where we see all related details of an Investigation - is a complex one. There is a lot of information to display, from the description to any child Escalations and original parent Anomalies and a case log of comments made by Security Analysts. The focal point on the right side of the page is a caret shape taken from the Scope Security logo which acts has a handle to pull open a side drawer, housing an audit log of all activity on the Investigation in the second image below.
Investigation Detail Page. The Anomalies section has a sideways scrolling table that is reused from the Anomalies Tab (hence the overflow on the right hand side).
Investigation Detail Page. Side drawer is expanded to show audit log ("Investigation History").
Investigation Detail Page. This is a modal that will display if a Security Analyst tries to close the Investigation by changing its status in the header bar above from OPEN to any type of CLOSED status (False Positive, Risk Accepted, Resolved).
Escalations Detail Page
At the time that I joined Scope, there was not an Escalations Detail Page. The goal was to create something similar to Investigations in terms of functionality, but altered to reflect that further step along the chain of assessment of the threat: the parent Investigation's description was included, the Guidance section contained the body of the Escalation instructions, with further comments to be added for expansion of details. Finally, files could be uploaded to an Escalation (future feature). Escalations would also have their own audit log using the same Scope Caret and side drawer.
Escalation Detail Page. This differs from the Investigation Detail
Escalation Detail Page. Side drawer is open to show audit log ("Escalation History").
