Opal AI

/ 2024

A documentation of our AI design language for Opal.

The AI Design Guild

Problem:

With all the products constantly releasing new AI features, along with the great ideas collected from our design hackathon, divergence and inconsistency became evident. We are in need of refined guidelines for the product and design teams to follow.

 

Action:

I formed the AI Design Guild to assist in finalizing our AI design language and guidelines.

The design process​

Audit:

We collected all existing patterns and designs, helped each guild member understand how each feature functions, and started brainstorming ways to categorize the interactions.

all ai patterns by date
Sorting:

We began grouping the interaction patterns by their impact scopes, such as macro product level, page level, and inline/micro level. However, we quickly realized that we needed a more generic way to categorize our interactions. Similar to Microsoft’s Copilot design, we settled on three AI patterns: Side, Inside, and Takeover.

Wireframes:

Initially, the team was eager to jump into high-fidelity designs. 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.

AI Patterns
Opal Component Library:

Once we aligned on the flows and interactions, we started polishing the designs and built the design component library in Figma.

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.

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.

clink to zoom in

Guiding Principles​

The team has aligned on 4 guiding principles to serve as a foundation for designing effective and ethical AI-driven experiences. 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.

  1. Solve real user problems
  2. Support the new mental model
  3. Provide appropriate amount of trust and reliance
  4. Put humans in charge

 

⇒ I share more details in this log.

Next Step

Getting feedback & keeping iterating! How do we ensure that we are not just pushing out AI features for AI’s sake? How are we avoiding creating another Clippy? (No offense, Clippy!) Be bold, and stay humble; be creative, and stay responsible 🙂

The Vision