Management System for Cyber Defense Plans
Client: HolistiCyber
Itai Tomer, VP of Product Management and Development
"Adi effectively crafted our product's UX design. The UX and interface were meticulously planned. She delivered smart and sophisticated solutions for the problems we faced. The outcome is striking both aesthetically and in its methodical, user-centric information presentation. Our clients give it high praises. Adi was consistently amenable to feedback and adjusted the design repeatedly until we were content with the result"
The product
A new product by HolistiCyber allows Cyber Security departments and CISOs (Chief Information Security Officers) to gather all information related to cyber security risks, threats and mitigations in their organization. The system is rich in modules and features. It aids in the construction of an effective Cyber Defense Plan for the organization, it provides insights to improve the defense, it tracks the plan’s progress, and supports changes to this plan during its implementation.
Main Challenges
1
Integrate all modules and features into one solid system
2
Amaze management with a bird's-eye view of the data
My role
+ Lead the work
+ Provide full UX design
+ Point of contact for the client
The process
A
Get to know the field and the users
B
Create a solution
C
Test and reiterate
Users
We started out by getting to know our two main user personas:
Cyber security team member
Cyber security manager (CISO)
Let’s examine the manager:
Persona: CISO
Name: Mathew
Age: 53
Role: Chief Information Security Officer
Experience: highly experienced
Tools: personal computer
Work environment: works under pressure, works with higher managers and well as underlings, needs to keep track of a large data load (mental load). Multiple systems and products in place
Characteristics: used to a specific way of doing things
User journey
Locate issues to deal with (according to department or severity level)
Examine these issues, and see if they are mitigated
Edit information as needed
Weigh and mark the effect that any edit made
Back to step 1, as department and severity may have changed
Integrating the system into the user journey
The user is expected to go back and forth between three screens.
Two screens need to be examined just to go past step 1.
The business process (step 1)
Table of findings (step 1)
A finding page (steps 2 & 3)
UX Review
The business process design
With varied font sizes, it is not an easy read. Any large scale company, and especially a company with many sub-departments, will suffer diminishing font sizes and text containers. It will become difficult to see.
Any attempt to add information onto the structure results in a clutter (as seen in the image)
In sum, this display does not work well for the users.
The table of findings design
This table lacks functionality - what can a user do with the information, how ca one interact with the row?
It is unclear what is clickable
Lacking ability to support more columns
Re-structure
Iteration #1
We were expected to create a system with these three main screens. However, with the redesign of the business process, new options came to light. This new option allows a view in one glance, removing the need to switch between modules.
Iteration #2
Further research revealed that the user must see the impact of changes they make. It means they will need to be able to notice trends and simple numerical data is not enough. Hence, I have replaced the numbers with graphs. Affordances allow adjustment of each part to the user's needs.
Redesign
A tree structure to replace the business chart
To present complex organizational data in a way that’s both scalable and easy to navigate, we chose a tree structure. This approach allowed us to:
Keep the layout compact and consistent
Maintain uniform font sizes for better readability
Accommodate long names and detailed data
Support unlimited depth and width, making it future-proof for evolving needs
Table of findings redesigned
After research we made the following changes:
Tabs were added, to differentiate types of information
Background color index for severity was minimized in size
Icon on the top right allows changing the table columns on display
Easy to reach row actions using the three dots menu
Full UX/UI Design
The table of findings design
This change created great value to the users: the impact of any adjustment made to the data would be visible right away in the numbers and graphs. With a click on a row of the table, they can go in deeper, and examine the details of a specific finding.
Receiving feedback and re-iterating
We continued to work closely with the development and the product team, received feedback from clients, and made tweaks accordingly (such as expanding the search due to it’s frequent use).
We also realized that some of the modules were in fact different representations of the business structure. As seen in the screen and in close-up here, we relocated the representations of the business structure to a new top left menu. Accordingly, we tweaked the modules menu, that is on the top right.
Advanced UX/UI design
What about the second task?
While most clients loved the new design, it did not attend to the second persona’s, the manager’s, needs. So, for the second challenge, of providing a "management view" we have created and entirely different main view.
This graphically appealing view provides only high level information at first glance. However, as management may require to understand and see all details, we made use of the view we have already created, and it can be visible by a single click on a node on the graph.
