IBM Internal Design System

Company IBM
Year 2024
DisciplinesDesign Systems, Figma
PlatformsMobile, Web

Overview

w3DS, IBM's internal design system utilized across numerous intranet sites and applications, faced criticism for its lack of core features, components, patterns, documentation, and functionality, prompting a comprehensive rebuild to address these shortcomings and better align with IBM's brand direction.

Background

The feedback we received from our product teams highlighted significant concerns about w3DS. It was described as outdated, presenting challenges in usability, and lacking alignment with IBM's esteemed brand identity. There was a clear consensus that w3DS required modernization while also remaining true to IBM's brand values.

Approach

To tackle the challenges posed by w3DS's deficiencies, we adopted a multifaceted approach that prioritized collaboration, consultation, and empirical validation. We kickstarted co-creation sessions with core users, fostering continuous feedback loops to ensure the evolving design system met their needs effectively. Additionally, we consulted with our design systems enablement craft lead for guidance and support, drawing upon their expertise to steer the redesign process effectively. Seeking inspiration and best practices, we looked to IBM's official design system, Carbon, as a reference point. Recognizing the subjective nature of feedback regarding w3DS's perceived lack of modernity, we took a proactive stance by conducting an objective study to define "modern" in the context of our users' expectations. This study enabled us to gain a deeper understanding of what "modern" meant to our users and validate our findings through direct engagement with them. Furthermore, we prioritized collaboration with developers from the outset, leveraging the same shared Figma file for co-designing, ensuring alignment between design and development efforts from the early stages of the redesign process. This collaborative approach facilitated smoother communication, streamlined workflows, and ultimately led to a more cohesive and effective design system.

Challenges

Commencing the redesign of w3DS just a month before the onset of the global COVID-19 pandemic presented unparalleled collaborative hurdles for our team, especially given the inherently collaborative nature of such a task. As we embarked on this ambitious project, we turned to Figma as our design and collaboration platform of choice, leveraging its real-time collaboration features to navigate the challenges posed by remote work and physical distancing measures. Initially, the redesign showed promise, but it soon became evident that there was a misalignment in how our designers and developers perceived collaboration. While our design team believed they were fostering collaboration by sharing visual explorations multiple times a week, our development team felt differently. This disconnect reached a critical point when our design team proposed moving forward with a design direction after presenting mood boards, prompting valid concerns from our development team about the lack of true collaboration in the exploration phase. In response to this pivotal moment, our development lead, Nick, proposed a dramatically different approach that reshaped the trajectory of the design system and my own growth as a designer. Prior to this, I had operated under the belief that perfectionism and a reluctance to share work until it was "just right" were necessary traits for a designer. However, through Nick's guidance and the collaborative environment fostered by Figma, I came to understand the true essence of collaboration. True collaboration happens when we break down our walls and allow others into that vulnerable place inside our minds where we dare think of creating something bold. Moreover, the use of Figma facilitated a significant breakthrough as my colleagues Pat, Eug, and I were able to rapidly iterate on designs, producing close to 50 iterations of alerts in a matter of minutes—a feat that previously would have taken hours or even days. This newfound efficiency not only transformed our workflow but also reshaped the dynamics of giving and receiving feedback. With Figma's seamless sharing and duplicating capabilities, providing honest and constructive feedback became less about telling and more about showing, fostering a culture of open collaboration where ideas could be freely explored and refined without fear of judgment or hesitation.

Outcome

Despite the unprecedented challenges posed by the global COVID-19 pandemic and the initial misalignment in our approach to collaboration, the redesign of w3DS yielded significant positive outcomes for both the design system itself and the growth of our team members. First and foremost, the redesigned w3DS emerged as a robust and user-centric design system that addressed the longstanding deficiencies identified by our product teams. With enhanced core features, components, patterns, documentation, and functionality, w3DS served as a comprehensive toolkit that empowered teams across IBM to deliver cohesive and consistent digital experiences aligned with our brand direction. Moreover, the redesign process served as a catalyst for personal and professional growth, particularly in my own journey as a designer. The guidance and mentorship provided by Nick played a pivotal role in reshaping my perspective on collaboration and perfectionism. Embracing a culture of true collaboration, where ideas are freely shared and iterated upon, has not only transformed my approach to design but has also fostered a more inclusive and supportive environment within our team. Additionally, the adoption of Figma as our primary design and collaboration platform proved to be a game-changer, enabling us to overcome the challenges of remote work and streamline our workflow. The platform's real-time collaboration features empowered us to iterate rapidly, explore ideas freely, and provide constructive feedback in a seamless and efficient manner. As a result, our productivity soared, and we were able to produce high-quality designs in a fraction of the time it would have taken using traditional methods. In summary, the redesign of w3DS not only delivered a modern and cohesive design system but also paved the way for personal and professional growth, fostered a culture of true collaboration, and revolutionized our workflow through the adoption of cutting-edge tools and methodologies. Moving forward, we are well-equipped to tackle future challenges and continue driving innovation within IBM and beyond.