Redesigning A Cyber Security Portal

Overview

Project Summary

As one of two designers, I helped deliver over 330 screens for a revamped MVP portal in six months. The project included rigorous user testing to meet user needs, tailored the interface for diverse personas, and closely followed client requirements for a customized solution. Our collaboration ensured an efficient design process focused on functionality and usability, delighting stakeholders.

Project details

Role: UX Design

Tools: Figma, Jira, Miro

Platform: desktop web, mobile web

Team: 2 UX designer, 6 developers, 1 project manager

Timeline: 6 months

Problem

The current security portal presents significant usability and design challenges that require immediate attention. Stakeholders have identified several areas for improvement to enhance user experience and overall functionality.

A comprehensive redesign plan will align the portal more closely with user needs and stakeholder expectations, resulting in a more effective security solution.

Solution

The proposed design focuses on creating a user-friendly portal that prioritizes an improved experience for users while integrating advanced detection tools. This portal will serve as the backbone of a comprehensive cybersecurity program tailored specifically to the client's unique requirements.

Final design

Research

Identifying

In our research phase, we identified 8 overarching themes that surfaced through all the stakeholder and user conversations. These themes provide a way to summarize the major problem areas of the product based on the patterns identified while uncovering opportunities to further explore in the next phase.

  1. Unsearchable data: Across the portal, searching for information is slow and frustrating as results are limited and often entail manually entering requests.

  2. Hidden information: Key information is often hidden behind links, not fully visible in context, or only found in reports (requiring exports)

  3. Lacking flexibility: The portal doesn’t integrate with desired client tools, causing multiple workspaces and duplicative data entry.

  4. High touch dependency: Clients rely on analysts to access necessary information as well as complete vital tasks in the portal.

  5. Generic and impersonal: Portal is not personalized to address unique role needs, with little to no opportunities for customization based on user needs.

  6. Slow and unreliable: The portal loads slowly and doesn’t always work properly due to bugs and syncing delays.

  7. Ineffective collaboration: Tools used for collaboration lack notifications and/or require extra steps to ensure both parties are on the same page.

  8. Confusing interface: Unclear wording, information overload, and inconsistent interaction patterns make it difficult to use the portal.

These themes will guide our next steps, helping us prioritize areas for improvement and the development of user-centered solutions.

Explorations

Iterations

High-fidelity mock-ups supported our agile workflow, backed by a design system for consistency and accessibility. We designed foundational pages for three personas—Client Analyst, Client Admin, and Network Engineer—tailoring interfaces to their needs while ensuring visual coherence.

Road blocks

The team conducted an in-depth exploration of various technologies, leading to meaningful discoveries of tools intended for integration into the portal. Throughout this process, several roadblocks emerged during the exploration and development phases. One significant challenge was related to the chat feature, which presented technical constraints around customization options.

Initially, the design team developed a concept for the chat feature but soon realized its incompatibility with ServiceNow, the chosen technology for our implementation. This prompted further discussions on alternative management strategies for the chat functionality. Ultimately, the team decided to pivot to ChatBeacon, adopting a more streamlined design that retained familiarity and satisfaction for our current customer base. This solution aligns better with our overall objectives while maintaining usability.

Build

Validating design against current users

For six months, the design team rapidly created prototypes three sprints ahead of development. They focused on MVP screens and what was ready for development. Prototypes were made for three home screens, Onboarding, Org Profile, Settings, Incidents, Alerts, Assets, and Chat, totaling over 300 screens.

Because users spend a long time on the portal, the team designed it mainly in dark mode, with an option for light mode. During development, we held User Acceptance Testing (UAT) sessions with customers to gather feedback on various features, including those beyond MVP.

All participants were enthusiastic about the new portal and provided valuable suggestions for future updates.

Outcome

Impact

  • The portal serves 800 clients in 60 countries.

  • Usability tests from external companies were all favorable.

  • Stakeholders approved the next phase based on positive feedback.

  • The product was showcased at Google Cloud Next 2023.

  • The new portal helped renew existing contracts and is expected to boost future contracts.

  • The product was designed for future data and AI integrations.

Metrics and KPI

  • 99.9% Uptime of all supported portal features

  • >70% of Portal Users use the Query Builder

  • Decrease of 50% in perceived False Positive Rate.

  • Customer Satisfaction Score (CSAT) >80

  • Net Promoter Score of >65