Alison Joseph

Summary

As development lead, expanded and enhanced Carbon's UI Shell to create a consistent platform experience across IBM Software. Built on the existing Carbon Shell by adding new React components where gaps existed and aligning diverse business needs into shared patterns. Partnered closely with Carbon designers and design leaders from across the business to balance varied requirements while working in Carbon Labs for rapid prototyping and validation.

Background

The Challenge: Carbon's UI Shell hadn't been updated much since its first release and lacked clear guidance on navigation composition. Product teams filled gaps independently, leading to fragmented and inconsistent experiences across IBM Software. Many products had needs the current Shell couldn't solve - multi-product navigation, deep nesting, or filtering capabilities.

My Role: As development lead, I facilitated working sessions with design leaders from across IBM's business units while leading hands-on development with a small team. I organized sprints, sized work, and contributed directly to building new components.

Approach

Cross-functional Collaboration: Facilitated regular working sessions with design leaders while leading development. Partnered early with IBM's accessibility team to test as we built, ensuring the Shell met accessibility requirements from the start.

Key Focus Areas:

• Rapid prototyping: Partnered with designers to explore navigation patterns and interactions, validating them with stakeholders before finalizing
• Balancing needs: Accounted for varied business requirements, from multi-product navigation to deep nesting and filtering
• Building flexibility: Developed composable React components including double-wide main navigation, mobile-friendly version with back navigation, and configurable in-product rail with pinning and auto expansion
• Ensuring compatibility: Maintained compatibility with existing Carbon React functionality while building in Labs for eventual promotion back to core
• Stakeholder alignment: Used Labs as a safe space to iterate quickly while building trust that the final design would meet broad needs

Challenges

Diverse Product Requirements: Teams had vastly different needs - some required robust multi-product navigation, others prioritized lighter single-product rails, and others needed deep nesting or filtering. Balancing these competing needs while driving toward a unified Shell experience required constant iteration and compromise.

Rebuilding Trust: Because the Shell hadn't been updated in years, many teams had built their own variations and were skeptical that a shared solution could meet their needs without heavy customization.

Balancing Speed and Stability: Had to move quickly without compromising stability. Every decision balanced the freedom to experiment in Labs with the discipline to keep code aligned with core standards for eventual promotion.

Cross-Business Alignment: Worked with Carbon designers, design leaders, and VPs from multiple business units, each with their own priorities. Building consensus at this scale required steady communication and facilitation to keep everyone moving toward the same goal.

Outcomes

Technical Deliverables:

• Delivered improved set of composable React components providing consistent and flexible foundation that can scale across IBM Software
• Enhanced existing functionality and added new components where gaps existed, giving teams a clear, unified way to build navigation patterns

Early Adoption:

• Teams that previously built custom shells are beginning to implement the new components, with product teams adding their own instrumentation to guide future iterations
• Created repeatable model for using Carbon Labs to experiment, validate with stakeholders, and promote work into core library without risking stability

Process and Collaboration:

• Strengthened cross-business collaboration and renewed trust in the Shell as a shared solution
• Established accessibility testing from the start and aligned on usage patterns for consistent experience across IBM's portfolio

Summary

Expanded accessibility testing coverage for Carbon React components and developed a dynamic status dashboard to surface results on the website. The dashboard pulls updated test coverage with each release, displaying accessibility status both on individual component pages and in a consolidated view. This gave teams immediate visibility into coverage and reduced risk for products building on Carbon by making gaps clear and actionable.

Background

The Challenge: Carbon's accessibility testing coverage for React components was inconsistent. Some components had strong accessibility validation, while others had little or none, making it hard to know whether they could be safely relied on in products. Even when tests existed, results weren't visible in a central place, leaving teams unaware of accessibility gaps.

The Need: Both stronger, more consistent test coverage and a way to surface results publicly so teams could make informed decisions and prioritize improvements.

My Role: Led the expansion of accessibility testing and built the dashboard system to surface results across the Carbon website and internal Carbon for IBM Products site.

Approach

Accessibility Audit: Conducted full audit of Carbon React components to establish baseline coverage. Created individual GitHub issues for each component, grouped under a central epic to track progress across the library.

Expanded Testing: Added automated accessibility tests directly in Carbon React to close identified gaps. Exported test results from the React codebase to make coverage status externally accessible.

Dashboard Development: Partnered with design to build configurable MDX components that could pull in results dynamically. Designed with variant selectors to display accessibility status in multiple contexts:

• Card view on usage pages
• Table view on accessibility tabs
• Full accessibility status page

Integration: Extended dashboard to internal Carbon for IBM Products site, giving IBM teams the same clarity and confidence in accessibility readiness across the greater Carbon ecosystem.

Challenges

One challenge was the lack of consistency in how accessibility tests were named across components. Without a standard, the reporting wouldn’t align correctly, so we had to refactor and normalize test names to make the dashboard reliable.

Another challenge was accounting for components with multiple variants. Each variant required its own testing and status reporting, which added complexity to both the test suite and the way results were displayed.

We also faced mismatches between naming conventions in Carbon React and the Carbon website. To bridge this gap, we wrote custom logic to ensure results were surfaced correctly and tied back to the right component pages. This extra mapping work was essential to keep the dashboard accurate and trustworthy.

Outcomes

The most significant outcome of this work was improved accessibility test coverage across the Carbon React library. By adding new automated tests and closing gaps identified in the audit, we established a consistent baseline of accessibility validation for components that teams across IBM could rely on.

In parallel, we built a dashboard that surfaced those results on the Carbon website, giving teams immediate insight into accessibility status at the component, page, and library level. Extending the same experience to the internal Carbon for IBM Products site gave IBM teams a unified view of coverage across the design system.

Together, these improvements reduced risk for products building on Carbon and increased confidence in accessibility compliance. By pairing stronger test coverage with transparent reporting, we not only improved the technical foundation of the library but also created accountability and a model for sustaining accessibility going forward.

Summary

Led the integration of Carbon React with Figma Code Connect, embedding React component code directly into Figma's Dev Mode. This closed the gap between design and development by letting teams access real Carbon code without leaving Figma, reducing context switching and guesswork during handoff. The integration also powers a new generation of design-to-code AI plugins in Figma, where Carbon's connected components provide the underlying source of truth for generating more accurate code.

Background

The Challenge: The gap between design and development created inefficiencies for product teams. Designers handed off specs that required interpretation, while developers referenced separate documentation, Storybook, or code repositories. This back-and-forth increased the risk of errors and led to inconsistent user experiences.

The Opportunity: Figma's launch of Code Connect in Dev Mode provided a chance to bring live component code directly into the design tool. For Carbon, this meant developers could see and copy real React code directly from Figma components, streamlining workflows and ensuring consistent implementation. The same connected code now serves as the foundation for AI-driven design-to-code plugins.

My Role: As the technical lead, I owned the integration strategy, component mapping, and automation setup while partnering directly with Figma's team during the beta phase.

Approach

Systematic Component Mapping: Created an epic in Github and opened an issue for each component in the Carbon React library. Worked through them systematically, mapping each Figma component to its React counterpart in @carbon/react to ensure consistency and trackable progress.

Beta Partnership: Collaborated directly with the Figma team throughout the process, providing feedback, reporting issues, and validating fixes to help shape the feature as it matured toward GA.

Challenges

Component Name Mismatches: Component names and structures often differed between Figma and React. Code Connect's explicit mapping capability allowed us to align components and handle variants, mapping one Figma component to multiple React components or vice versa without losing accuracy.

Library Inconsistencies: The mapping process revealed inconsistencies between the Figma library and React components, including missing props. We tracked these issues across both libraries and fixed them as part of the work, strengthening the underlying system.

Maintaining Sync: Built Code Connect updates into our definition of done and educated designers on what constitutes a breaking change in Figma. This ensured that whenever the Figma library was updated, the Code Connect mappings were updated in parallel.

Beta Instability: Working with Code Connect in beta presented hurdles from unexpected bugs to evolving functionality. Maintained direct connection with the Figma team, providing feedback and validating fixes as they rolled out to help stabilize the feature for Carbon at scale.

Outcomes

Developer Efficiency:

• Gave developers direct access to accurate React code inside Figma, reducing context switching and eliminating guesswork during handoff
• Made implementation faster and more consistent, helping teams translate design intent into production code with greater confidence

Sustainable Process:

• Established repeatable workflows by baking Code Connect updates into definition of done and educating designers on breaking changes
• Reduced risk of drift between Figma library and React components through automated sync process

AI-Powered Future:

• Laid the foundation for AI-driven design-to-code workflows where Carbon's connected components serve as single source of truth
• Enabled Figma plugins to generate more accurate code automatically, positioning Carbon as an enabler of intelligent, AI-assisted tooling

Summary

As Development Lead, helped create IBM's first systematic approach to migrating acquired products onto Carbon Design System. Collaborated with the team to build a repeatable framework combining technical assessment, interactive effort modeling, and embedded partnership that reduced migration timelines by 40% while maintaining product velocity. The program now serves as IBM's standard for acquisition onboarding, with the sizing methodology adopted across 8+ product teams.

Background

The Challenge: IBM's acquisition strategy accelerated, but each new product brought unique design languages, tech stacks, and user expectations. Without a systematic approach, migrations were inconsistent and time-consuming, creating fragmented user experiences and straining both acquisition teams and the Carbon team.

My Role: As Development Lead, I owned the technical strategy and delivery methodology, working directly with product teams, Carbon designers, and engineering leadership to define and execute the program.

Approach

1. Technical Discovery & Assessment: Working with the team to understand what made migrations successful or challenging across different product contexts.

Technical Discovery Process:

• Asset Audit: Worked with acquisition teams to conduct full component inventories across their Figma files and codebases
• Accessibility Baseline: Collaborated to establish comprehensive a11y audits covering keyboard navigation, color contrast, and semantic markup
• Parity Mapping: Mapped existing product components to Carbon equivalents, identifying what could translate directly and what needed adaptation

2. Interactive Sizing Model: The breakthrough was making effort estimation collaborative and transparent. I built an interactive model that:

• Weighted complexity factors: Component usage frequency, technical debt, accessibility gaps, and design divergence
• Factored team capacity: Available developers, existing Carbon knowledge, and concurrent feature work
• Generated staged timelines: Prioritized high-impact, low-risk changes first, with heavier architectural shifts sequenced later

3. Embedded Partnership Strategy: Rather than consulting from the sidelines, we embedded Carbon experts directly with product teams through "away missions":

• Close collaboration between Carbon developers and product engineers throughout the migration
• Design reviews with both teams present to align on component decisions
• Staged delivery where teams shipped improvements in phases rather than waiting for complete migration

Challenges

Technical Complexity: Products varied from React to Angular to vanilla JavaScript, each with different state management and styling approaches. The biggest challenge was preserving existing user workflows while updating the underlying components.

Solution: Created a "styling-first" approach for high-risk areas. Teams could achieve visual consistency using Carbon tokens without immediately replacing components, reducing regression risk while buying time for proper component swaps.

Organizational Resistance: Many teams had invested heavily in custom design systems and questioned the value of migration. Some saw Carbon as additional complexity that would slow their development.

Solution: Made the business case concrete through data. The sizing model showed teams exactly where they'd save time (maintaining fewer custom components) versus where they'd invest more (learning Carbon patterns). Early wins in accessibility and visual consistency helped build confidence.

Outcomes

Program Success:

• Created a reusable migration framework now being applied across IBM acquisitions
• The sizing methodology and away mission model became standard practice for Carbon team integrations
• Established "styling-first" approach that other teams adopted for risk mitigation

Cloudability Results:

• Completed initial visual migration in 6 weeks instead of estimated several months
• Achieved ~90% Carbon design audit readiness across micro front ends
• Generated approximately $200K in cost savings by reducing internal team resource needs
• Created Graphene theming system now being adopted across other Apptio products

Broader Impact:

• Multiple acquisition teams successfully used the framework and sizing model
• Away mission model scaled beyond acquisitions to support other Carbon integrations
• Teams reported faster alignment with Carbon standards without disrupting feature development

What Made It Work:

• Clear documentation and component mapping process
• Embedded collaboration model that didn't drain product team resources
• Practical staging approach that prioritized high-impact, low-risk changes first
• Interactive sizing tool that helped teams plan realistic timelines

Summary

Provided technical oversight and review for Carbon for AI, a comprehensive extension to IBM's design system that uses light-inspired visual effects to identify AI-generated content. Managed the development process and provided architectural guidance on how gradient systems and new color tokens would integrate with existing Carbon infrastructure. Ensured the implementation maintained design system consistency and accessibility standards throughout the rapid development cycle that delivered full component coverage in just a few months.

Background

The Challenge: As AI became central to IBM's product strategy, users needed clear ways to identify AI-generated content across all IBM software. Without visual consistency, AI instances appeared differently across products, creating confusion and reducing trust. IBM needed a systematic approach that would work across hundreds of components while maintaining accessibility and brand consistency.

The Opportunity: Create an extension to Carbon that used "light as a metaphor to illuminate AI-generated content" while building transparency and explainability into the design system itself. This meant developing new visual language that was distinct yet harmonious with existing Carbon principles.

My Role: I served in a review and management capacity, overseeing the technical implementation process and providing guidance on architecture decisions. My involvement focused on ensuring the AI styling integrated properly with existing Carbon infrastructure and met our accessibility and consistency standards.

Approach

Design-Development Collaboration:

• Dev partnered closely with design through early prototyping phase to understand how gradient systems would work across multiple component types and themes
• Carbon devs built rapid prototypes to test visual concepts in real component contexts, validating design decisions against technical constraints
• Established feedback loops between design exploration and technical feasibility to ensure concepts could scale across the entire component library

Token Architecture & Visual System:

• Developed new suite of AI color tokens that integrated seamlessly with existing Carbon themes without requiring separate theme packages
• Implemented gradient and glow effects using CSS custom properties to ensure consistent light-inspired styling across components

Component Implementation Strategy:

• Built AI variants for core Carbon components using mix-in approach, allowing components to toggle between standard and AI styling without code duplication
• Integrated AI label component as consistent indicator across all AI-enhanced components, providing pathway to explainability through popover system
• Implemented revert functionality that allows users to toggle between AI-generated and manually edited content while maintaining state

Accessibility & Standards:

• Ensured all AI styling met Carbon's accessibility standards through contrast testing and screen reader validation
• Limited light spread and glow effects to maintain readability while preserving visual distinction
• Built AI transparency principles directly into component architecture, making ethical AI practices automatic rather than optional

Challenges

Visual Complexity vs. Performance: Implementing gradients, glows, and light effects across dozens of components while maintaining fast render performance required careful CSS optimization. Had to balance visual impact with technical constraints, especially for complex components like data tables with hundreds of cells.

Cross-Component Consistency: Each component type presented unique challenges for applying AI styling - from form inputs to modals to data tables. Ensuring the light-inspired effects felt cohesive across such different interaction patterns required extensive iteration and testing.

Accessibility with New Visual Language: Creating visually striking effects that remained accessible was challenging. The gradient and glow effects needed to enhance rather than interfere with contrast ratios, keyboard navigation, and screen reader accessibility.

Theme Integration: AI styling needed to work across Carbon's light, dark, and high-contrast themes without breaking existing implementations. This required careful token architecture that extended rather than replaced existing color systems.

Rapid Timeline with Quality Standards: Delivering full component coverage in just a few months while maintaining Carbon's quality and accessibility standards required efficient prototyping workflows and close design-development coordination throughout the process.

Outcomes

Comprehensive Component Coverage:

• Delivered AI variants for all core Carbon components including forms, data tables, modals, and navigation elements in just a few months
• Created consistent AI identification system that works across React and Web Components libraries with identical visual and behavioral patterns
• Built reusable architecture that allows teams to easily add AI styling to custom components using established token system

Design System Integration:

• Successfully integrated AI styling into existing Carbon themes without breaking changes, allowing teams to adopt AI components incrementally
• Established design-to-code workflow where designers can toggle AI variants in Figma and developers can implement using the same variable system
• Created sustainable token architecture that maintains consistency as new AI components and patterns are added

Accessibility:

• All AI components meet Carbon's accessibility standards with tested color contrast and screen reader compatibility
• Built AI transparency and explainability directly into component architecture through integrated AI label and popover system
• Established visual language that clearly distinguishes AI content while maintaining usability and aesthetic harmony with base Carbon components

Technical Foundation:

• Created reusable pattern for extending design systems with specialized visual languages while maintaining consistency and accessibility
• Demonstrated rapid prototyping workflow that bridges design exploration with technical implementation at enterprise scale
• Positioned IBM as leader in ethical AI presentation through systematic approach to transparency and explainability in user interfaces

Summary

As development lead, created gatsby-theme-carbon to unify IBM's design ecosystem under a single, reusable Gatsby theme. Built during the Carbon v10 and IBM Design Language migration, the theme now powers hundreds of internal and external repositories and enables teams to launch IBM Design Language-compliant sites in hours rather than months. Partnered closely with designers to ensure the theme properly expressed design principles while creating sustainable architecture for content authors and developers.

Background

The Challenge: With the launch of Carbon v10 and the new IBM Design Language, IBM needed to rebuild both the Carbon Design System website and the IBM Design Language website. Building these separately would have duplicated effort and risked inconsistency across IBM's design presence. Meanwhile, teams across IBM struggled to create sites that properly reflected the IBM Design Language without dedicated development resources.

The Opportunity: Gatsby's theme system provided a way to encapsulate all configuration and implementation details into a reusable package. This meant we could build once and enable dozens of teams to launch consistent, high-quality sites with minimal technical overhead.

My Role: As development lead, I owned the technical architecture and implementation strategy while partnering closely with Carbon designers to ensure the theme properly expressed the IBM Design Language across different use cases.

Approach

Theme Architecture & Gatsby Integration:

• Built on Gatsby's theme composition system, allowing teams to shadow (override) components while maintaining core functionality
• Implemented MDX-first content strategy, enabling content authors to write in Markdown with embedded React components
• Created flexible component shadowing system that balanced consistency with customization needs

Design System Integration:

• Integrated Carbon React components as the foundation while building theme-specific patterns for common website needs
• Ensured automatic adherence to IBM Design Language principles through built-in typography, spacing, and color systems
• Created documentation site architecture that worked for both technical and brand-focused content

Content Author Experience:

• Designed MDX-based content system that allowed non-technical team members to create rich, interactive pages
• Built sidebar navigation system that is easily configurable for designers, developers or content editors

Scalability & Maintenance:

• Established versioning strategy that allowed theme updates to propagate across all dependent sites
• Built theme with plugin architecture to support different site needs (documentation, marketing, events)
• Created starter templates and comprehensive documentation to reduce onboarding friction

Challenges

Technical Complexity Across Team Skills: The theme needed to serve both highly technical developers building documentation sites and content creators with minimal coding experience. Balancing powerful customization capabilities with simple content authoring required careful API design and extensive testing with both user types.

IBM Design Language Translation: Converting IBM Design Language principles from print and brand guidelines into flexible web patterns was challenging. Each component needed to work across different content types while maintaining consistent brand expression. This required close collaboration with designers to validate that the theme truly captured the intended design language.

Cross-Team Coordination: As the theme gained adoption, managing feedback and feature requests from multiple teams required careful prioritization. Each team had specific needs, but changes needed to benefit the broader ecosystem without breaking existing implementations.

Outcomes

Adoption & Scale:

• Powers hundreds of internal and external repositories according to GitHub dependency tracking
• Serves as foundation for major IBM design properties including IBM Design, Carbon Design System, IBM Design Language, and IBM Design Research
• Receives ~1,127 weekly npm downloads demonstrating active community usage

Developer & Content Author Efficiency:

• Teams report migrating entire sites to the theme "in a matter of hours" versus months for custom development
• Content creators can launch new sites without dedicated development resources
• Testimonials highlight ability to focus on content rather than technical implementation

Design Consistency:

• Automatic compliance with IBM Design Language across all implementing sites
• Shared component library ensures visual solidarity across IBM's design ecosystem
• Theme-managed configuration eliminates common implementation inconsistencies

Technical Foundation:

• Created reusable model for design system-driven website themes
• Established patterns for MDX-based content management that other teams have adopted
• Built sustainable update mechanism where core improvements benefit entire ecosystem automatically

Role & Scope

Development Lead & Maintainer: Lead technical strategy, architecture decisions, and day-to-day development for Carbon's React library, Web Components, and supporting tooling. Manage a team of developers while contributing directly to core functionality, new components, and accessibility improvements.

Community Leadership: Run bi-weekly office hours with the internal IBM community, monitor Slack channels for support, and facilitate collaboration between IBM teams and external contributors. Foster an inclusive environment that encourages contributions from developers across skill levels.

Release Management: Coordinate bi-weekly releases across multiple packages, ensuring stability while delivering new features and improvements. Manage versioning strategy, backward compatibility, and migration paths for breaking changes.

Current Initiatives

React & Web Components Parity:Leading efforts to ensure feature parity between Carbon's React and Web Components libraries, enabling consistent experiences regardless of framework choice. This includes architectural planning, API design, and coordination between development teams.

Accessibility Excellence: Driving comprehensive accessibility improvements across the component library, including automated testing expansion, ARIA implementation, and keyboard navigation enhancements. Working to establish Carbon as an accessibility leader in the design system space.

Testing & Quality: Expanding test coverage and improving testing infrastructure to ensure reliability at scale. This includes unit tests, integration tests, visual regression testing, and accessibility validation across the component library.

Website & Documentation:Managing the Carbon website as part of sprint work, ensuring documentation stays current with component changes and provides clear guidance for both developers and designers.

Scale & Impact

Open Source Reach: Carbon's GitHub organization includes 116 repositories with active community contribution. The main repository receives regular contributions from both IBM teams and external developers, fostering innovation and shared ownership.

Enterprise Adoption: Carbon serves as the foundation for IBM's entire product portfolio, ensuring consistent user experiences across cloud, AI, and enterprise software offerings. The system scales to support thousands of developers and millions of end users.

Community Engagement: Regular office hours sessions connect directly with developers using Carbon, providing real-time support and gathering feedback that drives roadmap decisions. Active Slack community enables ongoing collaboration and knowledge sharing.

Technical Leadership: Balance hands-on development with strategic planning, ensuring Carbon evolves to meet changing technology needs while maintaining stability for existing implementations. Lead architectural decisions that impact the entire IBM ecosystem.