SAP AI Design Pattern Library

As SAP expands AI across its product ecosystem, teams are designing new agentic experiences through Joule, SAP’s AI copilot, and JouleWork, its integrated AI workspace.

I developed a library of 18 reusable interaction patterns to help designers create experiences that remain predictable, transparent, recoverable, and controllable across products.

Teams were working across disconnected flows, documentation, and prototypes. AI agents operate across different products, workflows, and levels of autonomy. Although each experience serves a distinct use case, users still need agents to communicate clearly, handle failures safely, and return control when human judgment is required.

I reviewed source files for existing Joule and JouleWork mockups across SAP product domains, comparing their behaviours with internal guidance and industry patterns. I organized recurring behaviours and gaps into four categories, then refined the framework through feedback from two lead designers and three engineers.

Each pattern comes with practical guidance, examples, anti-patterns, and use-case tags, giving teams a shared foundation while staying flexible across products.

For example, the Thinking State pattern replaces generic loading indicators with clear descriptions of the agent’s current task. “Analyzing three documents” gives users more context and confidence than “Loading.”

The library’s structured guidance is the knowledge base for a Figma AI skill. It evaluates product screens, identifies missing or inconsistent behaviours, and recommends relevant patterns within designers’ existing workflows.