Design system adoption

UX strategy & design operations

The mission
As we were in the process of transforming the SPSS Statistics software into a new generation version, the Carbon Design System was released. At this stage, the project was in an experimental phase, built with a rudimentary-style guide. Neither the design nor the codebase were mature, and we only covered the basic end-to-end user flow.The project was framed by a tight schedule with a dense roadmap , with needs to be addressed for a multitude of users, and new capabilities to be added at that point. Having opted for the Carbon Design System, it had to be seamlessly integrated into our roadmap, and also had to fit our project endeavors.
2019 - 2021
Design Lead

The challenge

One of the most challenging aspects of the experience transformation regarded he complex procedure set-up pages. These pages represent the largest  part of the application with over 700 screens. They follow the same type of structure and reuse, the same or similar patterns across a multitude of use cases.

To ensure a streamlined experience for our users,  the adoption of Carbon Design patterns had to be consistent with all use cases in  all 700 pages.

Software structure and repetitive pages

The approach

To meet scalability and maintenance requirements, we aimed at integrating Carbon in the most effective way by limiting the number of custom components.

Designing each of the 700 set-up pages one by one would have been time-consuming and prone to errors. In order to prevent this, we took a systematic approach.

The design team produced Carbon adoption guidelines to be applied in any procedure page. The document constitutes a complementary guide to the Carbon System, describing which guidelines, components or patterns are to be employed relative to a specific use case.

The system was integrated with a Jason logic by the devolvement team to become a standard for any further integration.

Extract of the carbon adoption guidelines

The phases

To facilitate our Carbon adoption, I explored different approaches and evaluated the best way to proceed with our architect and UI development lead.

The Carbon adoption strategy had to take into consideration the current state of the project, as well as our roadmap and our long-term goals. It had to allow a scalable system to grow efficiently within our software and give sufficient room to include new experiences, meeting the users’ needs.

Phase 1

The first phase of the initiative focused on adjusting the initial build to match the main carbon color theme, while migrating a set of basic components like dropdowns or checkboxes. This phase intentionally required  little effort. The intent was to generate a base for the next steps of the project,  allowing a streamlined visual appearance across the application for our program participants.

Comparison initial software vs. phase one of carbon design system adoption

Phase 2

The second phase concerned the scalability aspects of the application, in the 700 set-up pages. We defined the recurrent patterns required to build every set-up page. While we initially had only implemented the first set of procedures, with our  Carbon adoption guidelines, we were at any time able to add new procedures without involving design.

Comparison of phase one and phase 2 of the carbon design system adoption

Phase 3

As the development team continued to build set-up pages with the help of our Carbon adoption guidelines, the design team could engage in phase 3. We turned to more specific areas of the product in this phase to complete full implementation of our Carbon guidelines. In addition, we included more user value with new experiences, solving pain points identified through user research. For example we could extend the data view area of the product with an data overview, giving them instant insights on their data characteristics and quality.

Comparison of phase 1 and phase 3 of the carbon system adoption resulting in major innovations for the prodcut.

The impact

The design system adoption was an opportunity to bring our project to the next level. The product now reached the necessary maturity to be released as an open early access program.

We shared our migration concept with the Design Organization Community at IBM as an example to follow for product transformation.

We have been working closely with the Carbon Design team  and made available our patterns and logic, becoming one of the fourth most active contributors to the open-source system worldwide.

Other projects: