A complete design system migration
👋
What this project highlights
This project highlights the importance of systems thinking, team coordination, and fostering a contribution-first mindset to achieve scalability and brand alignment. It required deep technical expertise in design systems and a comprehensive understanding of the teams and initiatives involved in building products and pattern libraries on top of Carbon.
The costs of mainting an internal design system
Through training, streamlined processes, and fostering a contribution-first mindset, the team aligned internal assets with Carbon’s standards while empowering teams to actively participate in its evolution.
Focus Realignment
The internal design system team redirected all efforts to the Carbon migration, ensuring alignment with IBM’s official design framework.
Guidelines Development
Established structured workflows for leveraging Carbon by using components out of the box, referencing extended pattern libraries for gaps, and collaborating with teams to create new components that align with Carbon standards.
Workshops and Training
Conducted training sessions to educate teams on Carbon’s aesthetics, ecosystem, and integration practices.
Pattern Asset Library Creation
Developed a tailored library in Figma and Storybook to support intranet-specific needs while maintaining alignment with Carbon.
Process Optimization
Streamlined pull request and design review workflows, enhancing collaboration and efficiency.
Fostering Contribution
Encouraged teams to adopt a contribution-first mindset, partnering with Carbon to provide feedback and share new components.
Inside the migration
Through training, improved processes, and fostering a contribution-first mindset, the team aligned internal assets with Carbon’s standards while empowering teams to actively participate in its evolution.
Focus Realignment
The internal design system team redirected all efforts to the Carbon migration, ensuring alignment with IBM’s official design framework.
Guidelines
Established structured workflows for leveraging Carbon by using components out of the box, referencing extended pattern libraries for gaps, and collaborating with teams to create new components that align with Carbon standards.
Workshops & Training
Conducted training sessions to educate teams on Carbon’s aesthetics, ecosystem, and integration practices.
Process Optimization
Streamlined pull request and design review workflows, enhancing collaboration and efficiency.
Fostering Contribution
Encouraged teams to adopt a contribution-first mindset, partnering with Carbon to provide feedback and share new components.
Carbon for IBMers figma library
Centralized hub for IBM’s design assets, offering designers access to a comprehensive collection of components, templates, and patterns tailored for intranet and internal tools.
Built with Carbon’s design principles, the library ensured consistency across projects while empowering teams to create on-brand, scalable solutions efficiently.
Carbon for IBMers Storybook
The Storybook provided a living repository for IBM’s coded components, bridging the gap between design and development. By documenting interactive components aligned with Carbon’s framework, the Storybook enabled developers to implement consistent, reusable patterns seamlessly, ensuring high-quality, scalable applications across the intranet ecosystem.
After the migration
The migration to Carbon delivered measurable success across key performance areas, reflecting the value of aligning internal systems with IBM’s official design standards. These results underscore the combined power of thoughtful strategy and team collaboration.
NPS (Net Promoter Score) after one year of migrating our internal products to Carbon. This was a 14pt increase.
Reported time savings by leveraging Carbon for our internal products vs. using the previous internal design system.
Number of monthly visitors to the homepage post migration. This is a 12.7% increase from the prior yearly average.
New initiatives and projects that could be pursued with the efficiency gains reported by our agile teams.
Continued Impact
Community Contributions
Internal teams developed and contributed 15 new components to Carbon, enriching its ecosystem and fostering greater collaboration.
Improved Brand Alignment
The custom Pattern Asset Library ensured design consistency while maintaining the flexibility to meet intranet-specific needs.
Unified Experience
The migration created a seamless user experience that connected IBM’s internal and external tools, strengthening brand identity and usability across the organization.
Accessibility
Migrating to Carbon significantly improved accessibility and standards across all our products. Carbon components ensured consistent design approaches and enabled our team to establish scalable, trackable, and easily updatable testing practices.
Strategic Influence
Provided internal teams with a seat at the table to shape the future of Carbon, amplifying their role within the broader IBM ecosystem.
Reflecting on the work
This project was a long-standing vision of mine, one I wasn’t sure would ever come to fruition. Through my work on w3DS and w3 Unification, I made every decision with the hope of one day aligning with Carbon.
Early in my career, I pushed for this transition but lacked the platform to drive change. Rebuilding w3DS from the ground up gave me the technical expertise and strategic perspective to make this migration a reality.
For me, this wasn’t just about moving to Carbon—it was about creating an impact across IBM: contributing to our design community and enabling our teams.