media-blend
text-black

The evolution of SAP product illustrations

default

{}

default

{}

primary

default

{}

secondary

At SAP, we see product illustrations as more than decoration; they’re a tool to communicate clearly, quickly, and meaningfully with our users. Over the past months, we’ve undertaken a thoughtful evolution of our illustration style guided by research, iteration, and user feedback. The goal: create visuals that speak a single, understandable language across all SAP products, in a way that resonates with users worldwide.

Building a unified visual language

As a part of a larger global brand refresh, a collaborative team was charged with coming up with an illustration style that could be used across SAP. “The goal of the overall illustration unification was to ensure SAP was using this visual medium to provide an additional layer of context and connection across all our brand and product touchpoints. It was crucial that we work closely with the product team to develop a style, expression, and use cases that could extend from our brand needs, all the way to our product specifications,” said Lee Schosid, Senior Director, Brand & Creative.

A key focus in evolving our UX illustrations was aligning them with our core brand values while balancing two distinct needs. Marketing illustrations are expressive and narrative-driven, designed to capture attention and evoke emotion through visual storytelling. UX illustrations serve a different functional purpose by providing clear visual cues that support user tasks without distracting from key actions or compromising usability.

Beyond aesthetics, UX illustrations must prioritize performance by delivering messages clearly, loading quickly, maintaining full responsiveness, and adapting seamlessly to themes and customizations to meet diverse user and technical requirements.

As part of this process, we asked ourselves, “How can everything regarding illustrations speak with one voice while still meeting specific product requirements?” Our challenge was to bring these perspectives together into one coherent visual style, clear enough to support usability, yet still warm, approachable, and on brand.

At the same time, we aimed to make the illustrations more realistic and people-oriented. Objects became more tangible, people more natural, and unnecessary background details were removed in favor of simple, single-color backdrops. We also shifted the focus from complex compositions to highlighting one main object at a time, keeping visuals easy to understand at a glance.

Color accessibility was another key consideration throughout this evolution. We carefully evaluated every color choice with accessibility in mind, aiming for strong contrast across all themes. Our goal was to create illustrations that are as accessible as possible for a broad range of users.

This was no small effort. We went through more than 250 drafts and iterations to refine the style and reach the final set of illustrations. Each was designed to be understood at a glance, built using a modular, LEGO-like approach that balances clarity with adaptability. Sometimes, a single illustration went through numerous iterations, changing shapes, colors, perspectives, and even the metaphor itself to ensure it communicated the intended message clearly. For example, for the “Unable to load image” use case, we started with a camera, adjusted colors and perspective, and eventually shifted to a broken frame, iterating multiple times to achieve the best contrast and clarity.

Finding the right metaphors

Illustrations tell stories, and metaphors are the language of those stories. But not every metaphor works universally. Something that resonates in one culture may be confusing, or even meaningless in another.

Through global external end-user research, combined with internal studies, we identified opportunities to explore new metaphors. For example, we found that many of the illustrations utilized a magnifying glass, but we wanted to avoid repetitiveness. Research guided us to develop additional, distinct metaphors that expand the visual language while staying recognizable. As part of this, we introduced a whole category of illustrations based on UI elements, fitting naturally for SAP as a technology company, bringing variety and relevance to the way concepts are represented.

Some metaphors are interpreted differently across cultures. In the “No data” use case, insights from global studies helped us develop a metaphor that communicates the idea consistently and intuitively worldwide, ensuring it is easily understood by all users.

With SAP’s diverse user base spanning more than 300M users across over 190 countries and 26 industries, respecting differences in ability, language, culture, education, gender, age, and other forms of human variance is a must. To ensure we are building inclusive and accessible products at every level of experience, we refined our visuals to be clear, direct, and meaningful for people everywhere.

With the new semantic ID system, design updates are delivered automatically through the design system. Designers can apply new or revised illustrations immediately, without extra work, ensuring that visuals stay consistent, accurate, and up-to-date across all products. This is a major step toward streamlined design and better user experiences.

By listening to users, studying cultural differences and other forms of human diversity, and testing extensively, our illustrations reflect empathy and real-world relevance.

Built to adapt

Creating a unified illustration style also meant addressing technical requirements across SAP’s ecosystem. Each design had to work seamlessly across breakpoints, UI elements, and multiple themes, including Morning Horizon (light), Evening Horizon (dark), and the High Contrast White and Black themes.

With the SAP Fiori Web UI Kit, designers can easily adapt illustrations for different scenarios. By using pre-applied color tokens, switching between themes happens instantly with a single click, without any additional adjustments. Designers can also switch between size variants or toggle backgrounds on and off, making it straightforward to fit illustrations into various UI contexts while keeping the style consistent and clear.

A visual language for everyone

Every illustration tells a story of research, experimentation, and listening to users. Guided by feedback from people around the world, each visual was shaped to reflect their needs, how they interact with SAP products, and the insights we gained from observing and understanding their experiences.

In the end, this is what our visual language stands for: creating clarity, connection, and meaning for everyone who uses SAP products.

Easily adapt illustrations with the SAP Fiori Web UI Kit

Explore Web UI Kit