In an organization as large as IBM, keeping consistent design patterns and unified visual language can be an extreme challenge. Project Voltron (an internal nickname) was a design department-wide initiative to audit, augment and update a suite of over 100 enterprise software products to adopt a new design system seamlessly and simultaneously to improve the overall user experience and visual cohesion. I participated as part of the design effort to create the pattern and asset library for the IBM Cloud design teams to adopt for their service.
In an organization as large as IBM, keeping consistent design patterns and unified visual language can be an extreme challenge. Project Voltron was a design department-wide initiative to audit, augment and update a suite of over 100 enterprise software products to adopt a new design system seamlessly and simultaneously to improve the overall user experience and visual cohesion. I participated as part of the design effort to create the pattern and asset library for the IBM Cloud design teams to adopt for their service.
Visual Design Guild
Visual Design Guild
Carbon 10 was released in Q2 2019. The update included major visual and structural changes to align with the revamped IBM Design Language. With hundreds of highly specialized services in the suite of offerings, the release wasn't able to cater to the real product needs. A design system is only as good as its ability to stay consistent and we had each product team interpreting these patterns all differently because of this.
After making a case for the need to have a unified approach, fortunately, the design department had the support of our IBM Cloud VP of Design, Arin Bhowmick, and Director of Design, Bill Grady, to mandate all teams to participate and adopt the new system simultaneously.
With a dedicated team in place to manage the roll-out, various design leads and team members across the department formed a super team to flesh out the pattern and asset library IBM Cloud was lacking.
Video created by the Platform Integration Experiences team
All hands on deck
What started off as a simple suggestion to our team manager, quickly turned into a design department-wide Design Jam involving participants from dozens of teams. This preliminary step is a day-long workshop to establish a unified goal and to set aside a specified time to explore initial designs outside of our normal product obligations. The teams formed for this workshop were from different roles and service teams, which allowed us to share different perspectives and unique needs for each service to create the first pass of patterns that were flexible.
Define, mine, refine
The patterns that were created from the Design Jam were a foundational place to begin to test and break. My specific role was participating in a visual design guild that was formed to take the exploration and refinement phase to completion. Week to week, we would iterate (so. many. iterations.), meet, critique, and refine each pattern further. This also included special critique sessions with our ECD and Distinguished Designers, Mike Abbink and Adam Cutler (basically IBM celebrities!).
In addition to thinking visually through the components and patterns, it was important for us to do our due diligence to speak with SME's and trusted users to understand what capabilities and visual cues to be considered an improvement. It didn't merely come down to being better looking or matching the design system, as every service catered to a very specialized type of user or product offering that needed to be accounted for. My specific focus centered around the order summary pattern, cascading selection, and various parts of the provisioning page that is universal to all Cloud services, such as the About tab.
THE FULL PACKAGE
Modify and codify
Once patterns were nearly locked down, they were vetted by the Carbon team, Brand team, and Cloud community to shore up its usage guidelines and measure their adherence to the original design system. These patterns and components were then turned into coded templates to ensure consistency with a low barrier to entry for all teams. The Cloud patterns included APIs that provided baked-in code and parameters to save tremendous time and effort, especially for repeated elements
Phases and planning
Because there were so many teams that needed to employ this new design, the governance team created a phased project plan to allow for the teams to take calculated steps to full adoption without breaking all of our services at the same time. First, we migrated our new Carbon 10 components and patterns over top of our Carbon 9 theme, so that the transition was not jarring for the user. The second phase entailed toggling the Carbon 10 theme on simultaneously as a platform. By phase three, when services had Carbon 10 themes and components active on their service, the teams layered on the Cloud PAL patterns designed to specifically cater to our unique needs and unify the experience. The last phase allowed all teams to test and refine the newly minted designs as they saw users actively use them and maintain iterations.
User success is our success.
The epitome of "teamwork makes the dream work," the positive outcomes of this enormous effort proved to be very clear once tested with our users. As of January of 2021, 116 of 155 services adopted the Carbon 10 and Cloud PAL system we created and saved the designers and developers an estimated 2,000 hours per pattern, making the organizations 80% more efficient in future creations.
IBM Cloud's NPS score improved in the first three months after the design system was fully adopted.
IBM Cloud saw an 18% reduction in support tickets where teams implemented the Carbon 10 guidelines and PAL.
With the updates and consolidation of patterns, we were able to reduce the user journey by 7 steps and improve the average time to provision a service by 4%.
The Platform Integration Experiences team led by Tessa Rodes
Isabelle Encela, Steven Parker
IBM - InterconnectivityUser Experience, User Interface, Design Lead, Product Strategy
IBM - Project VoltronUser Experience, User Interface, Design Systems
Phlur FragrancesBranding, User Experience, User Interface
Bespoke Co-OpBranding, User Experience, User Interface
KoffeteriaBranding, User Experience, User Interface
GET AT ME