CLOUD COLORS
CLOUD COLORS
ORGANIZATION: Kyndryl - IBM
ROLE: Senior Lead UX Designer – Led platform-wide navigation redesign by conducting IA assessments, defining frameworks, and iterating on designs. Directed subject-matter expert interviews, prototypes, and cross-functional testing to ensure a consistent and seamless user experience. Collaborated with engineering and design teams for implementation aligned with platform goals.
METHODOLOGY: Color Theory and Accessibility Standards, Business Needs Assessment, Enterprise Design Thinking, WCAG 2.1 Compliance Testing, A/B Testing, Heuristic Evaluation.
TOOLS: Stark, WebAIM Contrast Checker, Color Oracle, Figma, Mural, Webex Meetings, Jira, GitHub, Sketch, Adobe Illustrator.
ORGANIZATION: Kyndryl - IBM
ROLE: Senior Lead UX Designer – Led platform-wide navigation redesign by conducting IA assessments, defining frameworks, and iterating on designs. Directed subject-matter expert interviews, prototypes, and cross-functional testing to ensure a consistent and seamless user experience. Collaborated with engineering and design teams for implementation aligned with platform goals.
METHODOLOGY: Color Theory and Accessibility Standards, Business Needs Assessment, Enterprise Design Thinking, WCAG 2.1 Compliance Testing, A/B Testing, Heuristic Evaluation.
TOOLS: Stark, WebAIM Contrast Checker, Color Oracle, Figma, Mural, Webex Meetings, Jira, GitHub, Sketch, Adobe Illustrator.
1.- THE PROBLEM
1.- THE PROBLEM
As the Multicloud Management Platform (MCMP) transitioned to Kyndryl, a UI branding transition phase was required to maintain a smooth user experience. Since Kyndryl’s branding was still evolving, a temporary yet functional color schema was necessary to bridge the gap between IBM’s Carbon Design System and Kyndryl’s new identity.
The key challenges included:
Color Scheme Discrepancies: IBM’s Carbon Design System used structured color hierarchies, whereas Kyndryl’s palette was branding-focused and lacked accessibility considerations.
Accessibility Compliance: The transition needed to ensure all color adaptations met WCAG 2.1 AA standards, specifically contrast ratio requirements (1.4.3) and non-text contrast (1.4.11) for UI elements.
Integration with MCMP UI: The updated color schema had to work seamlessly within the existing Carbon Design System without disrupting UI functionality.
As the Multicloud Management Platform (MCMP) transitioned to Kyndryl, a UI branding transition phase was required to maintain a smooth user experience. Since Kyndryl’s branding was still evolving, a temporary yet functional color schema was necessary to bridge the gap between IBM’s Carbon Design System and Kyndryl’s new identity.
The key challenges included:
Color Scheme Discrepancies: IBM’s Carbon Design System used structured color hierarchies, whereas Kyndryl’s palette was branding-focused and lacked accessibility considerations.
Accessibility Compliance: The transition needed to ensure all color adaptations met WCAG 2.1 AA standards, specifically contrast ratio requirements (1.4.3) and non-text contrast (1.4.11) for UI elements.
Integration with MCMP UI: The updated color schema had to work seamlessly within the existing Carbon Design System without disrupting UI functionality.
2.- REQUIREMENTS ASSESSMENT
2.- REQUIREMENTS ASSESSMENT
Context
IBM’s Carbon Design System was the foundation of MCMP, ensuring a scalable and accessible UI. However, Kyndryl’s new branding introduced significant contrast issues when applied to a functional UI. Since the final Kyndryl Design System was not yet defined, an interim color mapping solution was required to ensure continuity and avoid usability issues.
Context
IBM’s Carbon Design System was the foundation of MCMP, ensuring a scalable and accessible UI. However, Kyndryl’s new branding introduced significant contrast issues when applied to a functional UI. Since the final Kyndryl Design System was not yet defined, an interim color mapping solution was required to ensure continuity and avoid usability issues.
Color Schema Structure Discrepancies
The Carbon Design System, created by IBM, is based on two primary color families and an auxiliary set for alerts. It defines 36 colors, with blue as the main theme and a range from black to white for general UI elements.
Color Schema Structure Discrepancies
The Carbon Design System, created by IBM, is based on two primary color families and an auxiliary set for alerts. It defines 36 colors, with blue as the main theme and a range from black to white for general UI elements.
Kyndryl's color palette was recently developed with a focus on branding rather than web accessibility standards. It includes 2 primary colors and 6 secondary colors, each with 5 different shades.
Kyndryl's color palette was recently developed with a focus on branding rather than web accessibility standards. It includes 2 primary colors and 6 secondary colors, each with 5 different shades.
Temporal & Transitional Solution
With limited time and resources, the goal was to transition quickly from IBM branding to Kyndryl's. The objective was to implement a functional color scheme until the new Kyndryl Design System was finalized.
Temporal & Transitional Solution
With limited time and resources, the goal was to transition quickly from IBM branding to Kyndryl's. The objective was to implement a functional color scheme until the new Kyndryl Design System was finalized.
3.- THE SOLUTION
3.- THE SOLUTION
The project was scoped into three stages:
Stage 1: Document Analysis & Color Schema Definition
Stage 2: Testing Environment Implementation and User Testing
Stage 1: Document Analysis & Color Schema Definition
The Carbon Design System, an open-source framework by IBM, uses two color families and an auxiliary group for alerts. It follows the IBM Accessibility Checklist, aligned with WCAG AA, Section 508, and European standards.
As Carbon was the only fully developed design system available during the transition, we leveraged its color accessibility guidelines and structure to streamline implementation.
The project was scoped into three stages:
Stage 1: Document Analysis & Color Schema Definition
Stage 2: Testing Environment Implementation and User Testing
Stage 1: Document Analysis & Color Schema Definition
The Carbon Design System, an open-source framework by IBM, uses two color families and an auxiliary group for alerts. It follows the IBM Accessibility Checklist, aligned with WCAG AA, Section 508, and European standards.
As Carbon was the only fully developed design system available during the transition, we leveraged its color accessibility guidelines and structure to streamline implementation.
Carbon Design System Color Anatomy
Each color corresponds to a specific role, defining its purpose i n the UI.
Colors are applied across four themes (White, Gray 10, Gray 90, and Gray 100), with each role assigned to a Code Token.
Themes ensure compliance with web accessibility standards by assigning tokens for consistent
color behavior.
Carbon Design System Color Anatomy
Each color corresponds to a specific role, defining its purpose i n the UI.
Colors are applied across four themes (White, Gray 10, Gray 90, and Gray 100), with each role assigned to a Code Token.
Themes ensure compliance with web accessibility standards by assigning tokens for consistent
color behavior.
Carbon design system main color is Blue 60 for light backgrounds and Blue 50 for darker backgrounds, Kyndryl’s Warm Red does not meet the AA accessibility standard level against a white background nor against a dark background.
Carbon design system main color is Blue 60 for light backgrounds and Blue 50 for darker backgrounds, Kyndryl’s Warm Red does not meet the AA accessibility standard level against a white background nor against a dark background.
Carbon design system main color is Blue 60 for light backgrounds and Blue 50 for darker backgrounds, Kyndryl’s Warm Red does not meet the AA accessibility standard level against a white background nor against a dark background.
Carbon design system main color is Blue 60 for light backgrounds and Blue 50 for darker backgrounds, Kyndryl’s Warm Red does not meet the AA accessibility standard level against a white background nor against a dark background.
As a result we came up with a new list of color hex values and asigned them to their correspondedant token so the implementation team could do a quick gobal change. The deliverable where two a spreadsheet with the Token, the Value or Name, the Hex Value on Carbon and the new correspondant Hex Value
As a result we came up with a new list of color hex values and asigned them to their correspondedant token so the implementation team could do a quick gobal change. The deliverable where two a spreadsheet with the Token, the Value or Name, the Hex Value on Carbon and the new correspondant Hex Value
4.- TESTING ENVIRONMENT AND USER VALIDATION
4.- TESTING ENVIRONMENT AND USER VALIDATION
4.- TESTING ENVIRONMENT AND USER VALIDATION
Implementation Approach:
Created a testing environment to apply and evaluate the new color scheme in real-world UI scenarios.
Conducted usability tests with internal and external users to measure task efficiency and perception of the new colors.
A/B Testing Results:
Warm Red:
60% of users found it disruptive.
95% of users requested a color change after encountering alerts and modals in this color.
Deep Forest Green:
70% of users did not find it disruptive.
20% of users only noticed the color change in later interactions, demonstrating its unobtrusive integration.
Final Color Mapping Decision:
Deep Forest Green was adopted as the primary transition color.
Warm Red was excluded from UI elements due to strong negative user feedback.
Established a color mapping guide to assist developers with implementation across all MCMP applications.
Implementation Approach:
Created a testing environment to apply and evaluate the new color scheme in real-world UI scenarios.
Conducted usability tests with internal and external users to measure task efficiency and perception of the new colors.
A/B Testing Results:
Warm Red:
60% of users found it disruptive.
95% of users requested a color change after encountering alerts and modals in this color.
Deep Forest Green:
70% of users did not find it disruptive.
20% of users only noticed the color change in later interactions, demonstrating its unobtrusive integration.
Final Color Mapping Decision:
Deep Forest Green was adopted as the primary transition color.
Warm Red was excluded from UI elements due to strong negative user feedback.
Established a color mapping guide to assist developers with implementation across all MCMP applications.
What Went Well?
What Went Well?
What Went Well?
Successful Color Mapping Execution: The transition was delivered with zero implementation bugs.
User Testing Validated Decisions: Findings ensured that final color choices enhanced usability rather than disrupting workflows.
Cross-Team Alignment: Early stakeholder buy-in reduced last-minute changes and ensured smooth adoption.
Full Compliance with WCAG 2.1 AA Standards: Achieved 4.5:1 contrast for text elements and 3:1 for UI components, ensuring accessibility for users with visual impairments.
Successful Color Mapping Execution: The transition was delivered with zero implementation bugs.
User Testing Validated Decisions: Findings ensured that final color choices enhanced usability rather than disrupting workflows.
Cross-Team Alignment: Early stakeholder buy-in reduced last-minute changes and ensured smooth adoption.
Full Compliance with WCAG 2.1 AA Standards: Achieved 4.5:1 contrast for text elements and 3:1 for UI components, ensuring accessibility for users with visual impairments.
Successful Color Mapping Execution: The transition was delivered with zero implementation bugs.
User Testing Validated Decisions: Findings ensured that final color choices enhanced usability rather than disrupting workflows.
Cross-Team Alignment: Early stakeholder buy-in reduced last-minute changes and ensured smooth adoption.
Full Compliance with WCAG 2.1 AA Standards: Achieved 4.5:1 contrast for text elements and 3:1 for UI components, ensuring accessibility for users with visual impairments.
What Could I Have Done Better?
What Could I Have Done Better?
What Could I Have Done Better?
Expanded Accessibility Testing: Including colorblind users in the testing phase could have further refined the accessibility strategy.
Testing with Unfamiliar Users: Conducting tests with users not already accustomed to IBM’s Carbon Design System could have revealed additional insights into UI perception and adaptability.
Exploring Higher Contrast Alternatives: Testing alternative secondary color combinations could have helped refine a more universally accessible color system for future use.
Expanded Accessibility Testing: Including colorblind users in the testing phase could have further refined the accessibility strategy.
Testing with Unfamiliar Users: Conducting tests with users not already accustomed to IBM’s Carbon Design System could have revealed additional insights into UI perception and adaptability.
Exploring Higher Contrast Alternatives: Testing alternative secondary color combinations could have helped refine a more universally accessible color system for future use.
Expanded Accessibility Testing: Including colorblind users in the testing phase could have further refined the accessibility strategy.
Testing with Unfamiliar Users: Conducting tests with users not already accustomed to IBM’s Carbon Design System could have revealed additional insights into UI perception and adaptability.
Exploring Higher Contrast Alternatives: Testing alternative secondary color combinations could have helped refine a more universally accessible color system for future use.
