A detailed flowchart for a digital product, showing multiple screens, wireframes, and interactions for different device types, organized into rows labeled multiple styles and collaborative or single options.

IBM PRODUCT IMAGERY SYSTEM

Designing order into IBM's product universe

CLIENT – IBM
PROJECT – IBM Product Imagery System
ROLE – Designer • Strategist • Author

CHALLENGE
IBM provides information about thousands of software products across its digital marketing ecosystem, but lacked a 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: These product images catered to multiple audiences — the C-suite who decides to purchase the product, the practitioner who implements it, and the 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.

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

A collection of digital screens showcasing various Watson Assistant interfaces and chatbots, with a person working on a laptop at a wooden desk.
A digital illustration comparing literal and abstract representations of end user spectrum in Watson Assistant, with screenshots of mobile banking apps, a website interface, chatbot icons, and neural network diagrams.
Screenshot of a presentation slide showing a diagram titled 'Single component spectrum — dialog flows' with multiple overlapping wireframe images of computer screens displaying user interface designs. The bottom of the slide has a timeline with 'LITERAL' on the left and 'ABSTRACT' on the right, connected by a dotted line.
Collection of digital screenshots showing various user interfaces, charts, charts, and devices, related to online analytics, shopping, and data management.
A diagram illustrating different functions of how to communicate or demonstrate a product or concept, with color-coded boxes containing text such as "Prove that the product is real," "Show the magic / our differentiators," "Help business leaders visualize the solution they need," "Show that our customers have built cool things with it, and you could too," "Practitioner can quickly evaluate relevance, quality, usefulness," "Demonstrate a particular feature or concept," "Show the range of capabilities," "Hint at particular product qualities," "Reinforce our brand," and "Inspire / generate confidence in a particular approach." The diagram has a dotted line labeled "LITERAL" on the left and "ABSTRACT" on the right, indicating a spectrum from literal to abstract.
Comparison chart of three concepts: Literal, Balanced, and Abstract. Each concept describes different characteristics with associated icons.

HYBRID UI LEADSPACE ILLUSTRATION SAMPLES CREATED BY OUR TEAM