IBM’s Carbon Design System took the company’s design-centric philosophy to a whole new level.
“Good design is good business,” IBM chief executive Thomas Watson Jr. famously declared in 1973. Watson Jr. also was the first executive to create an all-encompassing corporate design program, hiring Eliot Noyes, former curator of industrial design at New York’s Museum of Modern Art, to lead the charge. Noyes, in turn, brought on board some of the greatest creative talents of the day, including Charles and Ray Eames, Eero Saarinen, Paul Rand and Isamu Noguchi, to modernize IBM’s brand.
So to say that design thinking is in IBM’s blood is far from an understatement, although the company arguably strayed from its design roots for a time. Recently, though, IBM has come back around to Watson Jr.’s line of thinking, and that’s having a ripple effect across the company—and the design world. “It’s one of those things where people who traditionally stay far away from design suddenly have design terms and design thinking in their vocabulary,” says Chris Dhanaraj, developer lead for IBM’s Carbon Design System. “I think it’s a testament to IBM’s renewed focus that it’s no longer just designers thinking about design, but developers and managers, too.”
That renewal is abundantly apparent in the company’s Carbon Design System and the team of seven designers, developers and researchers behind it. The System includes the Carbon Design Kit for designers—a living, breathing document that contains all of IBM’s visual assets (components, iconography, color palettes, grids, etc.)—and the Carbon Component Library for front-end developers and engineers—a collection of reusable HTML and SCSS partials to build websites and user interfaces. Adopting the library enables designers and developers to use consistent markup, styles and behavior in prototype and production work.
A majority of HOW’s judges and staff found the System so impressive they awarded it Best of Show in the In-House Design Awards last year. Says judge Ximena O’Reilly: “The thinking and efforts behind this project are massive—so comprehensive, user-centric and above masterful in the way the team took immense complexity to deliver a solution delivering intuitive simplicity.”
Executing a Vision
The Carbon Design System’s primary user group is IBM Cloud design and development teams. The project began when the IBM Cloud had been public for three years, with more than 130 different teams contributing to the UI, and yet only a two-page styleguide existed for them to reference. “We needed to promote consistency across the product, while also providing design guidance to teams contributing to the platform,” says Bethany Sonefeld, design lead for the Carbon team. “As a product team, I think we recognized the need for a design system; it was just finding the time and resources to put together a dedicated team.”
Initially, that group of Carbon designers and developers worked aggressively in two-week sprints to get an MVP out to their internal users (Cloud teams). Once they decided to go open-source, they had about three months to refresh the website, add in documentation around new components and plan for a public release. “Honestly, our team works best when we’re heads-down and have a deliverable to march toward,” Sonefeld says. “We like to challenge ourselves to see what we can accomplish in a given period of time.”
Of course, with a project this size, there were bound to be bumps in the road to deployment. “Being a team composed solely of designers and developers, we didn’t initially plan for a release strategy once we went open sourced,” Sonefeld says. “We had to scramble at the end to prep some materials for an announcement. We also decided to completely refactor the website (rebuild and restructure the code) to improve performance and update our documentation. Whenever you do a refactor at a large scale, there are always small roadblocks or bugs that come up that you don’t initially plan for.”
Dhanaraj adds that one of the biggest walls they had to break through was establishing a relationship between design and engineering. “Design teams shipping production code was definitely not a normal relationship, and getting engineering to trust our code output was a process,” he explains. “Once we hurdled that, we ran into an issue where the design teams were deviating, feeling constrained by the rules the system had put into place. Getting a feedback loop in place to make both types of teams comfortable was pretty crucial in moving the project forward.”
Working Together
The Design System has eliminated a lot of the pain points from the process of design to development to production. And the development uptake of the project has been huge: Between the two main code implementations, they had more than 40,000 installs in the last month alone.
Internally, Carbon drives the UI for many of the modern IBM Cloud applications, and is slowly growing outside Cloud to other divisions in IBM. Designers use the kit to quickly bring together interfaces, and developers use the components to build those interfaces. Not surprisingly, the internal scale of IBM Cloud sometimes does take people, even people from IBM, by surprise, though. “People are shocked when I mention that IBM Cloud is comprised of over 100 different teams, all trying to execute on a shared vision—just with different design, development and management teams,” Dhanaraj says. “It can be a lot to try to keep in your head!”
To combat that, the Carbon team meets with its IBM Cloud sponsor users biweekly to talk through how they’re using the components, what could be improved and to anticipate future needs for these teams. They also maintain a few Slack channels that now exceed more than 500 internal users. Dhanaraj says their motto is that users should want to use Carbon, not merely be forced to by some executives from above.
“What’s great about Carbon is that it provides the framework for building out experiences—teams can then take the system, modify it and combine elements to build something more complex,” Sonefeld says. “Outside of the organization, we’ve seen shots posted on Dribbble from designers who used Carbon for their personal projects. It’s super inspiring to see that the system can work for more people than we originally intended.”
As far as the impact the kit has had on the company, Sonefeld says they’ve seen better consistency with design comps—small details that make a difference in an experience like consistent usage of glyphs in buttons. They’ve also noticed faster turnaround rates for design assets, since a lot of the small details don’t have to be thought through.
Dhanaraj says he particularly appreciated the collaboration between designers and developers: “Each brings their own perspectives on things, so it’s really cool to see our designers come up with some interesting new interaction, our developers build a version, and then our designers and developers work together to iterate and create the best version of something.”
Sonefeld says she’s enjoyed working with the developers to build innovative things that push their boundaries. “Oftentimes, when I talk through a design with my developers and ask, ‘Is this feasible?’ their response is, ‘We can build whatever we want,’” she says. “Their confidence and knowledge inspires me to think outside of the box when it comes to design.”
Making Things Better
Building, deploying and maintaining a project of this size and scope is no small feat, especially for an in-house team of seven. At a less design-centric company, it could very well lead to frustration and burnout. But Sonefeld and Dhanaraj have been energized by the project and the impact it’s had throughout IBM. “I’m really proud of the culture we’ve created with this project and its effect on the division as a whole,” Dhanaraj says. “We open up all our sprint tasks, issues and roadmaps to anyone in IBM who wants to see it. It promotes an attitude of transparency that I’ve seen being duplicated with other teams on the project, as well.”
Sonefeld says she’s most proud of the amount and quality of work they’ve accomplished with a small team of (relatively) new faces in the tech scene. For many of them, it’s their first or second job out of college, and she says seeing the attention to detail and talent her team has is incredible. “Carbon is our team’s labor of love. We put our heart and soul into this project, and what makes me happiest to see is each and every team member’s passion and dedication to Carbon,” she says. “Wherever we all end up in our careers, working on Carbon will always be a time I look back on with gratitude.”
As for the future of Carbon, Sonefeld says she’d like to see the team grow, add additional resources and really challenge themselves to see how they can continue to scale and maintain Carbon. Dhanaraj says he envisions trying to bring more and more outside contributors into the project and would love to see a thriving ecosystem of plugins and add-ons that a wide variety of people, both inside and outside of IBM, are jumping in to create and share. “Building the design system was the easy part,” Sonefeld says. “The tricky aspect now is figuring out how to continue to scale the system to work for the greatest number of people.”
The Carbon Design System Creative Team includes Bethany Schwanke, Chris Dhanaraj, Mari Johannessen, TJ Egan, Bethany Sonefeld, Tayler Aitken, Ian Fleming, Brian Han, Christine Tsai, Anna Gonzales, Akira Sudoh. Not all team members are pictured above.
(Related: See all the winners of the 2017 In-House Design Awards)
In-House Design Teams: Your Early-Bird Deadline is May 7, 2018!
Hear from IBM Design’s Bethany Sonefeld on what she sees as the benefits of winning a HOW In-House Design Award, and what impact it had on her career:
“We’ve seen adoption rates actually increase within IBM due to the press and marketing from our HOW award. We’ve also had designers and developers from other companies reach out who are interested in learning more about the system, how they could adopt or use it, and what benefits a design system could provide them with.
“I had the opportunity to speak at UX Pin’s Virtual Design Summit in February to share the story behind Carbon, and I feel that was a direct result of the press from HOW.”
—Bethany Sonefeld, design lead, Carbon Design System, IBM Design
See Sonefeld accept the team’s Best of Show trophy on stage at the upcoming HOW Design Live, and enter your own team’s work for your chance to win this year!