‍

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.

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.

‍

‍

‍

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.

‍

‍

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.

‍

‍

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.

‍

‍

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.

‍

‍