CLIENT – IBM
PROJECT – IBM product imagery guidance
ROLE – Cross-functional team • Designer • Author

CHALLENGE
IBM provides information about thousands of software products across its digital marketing ecosystem, yet had no unified visual language to show these products. Although robust, the IBM Design Language (IDL) did not provide direction for product imagery either.

CONSIDERATIONS
Format: Although product imagery is used in multiple formats (static images, demos, webinars, tutorials, interactive widgets, product trials, etc.) we focused on static images.

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, overly busy and clashed with the Carbon design on the product page.

Audience: The product images cater to multiple audiences –  the C-suite who decides to purchase the product, the practitioner who implements it, and the end user/consumer who interacts with it.

GOAL
Provide a framework and inspiration for grounded decision making in the visual expressions of our products as well as empower designers with questions, prompts, and considerations for informed conversations with digital strategists and product teams.

PRODUCT IMAGERY SPECTRUM
First, we conducted an audit of existing imagery and determined the need for a range of literal to abstract product expressions, from photographs of people interacting with the software in real environments to isometric illustrations. Then, we established a product imagery spectrum as a tool for designers to determine when to use which type of imagery. The examples at right demonstrate the spectrum in use with one of IBM’s products with robust imagery available, IBM Watson Assistant.

Additional design considerations included:
• Device frames (laptop, tablet, mobile)
• Strategic cropping to emphasize a specific feature
• Pop-outs to emphasize a specific feature
• Mix of element fidelity
• Collage elements
• Borders
• Drop shadows

PRODUCT IMAGERY GRID
Building upon the literal to abstract product spectrum (x-axis), we explored the stylistic range of expression within the IBM Design Language (y-axis.) These included single and multiple/collaged product images, and flat, line and isometric illustrations.

HYBRID UI STYLE
We identified an ideal, hybrid UI style that gave designers the flexibility to show product features in a range of fidelity, as well as incorporate appealing branding details like pictograms. This new style of product imagery launched in the leadspaces of the product pages that we migrated.

SOLUTION
We identified an ideal hybrid UI expression that launched a new style of product imagery in the leadspaces of the product pages that we migrated. We compiled all of the research and work into a presentation* and eventually codified it for a broader audience on the IBM.com documentation site.

*Available upon request