Hey, hi, hello! I’m iterating on my portfolio, so you may see some wonkiness here and there. Thanks for stopping by—updates are on the way!

Carbon for IBM.com

Company IBM
Year 2021–Present
DisciplinesDesign Systems, Figma

Overview

As the Figma Implementation Lead for Carbon for IBM.com, I was responsible for delivering design tooling solutions that optimized how page owners, designers, and developers create experiences for IBM.com. Carbon for IBM.com is an open-source design system designed to support IBM’s web experiences. My focus was on solving complex design challenges within Figma, particularly around creating aspect ratio cards and layout components that could flexibly adapt to dynamic content. This work ensured that IBM.com’s web pages were visually consistent, responsive, and adaptable, providing both the design and technical foundations for scalable web experiences.

Background

Carbon for IBM.com is IBM’s open-source design system created specifically to support the development and maintenance of the IBM.com website. This system includes working code, Figma design tools, and resources used by page owners, designers, and developers to build and maintain pages on the platform. The design system provides a unified visual identity, improves development efficiency, and ensures the consistency of IBM’s web experiences.

Given the unique needs of the IBM.com platform, Carbon for IBM.com required specialized components and patterns, particularly for page layout sections and responsive aspect ratio cards. My work was focused on implementing technical solutions in Figma to ensure these components were user-friendly, scalable, and adaptable across different page layouts.

Approach

In leading the Figma implementation for Carbon for IBM.com, my efforts centered on solving two key challenges: optimizing aspect ratio cards and enhancing page layout sections within the Figma library.

Aspect Ratio Cards
The primary challenge with these cards was to ensure that they maintained a consistent aspect ratio while allowing the content inside to expand. I developed a Figma solution that set a min-height based on the aspect ratio while allowing the card to grow vertically if the content required it. This ensured that the cards were not only responsive but also maintained visual integrity across different screen sizes.

Page Layout Components
Carbon for IBM.com uses a range of page layout sections to structure web content. These components needed to be flexible enough to handle dynamic content while still adhering to IBM’s design standards. I worked on implementing Figma technical solutions that allowed designers to easily configure and customize these layout sections. This reduced complexity and ensured consistency in how web pages were constructed, providing designers with a set of modular components that could be reused across multiple projects.

Scalability and Performance
As part of the Figma implementation, I ensured that both the aspect ratio cards and layout sections were optimized for performance and usability. I streamlined the Figma components to reduce unnecessary variants, making it easier for designers to implement these components without compromising functionality or design quality.

Collaboration and Training
I worked closely with page owners and developers to ensure that the Figma components aligned with the development team’s needs. In addition, I led training sessions for designers, helping them understand how to best use these tools in their workflows, particularly for complex web layouts on IBM.com.

Challenges

The key challenge was solving the technical problem of creating aspect ratio cards that could both respect a set ratio and grow when content overflowed. Ensuring that these cards didn’t truncate content or break the page layout required a deep understanding of both Figma’s capabilities and IBM’s design requirements.

Another challenge was the complexity of page layout sections, which required flexible components that could adapt to different types of content while maintaining design consistency. Creating these components in a way that was both intuitive for designers and aligned with development requirements was a significant technical and design challenge.

Ensuring scalability across hundreds of pages on IBM.com, all of which might use different configurations of the same components, meant that the Figma library had to be both flexible and robust. Managing the balance between flexibility and maintaining design integrity was crucial.

Outcome

Through my leadership, the Carbon for IBM.com Figma Library became a powerful tool for IBM’s designers, enabling them to create responsive and consistent web pages with ease. The aspect ratio cards now dynamically adjust to the content they contain, solving a key design challenge that had previously caused content overflow and layout issues.

The page layout sections were also optimized, allowing for better modular design across IBM.com pages, leading to faster design and development cycles. By simplifying these components and reducing the number of variants, I helped improve designer efficiency while ensuring that IBM’s web experiences remained visually cohesive and adaptable to a wide range of content needs.

Ultimately, the work I led in Figma implementation enabled IBM’s design teams to produce more scalable, consistent, and high-quality web experiences on IBM.com, contributing to both the usability and performance of the platform.