XVigil --- redesigning the AI powered real-time threat monitor

The project's primary objective was the overhaul of the Infra Monitor module within XVigil, a leading product faced with challenges of usability and obsolescence in its features. Users found it difficult to interact with and interpret the module's data, and it was noticeably with inconsistent or unclear signifiers. Acknowledging the urgent need for enhancement, the started an extensive redesign initiative. This process was enriched by engaging with users and the sales team to extract critical insights. The revamp included not only the addition of new features but also the introduction of an improved navigation system, a more intuitive dashboard, and streamlined user flows for the Infra Monitor. Furthermore, a comprehensive design system was developed in Figma, encompassing detailed components, layouts, and copywriting, to ensure a cohesive and user-friendly experience.

Redesigning Infra monitor with new features

Over the course of three weeks, we employed design sprints and followed a design thinking approach to develop innovative solutions. Our primary goal was to create a more intuitive user experience and modernize the module's feature set to align with user expectations and industry standards. Additionally, the introduction of the 'Issue tracking' feature aimed to enhance user efficiency and effectiveness in managing infrastructure-related concerns. Through collaborative efforts and iterative design, the project sought to revitalize the Infra Monitor module, ensuring its continued relevance and usability for XVigil users.

Collecting requirements and learning pain points

The project commenced with a crucial initial phase focused on gathering comprehensive requirements and understanding the existing challenges faced by both the product and its users. The process of collecting requirements involved engaging with a diverse group of stakeholders, each offering unique insights that contribute to a holistic understanding of the project's scope and objectives.

The project aimed to address and rectify inconsistencies and inefficiencies within the "Infra Monitor" module's existing Information Architecture and User Flows. The overarching goal was to enhance the user experience by making the system more intuitive, reducing the complexity of navigation, and integrating new features based on the identified needs.

The requirements gathering phase was comprehensive, involving inputs from the Product Manager, self-analysis, the Client Engagement Team, and direct feedback from current users. This multifaceted approach ensured that the redesign was informed by a broad spectrum of perspectives, leading to more user-centered and effective solutions.

Defining Product Requirements

The second step of the project focused on the creation of the final Design Product Requirement Document (PRD), a critical document that consolidated all the finalized requirements gleaned from the initial phase of requirements gathering and user research. This PRD served as a foundational blueprint for validating the prototypes that would be developed and ensuring that the redesigned version of the product would not carry forward the UI problems identified in the current implementation.

Prioritized Requirements

The prioritization of requirements is a crucial step in the design process, ensuring that the most critical user needs and project objectives are addressed first. This prioritization was based on the impact on the user experience, technical feasibility, and alignment with the project's overall goals.

Build a Two-Level Site Map

The primary objective was to reduce user travel time to reach the most distant pages within the application. By designing a more efficient site map with two levels, the aim was to streamline navigation, making it easier and faster for users to find the information or features they need.

Rebuild a More Consistent and Scalable User Flow and Information Architecture

Recognizing the issues with the current user flow and Information Architecture's lack of consistency and scalability, this requirement focused on redesigning these elements to support a more logical and intuitive user journey. This effort was aimed at accommodating current needs while also allowing for future expansion and updates without disrupting the user experience.

Create a Meaningful Data Hierarchy for Clients

The redesign of the Information Architecture also aimed to establish a meaningful data hierarchy. This involved organizing and structuring data in a way that reflects the priorities and needs of the clients, making it easier for them to access and interpret the information critical to their decision-making processes.

Rebuild UI Layout for Consistency and Usability

The final key requirement was to overhaul the UI layout to ensure consistency with other modules and maintain high usability standards. This involved rethinking the visual design, interaction patterns, and overall layout to align with best practices and the cohesive look and feel of the entire system.

Challenges and Solutions

A significant challenge in this phase was balancing the need for consistency across modules with the unique requirements of the Infra Monitor module. The solution involved close collaboration between designers, developers, and stakeholders to ensure that the redesigned UI and Information Architecture would integrate seamlessly with the broader system while addressing the specific needs of the Infra Monitor users.

Ideating solutions

The third step in the redesign process of the Infra Monitor module involved ideating and testing multiple architectural solutions to identify the most promising one. This iterative process of design thinking allowed the team to explore different configurations of information architecture and user flows.

The architecture that emerged as the most promising featured standalone pages for each of the submodules: Webapp Scanner, SSL Scanner, and Port Scanner. This design decision was informed by the need to simplify navigation and make it more intuitive for users to initiate and delve into specific scans. By dedicating separate pages to start individual user flows, the architecture aimed to provide a clearer, more focused entry point for users to engage with each scanning tool.

Designing Site Map and Information Hierarchy

Webapp Scanner

The Webapp scanner was designed to allow users to easily initiate scans of their web applications, presenting the results in a manner that highlights potential suspicions or vulnerabilities, facilitating a deeper understanding of the security posture of their web assets.

SSL Scanner

The SSL Scanner page focused on enabling users to conduct thorough scans of their SSL certificates, identifying and presenting any issues related to certificate validity, configuration, or security vulnerabilities, ensuring users have the necessary information to maintain secure SSL implementations.

Port Scanner

Similarly, the Port Scanner page provided a straightforward mechanism for users to scan the open ports of their IP addresses, offering detailed insights into potential vulnerabilities or unauthorized access points, enhancing the overall security monitoring of their network infrastructure.

Concept Model Functionalities in each page in the Two Level Site map

Listing Page (Level 1 - Landing Page for Each Submodule)

Functionality: The listing page serves as the initial landing page for each of the scanner modules (Webapp, SSL, Port Scanner). It is designed to list assets and provide a summary of scan details, offering users efficient control over how they view their assets. This includes the ability to sort, filter, and search for specific assets and their associated metadata.

Quick Actions: Users can perform quick actions on assets directly from the listing page, allowing for efficient management without the need to navigate to the scan details page. This feature is designed to enhance user productivity by simplifying the steps required to manage and analyze their digital assets.

Pagination: To accommodate a potentially large number of assets, pagination is implemented to help users easily traverse through their asset listings, ensuring a smooth and manageable navigation experience.

Detailed Scan Results (Level 2)

Detailed Scan Results: This page is dedicated to showing comprehensive scan details of a selected asset. It aims to provide users with in-depth information about suspicions, certificate issues, vulnerabilities, and other relevant data that could impact the security and performance of their digital assets.

Collaborator's Conversation and Activities: The scan details page also facilitates the management and review of collaborator conversations and activities related to the asset. This feature supports collaborative efforts in addressing and resolving issues, enhancing the teamwork aspect of digital asset management.

Detailed Actions for Issue Tracking: An integral part of the scan details page is the provision of detailed actions related to issue tracking. This allows users to directly engage with and manage the resolution of identified issues, streamlining the workflow for addressing vulnerabilities and other concerns.

Wireframing and Testing Final Solution

The final step in the design process of the InfraMonitor project was to thoroughly test the final product to validate the effectiveness of the proposed solutions and ensure they met the users' needs. This testing phase was meticulously planned and executed in two distinct stages, leveraging both low-fidelity and high-fidelity prototypes to refine the user experience based on real user feedback.

Phase 1: Initial User Testing

Objective: The primary goal of the first phase was to test out solutions to gauge users' affinity towards the content priorities and their interactions with the prototypes.

Participants: Eight internal employees participated in this phase, including five who had experience with the product's older UI and three who were new to the product. This mix of participants ensured a diverse range of feedback, encompassing both seasoned and fresh perspectives.

Methodology: Five prototypes were developed, all referencing the existing design system to ensure consistency with the overall product aesthetic and functionality. These prototypes were designed to explore different aspects of the user flows and interactions.

Findings: The results from this initial phase provided significant insights. Notably, some initial assumptions were challenged. A preference emerged for hover interactions and a dedicated filter system capable of managing extensive lists of documents, pointing towards a need for efficient navigation and information retrieval mechanisms in the UI.

Phase 2: Refinement and Final Testing

Objective: Armed with the insights from Phase 1, the second phase aimed to test improved solutions that incorporated the feedback and analytics derived from the initial prototypes.

Participants: The participant pool was expanded to 24 internal employees, ensuring an equal mix of experienced and inexperienced product users. This broader, more balanced user base was critical for obtaining a comprehensive understanding of the UI's usability across different user groups.

Methodology: Based on the feedback from Phase 1, three prototypes were restructured and presented for testing. These prototypes were more refined, moving closer to the high-fidelity version intended for final implementation. Individual interviews were conducted with each participant, allowing for detailed feedback and insights into each prototype's usability and effectiveness.

Outcome: The testing process culminated in the selection of a final solution, which was then moved into production. This solution was the result of iterative refinement based on user feedback, aimed at optimizing user interactions and content accessibility within the UI.

Final UI Features

Protoyped using Adobe XMLDocument. Used and added new components, icons, from CloudSEK pattern library

Listing Page (Level 1 - Landing Page for Each Submodule)

Header-Based Main Navigation: The final design adopted a header-based main navigation approach, complemented by a left panel for secondary navigation filters and page layouts aligned with the design system's guidelines. This structure was chosen for its user-friendly navigation and efficient access to different parts of the application.

Dedicated Filters and Search System: A new component was introduced to the design system to facilitate a dedicated filter and search system, responding directly to user feedback. This system is particularly effective in environments with large datasets, allowing users to quickly find specific information, such as web apps of a certain severity grade or vulnerabilities by name.

Webapps Listing and Summary: The listing page for web apps was designed to provide a summary of vulnerability updates, including any newly found vulnerabilities from the latest scans. This page also features a "Quick add to issue tracker" button, enabling users to easily track incidents requiring attention. Additionally, the UI displays the severity grade of web apps and provides names and URLs for easy identification and access by users.

Detailed Scan Results (Level 2)

Controlling an Asset with Quick Actions: New features were added to allow users to control assets directly from the listing page. Quick actions include adding assets to issue tracking, viewing scan metadata, and accessing details of vulnerabilities found during scans. Quick navigation options were also integrated, such as the ability to go back to the listing page or navigate quickly between assets.

Comments and Activities on the Scan Details Page: The scan details page for selected web apps was enhanced to include comments and activities, improving collaboration and tracking of issues related to each asset.