As AI features rapidly emerged across products, design patterns began to diverge. Teams were solving similar problems in different ways, leading to inconsistency, duplicated effort, and increased cognitive load for users.
The risk was not only visual inconsistency, but fragmentation of trust, interaction models, and user expectations. Without a shared design language, AI would feel like a collection of features rather than a coherent system.
This case study documents how we established a common AI design foundation for Opal that enables teams to move fast while maintaining consistency.
Action:
To address this, I formed the AI Design Guild, a cross-functional group of designers responsible for defining shared AI interaction patterns, principles, and guardrails across products.
The goal was to create a flexible design language that teams could apply consistently while supporting diverse use cases and rapid experimentation.
⇒ Amit Mojumder, Katie McClure, Kamila Mirashnichenka, Mari Hirano, Pei Chien
The design process
Audit:
We began by collecting every existing AI-related pattern across products, including chat interactions, inline suggestions, and automation triggers. Each guild member walked the group through how their features worked, what problems they were solving, and where users struggled.
This surfaced overlapping solutions, inconsistent metaphors, and early signals of cognitive overload. These were clear indicators that a shared framework was needed.
AI Features
Sorting (Pattern Framework):
Initially, we grouped interactions by scope, such as product-level, page-level, and inline interactions. However, this model did not translate well across teams or future use cases.
Inspired by Microsoft Copilot’s approach, we reframed the system around user perception rather than technical scope. We landed on three core AI patterns:
Side: Persistent copilots and assistants
Inside: Contextual, in-place AI interactions
Takeover: Full-focus AI moments for complex tasks
This framework became the backbone of our AI design language, making patterns easier to reason about, teach, and apply.
Pattern Sorting
Design Decisions
Several intentional decisions shaped the AI Foundation:
Flows before fidelity
We aligned on interaction flows before visual design to focus discussion on behavior, state transitions, and user control. This allowed teams to resolve core interaction questions without distraction from UI details.
Interaction patterns over feature patterns
We designed around how users experience AI, not how features are implemented. This ensured the system could scale across products, agents, and future capabilities.
Explicit support for multi-agent interaction
As Opal evolved beyond a single assistant, we needed a clear way to address multiple agents. The @mention pattern made agent targeting explicit, discoverable, and controllable.
Guardrails without rigidity
The system was designed to guide teams rather than constrain them. Patterns and principles serve as defaults, with room for judgment when needed.
Wireframes:
We started with wireframes to align on interaction flows and system behavior before investing in visual polish. This approach helped the team reach alignment faster and reduced rework downstream. I asked the team to step back and start with wireframes to agree upon the flows first. This made team collaboration more efficient, and we actually saved time by leaving out the UI details.
Interaction Wireframes
Opal Component Library:
Once we aligned on the flows and interactions, we started polishing the designs and built the design component library in Figma.
Components
Opal Chat
Buttons
Icons
Interactive Islands & AI Agents:
Interactive islands enable users to interact with Opal (our AI) from the copilot experience (the side pattern) or in-place (the inside pattern) contextually and trigger actions directly within the products. This opens up great possibilities for AI to truly demonstrate its power.
This approach reduced context switching and made AI feel embedded into the product rather than layered on as a separate mode.
One design challenge that we are still validating is how we support the use case of multi-agents. We landed on using the '@mention' pattern to allow users to interact with desired agents.
Interaction Islands
Guiding Principles
The team aligned on four guiding principles to support effective and responsible AI design. These principles serve as lightweight guidance rather than strict rules, helping teams make informed decisions while keeping users in control. These principles are intended to help the team understand best practices and apply them, make informed decisions, and foster creativity while maintaining the focus on user-centric design. Just like our design system, this is a living document that we anticipate will be updated and changed to reflect the new AI era.These principles are meant as guidance, not strict rules. The team should always use their best judgment to determine whether a principle applies to their particular use case.
Solve real user problems. AI should earn its place through utility, not novelty.
Support new mental models. Help users understand what AI can and cannot do.
Calibrate trust and reliance. Avoid overconfidence and blind automation.
Put humans in charge. Users should always understand and direct outcomes.
These principles are intentionally lightweight. Like our design system, this is a living framework that evolves as AI and our understanding of it mature.
⇒ I share more details in this log.
Outcome and Ongoing Work
The AI Foundation is now used across multiple Opal products and serves as the shared framework for designing, reviewing, and shipping AI features across teams.
The work is ongoing. We continue to validate patterns, gather user feedback, and refine guardrails to ensure AI is solving meaningful problems rather than adding novelty.
The goal is to stay bold without repeating past mistakes, and responsible without slowing innovation.