CLIENT – IBM
PROJECT – Generative art leadspace component
ROLE – Designer • Advocate

CHALLENGE
Thousands of IBM product pages (older “foundation” products) were slated for automated migration without design resource allocation. We needed a unified visual solution for the leadspaces that communicated the unique attributes of each product, reinforced the brand, and could automate at scale. Historically, generic and interchangeable stock photographs of “people using devices” was the fallback option, which was not acceptable to us.

CONSIDERATIONS
Ease of us: Minimal budget, design time, and product team attention. The solution would have to be implemented in AEM.

Outdated product UI: Not all of IBM’s software products have been “Carbonized,” or designed in the Carbon Design System. Designers and strategists were hesitant to show outdated products that were aesthetically unappealing and clashed with the Carbon design on the rest of the page.

A modern solution: IBM is a forward-thinking tech company already embracing AI (with its watsonx products.) They had used generative art before, for Think 2020 branding.

GOAL
Leverate existing systems – IBM’s extensive Design Language, including a pictogram library, grid system and broad color palette and the existing product taxonomy – to create a solution rooted in data, with concrete meaning.

DATA MAPPING
Every IBM software product has an ID code (EDG ID) that assigns its product type, lever and category within the digital catalog. This allowed us the control to include consistent visual elements between, for instance, all security products.

TILE ASSET LIBRARIES
We built a collection of graphics libraries for each data dimension. Each tile had to be pixel-perfect to properly align with the others at multiple breakpoints on a dot grid.

COMPOSITION
We determined a set of pattern variations that established visual hierarchy through size and position of the tiles. To create a visual balance of tiles, we started with a 1:1 aspect ratio and assigned it the most important and fixed data dimension, ‘product category’. We then proportionately scaled the supporting tiles by ½ until we had assigned all tiles a data dimension.

RANDOMIZATION
Pattern, exact tile graphic for each dimension, and color palette were randomly assigned through an algorithm.

TESTING
Since we had millions of options with the variations above, testing proved unwieldy. We eventually reduced the patterns and points of graphics interaction for more control over the final compositions.

DEVELOPMENT
Early input from stakeholders and design leadership championing the work helped prioritize its development in AEM.

“Generative art refers to any art practice where the artist creates a process, such as a set of natural language rules, a computer program, a machine...which is then set into motion with some degree of autonomy contributing to or resulting in a completed work of art.”

- Philip Galanter, International Conference on Generative Art