Designing the
Cloud Security Dashboard
for IBM Security

Summary

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.

IBM Security 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. With direct client feedback, 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.

In order to deliver this experience, I led design efforts and spearheaded design conversations with all design, research, development, and product stakeholders.

Process

The entire project was entirely Agile, with many processes like scoping, research, design component creations, design iterations, et cetera, all occurring in parallel. After many design discussions with researchers, technical architects, and product managers, we determined the personas we wanted to focus on and the experience we would deliver to them.

As product and infrastructure teams began work on understanding technical feasibilities and capacity, my design efforts began on crafting the user experience and developing the design deliverables.

However, there was a slight 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. We were in need of a solution.

Designs

Having successfully recreated our design components in Figma, I was able to jump immediately into the creations of the user interface and user flows. The designs were crafted in sync with user validation and UX feedback sessions.

The interface was created to be contextual, information-rich, visually-aesthetic, and actionable. No longer do users have to navigate and hop through various 3rd-party tools with unfamiliar interfaces and processes. Here, with the IBM Cloud Security Dashboard, they could see and do all they need on a single pane of glass that's been designed from the ground-up to be frictionless, uncomplicated, and action-rich.

Note that these are earlier iterations of the dashboard with no user-identifiable information. These are not the final release designs, but they do give an idea of the design thought and effort that's been poured into it.

—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 were no longer able to 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

A minimum-viable product based on my design efforts was launched in 2023 to a product preview panel of client companies and was met with very positive feedback, with clients particularly noting the dashboard's ease of use, customizability, and robustness. The product is in active development with a full launch aimed for this year.

Furthermore, the Figma components and libraries I created, as a part of accomplishing the goals of this Cloud Security dashboard project, went on to 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 • Dev Handoff Document