SK
The IBM Cloud Console Design System: Building at Scale
Senior UI/UX Designer | November 2020 – Present
62% Reduction in task time
NPS increased to 81
01. The Context
Scaling Cloud Infrastructure Management for 50,000+ Enterprise Users
In 2020, IBM Cloud was facing a critical user experience crisis across its enterprise cloud platform. Eight product teams—Watson Analytics, Kubernetes Service, Virtual Private Cloud (VPC), Security & Compliance Center, Cloud Databases, AI/ML Platform, Storage Services, and Cloud Console Infrastructure—were independently building interfaces for managing mission-critical cloud infrastructure. Each team operated in isolation, creating their own components, navigation patterns, and interaction models.
The fragmentation had reached a breaking point. Enterprise customers managing complex multi-cloud deployments across hundreds of virtual machines, databases, and AI workloads reported frustration with inconsistent interfaces. A DevOps engineer provisioning Kubernetes clusters would encounter completely different navigation patterns than when configuring VPC networks, despite both being core IBM Cloud services.
The lack of a unified design language meant professionals managing mission-critical infrastructure were spending mental energy relearning interfaces rather than focusing on their actual work.
From a business perspective, the duplication was unsustainable. With 45 designers and 120+ engineers across product teams, IBM was effectively building the same buttons, forms, and data tables eight different times. Each team was solving identical problems—how to display resource status, how to handle confirmation dialogs, how to structure multi-step provisioning flows—without sharing solutions.
Product leadership recognized that inconsistent UI was creating technical debt and user friction. They greenlit a comprehensive design system initiative with clear success metrics: reduce design-to-dev time, achieve WCAG 2.1 AA compliance, and improve user satisfaction.
02. The Challenge
Unifying Eight Product Teams Without Sacrificing Velocity in High-Stakes Environments
The challenge extended far beyond creating a component library. User research revealed alarming metrics that quantified the severity of the problem. The Net Promoter Score for IBM Cloud Console sat at 34—significantly below industry benchmarks for enterprise cloud platforms. Task completion times were 2-3 times longer than competitive platforms, with users reporting that inconsistent interfaces forced them to constantly reorient themselves. The average design-to-development cycle for new features took 8 days, as engineers rebuilt basic interface components for each implementation.
However, the deeper challenge wasn’t technical—it was organizational. Eight product teams had developed their own workflows, release schedules, and design philosophies. Watson Analytics prioritized data visualization complexity, while Kubernetes Service focused on infrastructure density. Imposing a rigid top-down design system would have disrupted established team velocities and potentially stifled innovation in specialized domains.
Constraints
The design system needed to accomplish three seemingly contradictory goals simultaneously:
- Establish consistency without sacrificing team autonomy,
- Accelerate development without reducing quality, and
- Create a system flexible enough for diverse product needs while maintaining recognizable IBM Cloud identity.
The Stakes
DevOps engineers use this platform during critical incidents where downtime costs clients thousands per minute. The interface needed to support rapid decision-making under stress, not introduce cognitive load.
03. The Strategy
Research-Driven Foundation Building
Rather than starting with assumptions, I led a comprehensive research initiative to understand how enterprise cloud professionals actually worked. Over six months, I conducted 45+ user interviews and 40+ hours of moderated usability testing with DevOps engineers, cloud architects, and site reliability engineers across Fortune 500 companies. These weren’t casual users—they were professionals managing infrastructure supporting millions of end users.
Card sorting studies with 120 participants revealed how technical professionals mentally model cloud infrastructure components. Tree testing with 85 users validated information architecture decisions, uncovering that traditional consumer-oriented patterns failed for expert users. The insight that shaped our entire approach: IBM Cloud users were experts managing mission-critical systems—they needed information-dense interfaces with efficient workflows, not simplified consumer-style experiences.
To ensure cross-functional alignment, I facilitated design sprints using Google Ventures methodology, bringing together product managers, engineers, and designers from all eight teams. These intensive workshops established our core design principles: clarity over decoration, density for experts, unwavering consistency, accessibility as a non-negotiable requirement, and performance at scale.
04. The Solution
A Scalable Design System Uniting Eight Product Teams
The solution required a comprehensive design system that would serve as both a technical framework and organizational bridge. Rather than forcing teams to abandon their existing workflows, I designed a flexible system built on three foundational pillars: a scalable component architecture extending IBM Carbon’s foundation, a sophisticated token system enabling customization within guardrails, and a democratic contribution process ensuring quality without bottlenecks. The system needed to work seamlessly across light and dark modes—essential for professionals monitoring infrastructure during overnight shifts—while supporting the diverse needs of eight product teams managing everything from AI model training to network security configurations.
1. Scalable Architecture Built on IBM Carbon
The system architecture leveraged IBM Carbon Design System’s 50 foundation components while extending it with 150 cloud-specific components tailored to enterprise infrastructure management. A comprehensive dark mode implementation was essential—cloud professionals often monitor infrastructure during overnight shifts, requiring interfaces optimized for low-light environments.
I designed a complete dual-theme system where every component, token, and pattern worked seamlessly in both light and dark modes, with intelligent contrast ratios ensuring accessibility standards were met in both contexts.
I organized the library into nine strategic categories: Foundation (typography, colors, spacing), Form Elements (18 input types), Data Display (22 components), Feedback (15 notification patterns), Navigation (14 components), Cloud-Specific Components (25 infrastructure elements), Composites (15 multi-component patterns), plus comprehensive Content Guidelines and Best Practices.
2. Three-Tier Token System for Flexibility
I established a three-tier token architecture that balanced consistency with product-specific needs: IBM Carbon primitives as the unchanging foundation, Cloud Console semantic tokens for product-specific context (like status colors and infrastructure-specific hierarchies), and component-specific tokens for granular customization. This architecture comprised 15 token collections covering typography, spacing, colors, elevation, and responsive breakpoints—all meticulously documented with clear naming conventions.
3. Democratic Contribution Process
To maintain quality while enabling team contributions, I designed a five-stage approval workflow: Propose → Design Review → Accessibility Audit → Engineering Review → Publish. This 2-3 week process ensured every component met WCAG 2.1 Level AA compliance and maintained design consistency while allowing teams to contribute solutions for genuine product needs rather than creating redundant variations.
4. Implementation Partnership
Working closely with engineering teams, I created comprehensive design specifications and component documentation that enabled seamless design-to-code translation. Using Figma’s inspect panel and detailed annotation systems, I documented every component state, interaction pattern, and responsive behavior. I established a rigorous design token system exported as CSS variables and JSON files, providing engineers with exact values for colors, typography, spacing, and elevation.
Regular design QA reviews ensured built components matched design intentions across all interaction states, responsive behaviors, and accessibility features. I created detailed documentation for each component including code examples, accessibility requirements, and implementation notes. For complex interactions, I built annotated prototypes with interaction specifications and state diagrams.
I spearheaded accessibility initiatives that elevated the platform from 96% to 100% WCAG 2.1 Level AA compliance through comprehensive ARIA landmarks, keyboard navigation patterns with logical focus management, and thorough screen reader testing with JAWS and NVDA. Every component shipped with complete accessibility documentation, ensuring engineers understood not just what to build, but why specific ARIA attributes and keyboard behaviors were required.
05. The Impact
Transforming Enterprise Cloud Management
The metrics told a compelling story of transformation.
- Task completion times dropped by 62%, directly translating to reduced operational overhead for enterprises managing complex infrastructure.
- The Net Promoter Score (NPS) surged from 34 to 81 — a 138% improvement that positioned IBM Cloud Console among top-tier enterprise platforms.
From a business efficiency perspective, the design system achieved
- 94% adoption across eight product teams, with 188 of 200 components actively used in production.
- Design-to-development time decreased 40%, from 8 days to 4.8 days per feature, representing significant cost savings across the organization.
- Component reuse reached 93%, and design consistency scores measured at 96% across products—evidence that the system successfully unified previously fragmented experiences.
The accessibility achievements extended impact beyond metrics. By achieving 100% WCAG 2.1 Level AA compliance with comprehensive keyboard navigation, screen reader support, and proper focus management, IBM Cloud Console became genuinely usable for professionals with disabilities—expanding the platform’s addressable market while fulfilling IBM’s commitment to inclusive design.
06. Reflection
Lessons in Scaling Design Systems
Three critical lessons emerged from this initiative.
- First, governance models must balance control with flexibility. The five-stage contribution process maintained quality standards without creating bottlenecks—teams could contribute innovations while the system preserved consistency.
- Second, accessibility cannot be retrofitted; building WCAG compliance into every component from inception proved far more effective than auditing afterward.
- Third, adoption requires demonstrating value, not mandating usage. Teams embraced the design system because it solved real problems and accelerated their work—not because leadership mandated it.
The IBM Cloud Console Design System continues evolving as the foundation for enterprise cloud infrastructure management, proving that thoughtful systems design can transform both user experience and organizational efficiency at scale.
Project Metadata
Team
3 Designers
6 Frontend Engineers
1 Product Manager
Domain & Technologies
Enterprise Cloud
SAAS
Cloud Infrastructure
Design System
Figma
LIGHT/DARK MODE
WCAG 2.1 AA
Outcome
62% Reduction in task time
NPS increased from 34 to 81
94% ADOPTION RATE
100% WCAG 2.1 AA COMPLIANCE
40% FASTER DESIGN-TO-DEV TIME
200+ PRODUCTION COMPONENTS
Next Project
⚡ 43% reduction in data entry errors
FactoryFlow: Boeing Manufacturing Execution System
Redesigning Boeing’s factory floor operations platform for 5,000+ concurrent users across three device classes.
Manufacturing
Aerospace
Responsive Web
⚡ 31% increase in premium conversions
PRISM — Portfolio Risk & Investment System Manager, State Street Bank
End-to-end enterprise UX for State Street’s internal portfolio management and trading platform