Brian Le

Cloud Pak
System



IBM Cloud Pak System is an integrated hardware and software product that helps organizations deploy private clouds quickly and securely. 

It combines physical infrastructure with a unified management interface—a bridge between machines and the people who maintain them.

Objectives
To modernize a dense legacy interface into a more legible and cohesive system—adopting Carbon Design System, introducing new visual patterns where none existed, and restoring clarity to the complex workflows.

Role
Visual Design Lead–defining the visual language, interaction behaviors, and component specifications. Leading the strategy and roadmap of design system adoption.

Highlights
1 Modernizing a legacy interface
2 Simplifying deployments
3 Monitoring deployments  

Login & dashboard explorations: Visual explorations used for stakeholder presentations and storytelling.
1

Modernizing
login & starting
experience


⤵


Evaluating the Legacy Experience 
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster. The existing landing page has not had design support in over five years.

Implementing Carbon Design System
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster. 

Refreshing the Visual Langauge
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster.  As-is


Needs work: Visual design explorations used for stakeholder presentations and storytelling.


To-be



Design system compliant: Visual design explorations used for stakeholder presentations and storytelling.

2

Simplifying
deployments


⤵

Evaluating the Legacy Experience 
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster. The existing landing page has not had design support in over five years.

Implementing Carbon Design System
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster. 

Refreshing the Visual Langauge
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster.   Process: Visual design explorations used for stakeholder presentations and storytelling.

As-is: Visual design explorations used for stakeholder presentations and storytelling.


To-be: Visual design explorations used for stakeholder presentations and storytelling.



To-be: Visual design explorations used for stakeholder presentations and storytelling.

3

Monitoring
deployments


⤵


Evaluating the Legacy Experience 
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster. The existing landing page has not had design support in over five years.

Implementing Carbon Design System
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster. 

Refreshing the Visual Language
To create a descriptive, simple, and actionable Getting Started experience that helps users be more productive, faster.   Process: Visual design explorations used for stakeholder presentations and storytelling.

To-be: Visual design explorations used for stakeholder presentations and storytelling.