Designing the
Cloud Security Dashboard
for IBM Security

Overview

As the lead designer for this project, I streamlined the IBM Security analyst experience and optimized response times by crafting a user-focused dynamic dashboard. I led design efforts and spearheaded design conversations with all design, research, development, and product stakeholders. Furthermore, as a part of this project, I forged cohesive, scalable user experiences across the IBM Design ecosystem by developing a robust Figma design system library.

IBM Security provides world-class cloud security solutions, that includes consulting, assessment, monitoring, migration, deployment, hardening, and strategy, to some of the largest enterprises in the world. They had identified that their security offering at the time involved users visiting multiple 3rd-party tools and dashboards in order to understand the status of their multiple cloud environments and to generate reports on said environments. The need was clear: IBM Security's enterprise customers wanted to understand their many complex cloud environments in a dashboard that was clear, actionable, robust — a single pane of glass.

Scope & Requirements

The project was entirely fast-paced and Agile, with many processes like scoping, research, design, architecture, et cetera, all occurring in parallel. After many design discussions with researchers, technical architects, product managers, and analysts, we determined the needs and requirements for the project.

However, as my design efforts began on crafting the UX and UI deliverables, I realized the there was a problem: Sketch, which heretofore was the primary design tool, was no longer being supported. Furthermore, our Sketch design libraries were outdated, clunky, non-scalable for an organization the size of IBM. As such, I led efforts for the total overhaul of our design libraries.

Designs

Having successfully created vital IBM Design components in Figma, I jumped into the creation of the user interface and user flows. The designs were crafted in sync with user validation and UX feedback sessions.

With the new IBM Cloud Security Dashboard, analysts could see and do all they need on a single pane of glass that's been designed from the ground-up to be frictionless, contextual, information- and action-rich.

Please note that the below designs are confidentiality-compliant draft iterations of the dashboard designs.

—Design System Overhaul | Figma Components & Library Creation

IBM has an excellent design culture with deep knowledge repositories, design tool support, and rich Sketch symbol libraries. However, in 2022, the entire IBM design team moved from Sketch over to Figma — and, as such, our Sketch libraries could no longer be directly leveraged. Everything needed to be remade in Figma; that was the solution I needed to work towards.

This presented a unique challenge to me in this project: robust designs needed to be delivered in a new tool for which very limited resources existed. I needed to recreate vital IBM Carbon Design System-compliant design patterns and components in Figma that would eventually be used by the entire IBM design team — and that's exactly what I did.

I skilled up on Figma — learning how to work efficiently utilize components, variants, properties, auto-layouts, plugins — and was able to deliver rich, robust Figma libraries. The components and libraries I created would go on to be the foundation of future IBM design figma libraries.

Outcomes

  • My design efforts led to the launch of the Cloud Security Dashboard MVP in 2023.

  • A preview panel of client users responded with very positive feedback, particularly noting the dashboard's ease of use, customizability, and robustness.

  • The product is in development with a full launch aimed for this year.

  • The Figma design system library I created helped form the foundation of IBM's Carbon Design System x Figma Libraries initiative.

—Role
UX • UI • Design Systems Designer
—Deliverables
Figma Components & Library Creation • Design System Delivery & Documentation • Hi-fi Prototype