Managing and Improving the Experience for a Suite of Security Services

Managing and Improving the Experience for a Suite of Security Services

For over a year, I maintained and improved 2 major dashboards for a top cybersecurity firm. This work included crafting a modular design system, transitioning the firm's design team from Sketch to Figma, and designing and validating new features.

arrow up icon

Kudelski Security

Dashboard Design
01

Context & Discovery

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Heading 1

Heading 2

Heading 3

Heading 5
Heading 6

Heading 4

This is Heading 1

This is heading 2

This is Heading 3

This is Heading 4

This is heading 5
This is heading 6

bullet point

  • adfasdhfkja
  • akjdsfkja
  • asdfjkasdk;fjhasf

bullet point

  1. akdfal;jadf
  2. asdfjkha;skdf
  3. asdkfja;skldfjas;
  4. akdfjas;dklfjlsa

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Bold text

Header

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila! Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The products I worked on

The majority of my work with Kudelski existed within their two core products MSS and Secure Blueprint.

Kudelski's MSS (Managed Security Services) Dashboard is a vital product for their clients. Kudelski's global clients, mainly CISOs (Chief Information Security Officers), security managers, and security analysts, needed a centralized portal to understand the status of their Kudelski Security MSS services and overall security posture. The MSS Dashboard communicates the monitoring of different data points, surfaced security threats and how a client can work with the Kudelski client management team to resolve potential security incidents in a timely manner and much more. Ease of use for the MSS Dashboard user can mean the difference in a minor security threat to a major incident and my team was always searching for a way to enable users to view and interact with relevant security data.

Secure Blueprint is survey management tool built to enable Kudelski's clients, often CISO (Chief Information Security Officers) and security analysts to connect the maturity of their organization's cyber security program to the needs and investments of the business. The product allows users to share robust security surveys to collect and visualize the perspectives of each security leader in an organization to avoid an Excel spreadsheet nightmare and save precious time and potential confusion.

My team

I worked closely with the Senior Director of Global Security Strategy at Kudelski, a Senior Product Owner and various other Kudelski team members to manage design work and provide value through updates and improvements to the UI & UX

Design guidelines for Kudelski products

Throughout the enagement with Kudelski, as we reworked existing features and designed innovated functionality, I kept these questions in the back of my mind to validate the work I was doing against Kudelski's expectations for a quality user experience.

Beautiful – Is it finely crafted and presented?
Functional – Does it seamlessly connect different offerings?
Robust – Is it able to handle heavy customer usage?
Flexible – Can it meet different consumer needs?
Quick – Can it respond to customer inputs rapidly?
No items found.
02

Process

Reaching alignment through Design Sprints

In August of 2020, myself, a product manager and facilitator performed a Design Sprint with Kudelski to rethink the MSS portal to

  • provide a frictionless and beautiful user experience
  • include greater user visibility into various Kudelski security activities
  • provide an event-driven workflow for clients to better enable them to respond to security cases and incidents in a timely and effective manner
  • highlight client's security posture in a digestible use case management dashboard

We spent the first two days going through various discovery activities to drive to the root of the goals and create collective clarity on the vision. The next three days, I rapidly designed a prototyped that accomplished the goals established in the beginning of the week. During those three design days, I allotted for a round of feedback to ensure we were meeting client needs. At the end of the week we had a validated prototype.

"It's Breathtaking. Good Job" our key stakeholder said at the end of our Design Sprint.

Creating and utilizing a Design System

In all of my products, I create a design system for personal organization and to ensure alignment and consistency for the development team.

Sketch to Figma Transition

My agency had been working with Kudelski for over 3 years using Sketch and Invision to design and prototype. In early 2020, I advocated for a change to Figma as our primary design tool because of the the speed and modularity with which I would be enabled to design, the collaborative nature of the tool and the developer tools and documentation ability, to name a few reasons. After the Kudelski team agreed to the change, I spent weeks prepping the various files, migrating and updating the design system in Figma to enable consistent and quick future designs.

Prototyping & Validation

Throughout the course of my time working with Kudelski, I designed many new pages and features within the MSS dashboard and Secure Blueprint. When I received a request I always began with physical sketches or lo-fidelity concepting to visually share and validate my ideas. As I received feedback, I created higher fidelity clickable prototypes so the Kudelski team was able to interact with and test the new features before beginning the development process.

User Research Activities

I performed over 12 user interviews and usability tests with Kudelski's product users to ensure the design and overall strategic product direction was meeting user needs and increasing value.

No items found.
03

Outcomes

Some of the Features I Designed
  • Designed a Use Case Management tool to help users understand the use cases for security activities and to communicate the value of sharing data with Kudelski.
  • Designed a view that filters relevant and enhanced dashboard data by different data source types to surface relevant information with specific sectors of a business such as Operational Technology or Cloud Technology.
  • Redesigned the onboarding flow to accommodate Kudelski's integration with a new authorization system.
  • Designed a Threat Monitoring view so users are able to see the activities Kudelski is performing behind the scenes to reduce the possibility of security incidents occuring.
  • Redesigned the Security Incident Management Panel to include commenting, an activity log and clearer prioritization and action oriented design to help users navigate to the important steps needed to triage cybersecurity scares.

Results & Learnings

Working with Kudelski taught me how to engage with complex industries that I have little to no background knowledge in. Most designers aren't familiar with the ins and outs of cybersecurity, but by constantly asking questions, researching and speaking with users, I was able to understand the depth of my client's needs.

I will never be afraid to ask questions or to sound unintelligent, because I would have never been able to design features that drive value if I didn't properly understand the business needs. I have and will continue to encounter many more design problems that I don't directly relate to or naturally understand and being curious and willing to investigate is at the core of designing user-centered, quality products.

No items found.
04

Artifacts

No items found.