Carbon Design System has matured quickly from infancy to adolescence. As we approach our public, open source general availability and release of 7.0.0, the system has already evolved into a larger product than the team expected. As issues arise, we have to adapt quickly and develop strategies to control quality, while still growing the design system. A few notable challenges we’ve faced are theming for broader platform adoption, supporting multiple frameworks, open sourcing our GitHub repositories, and scaling beyond IBM Bluemix to the greater IBM Cloud.

Choosing a light UI theme based on user feedback

Our first major hurdle was building a light UI theme to accompany Bluemix’s previous dark theme. Debate over Bluemix’s look and feel began in its beta days, centering around light and dark user preference. Branding research initially informed the core visual and marketing teams that the majority of our users would prefer a dark theme.

But, as the product shifted, so did our user base. Overwhelming user feedback told us that 50% of our users thought the dark UI was uncomfortable to use. Further testing ensued, leading the core team to consider offering both options as a test to see how many users opted for light versus dark UI, and what impact that would have on code base support and maintenance.

In summer 2016, we pushed forward with a plan for a light theme and discovered that it was much easier to create and implement than we expected. The visuals were created over two sprint cycles by two of our visual designers, Anna Gonzales and Tayler Aitken. Light theme variations were voted on by 80+ strong designers, front-end developers, and engineers on the entire Bluemix platform. Within six weeks, we had a production-ready light UI theme for the platform. Two-and-a-half days after that, Mari Johannessen, one of our front-end developers, finished and pushed the first theme of the Design System.

The timing was essential, as the platform was about to go through an evolution of its own with the merge of SoftLayer, an infrastructure product. SoftLayer already had its own built-in light UI and its users adamantly objected to dark UI. The new light UI theme we built as a test option for users was positively received and quickly adopted. It is now the only theme on the core platform. We still support our dark theme and keep the code and kit up to date, but the light theme is now the default for Carbon.

Framework adoption

Carbon was initially built in vanilla JavaScript, making it adaptable and scalable, but it was not efficient for teams already using Polymer or React frameworks. An engineer in our community, Akira Sudoh, independently created and contributed back a Polymer library to assist in this effort. This library was a massive step for framework adoption and gave us confidence in our decision to make the project open source. (We still have doubts over whether or not Akira sleeps.)

Following this success, we created a React library, which was quickly picked up by teams from other parts of the product who have contributed large amounts of work and kept the library healthy, active, and up to date. This was another large piece of the infrastructure products merger that has eased the transition into one united Bluemix product look and feel. We don’t intend to support any other frameworks at this time, but if the need arises, we know we can meet it.

Open sourcing the project

A benefit to working at IBM is its support of open source technology. Open source has always been an important goal for our team for several reasons. First, adoption success wouldn’t be possible without the efforts mentioned above by independent engineers and teams contributing back to our repos. Another is that we want to make it as easy as possible for our users to adopt and make use of our components, and not all of our users can get behind our private GitHub firewall. Additionally, we want to make the assets we’ve created to be openly available for our marketing vendors and third party services. Lastly, we’re proud of our work and like to talk about it.

Beyond Bluemix

The latest evolution of the design system, which caused us to rebrand from Bluemix Design System to Carbon Design System, is adoption outside of the Bluemix platform. We’ve created a third theme as a discussion piece for the Watson brand, and we’re hopeful that we can support other branding efforts in the near future. The light and dark themes are still available and in use by products within and outside of Bluemix. However, branching into theming specifically for different branding perspectives within the IBM Design Language requirements is a new challenge that we openly embrace.

Our team has been available to meet these challenges because of our members and community. We have a solid, balanced team of full-time supporters, half development and half design, who are personally invested in the success of the system. Our strong community of users and contributors in GitHub and in our Slack channels let us know when and why something isn’t working and offer solutions and research for needed changes. There will never be a time when the Carbon Design System is “finished” because it’s a living, breathing, evolving system that will adapt and grow to fit the needs of its users. If you have any questions, concerns, comments, or you’re just interested in talking about what we’re doing, please visit our website at carbondesignsystem.com, join our Slack channels, or email me directly at bschwan@us.ibm.com.

Join The Discussion

Your email address will not be published. Required fields are marked *