Design Leader

Standardizing Agentforce Panel Across Builders

 

Standardizing Agentforce Panel Across Builders

Salesforce’s 40+ builder tools—such as Lightning App Builder, Flow Builder, and Content Builder—operate as independent systems with distinct workflows, layouts, and constraints. This led to fragmented and inconsistent Agentforce experiences across products.

I led the definition and adoption of a unified interaction model for the Agentforce panel, aligning product, platform, and engineering teams. This model enables consistent, controllable, and reusable integration across diverse builder environments.

Role

  • Owned the interaction model for Agentforce across builder environments

  • Defined reusable patterns for entry, interaction, and output

  • Drove cross-builder alignment on a shared model

  • Ensured scalability across builders and use cases

  • Bridged design intent with platform constraints

 

 

Challenges

Builder environments differ significantly in layout, panel structure, and workflows, making it difficult to consistently integrate the existing Agentforce panel across products.

Without a unified model:

  • No standardized navigation or entry point for Agentforce across builder workspaces

  • Teams created fragmented, one-off solutions to work within local constraints

  • Interaction experiences became inconsistent across products

  • The Agentforce panel could not be reused or scaled system-wide

 

Sample of Builder Ecosystem Audit

 

 

Strategies

Identify systemic constraints

I evaluated builder ecosystems across product direction and existing implementations to understand constraints for integrating Agentforce at scale.

Structurally, builders share common constraints:

  • Limited panel capacity (typically 0–2 panels per builder)

  • Inconsistent panel controls and entry points

  • Persistent panel usage alongside active workflows

These findings indicate that Agentforce cannot rely on a fixed UI location and must instead integrate flexibly across canvas and panel-based environments.

 
 

 

Define interaction principles

These principles define how Agentforce integrates across diverse builder systems without disrupting workflows or layouts.

Flexible Integration
Support varying panel configurations, as builders differ in layout and panel capacity.

Persistent Accessibility
Ensure Agentforce remains accessible across all panel states, since global panel controls are often unavailable.

Canvas Preservation
Protect workspace for core workflows, as canvas space is critical to builder usability.

Non-intrusive Activation
Avoid blocking content or interaction zones within already constrained layouts.

Functional Consistency
Maintain consistent capabilities and usability across builders despite structural differences.

 

Align with Platform Constraints

To scale Agentforce across diverse builder systems, I explored multiple integration approaches under platform constraints.

Through 11 design explorations, I tested how it could coexist with varying layouts and panel structures.

This resulted in two viable approaches, balancing flexibility with system constraints.

 
 

 

Impact

Adopted across multiple builder teams, including Content Builder and Lightning App Builder, with 10+ additional builders onboarding or planning integration.

Established the foundation for a unified Agentforce interaction model across Salesforce’s builder ecosystem, reducing fragmentation and enabling scalable AI integration.

 

Content Builder with Einstein Copilot Contianer Implementation

Lighting App Builder Design Implementation of Einstein Copilot Contianer

 

System

  • Standardized how Agentforce integrates across builder environments

  • Enabled reusable interaction patterns across 40+ builder systems

  • Reduced fragmented, team-specific implementations

Product

  • Improved consistency of Agentforce interaction across products

  • Accelerated adoption by providing a clear, implementable model

User

  • Enabled more seamless workflows by preserving canvas space and minimizing disruption

 

 

Design

I defined a reusable interaction model centered on a toggled floating panel to address varying builder constraints.

This model decouples Agentforce from fixed layouts, allowing it to:

  • Adapt across configurations

  • Coexist with panels and canvas

  • Remain persistently accessible

  • Expand or minimize without disruption

This enables consistent and scalable integration across diverse builder systems.

 
 

 

Solution Prototypes

The toggled floating panel adapts to different builder layouts through a consistent interaction model, rather than fixed placement rules.

Instead of enforcing a single UI position, the system responds to existing panel structures—ensuring accessibility, minimizing disruption, and preserving workspace flexibility.

The model adapts to builder-specific constraints through consistent placement logic, rather than fixed UI rules.

 
 

Left Panel + Agentforce + Right Panel

When both side panels exist, the Agentforce panel integrates without displacing existing structures.
It can float or dock within available space, allowing users to maintain visibility of both system panels and AI assistance without compromising workflow continuity.

Left Panel + Agentforce

When a single left-side panel is present, the Agentforce panel aligns with the panel system.
The toggle follows the panel’s position, ensuring predictable entry points while allowing users to manage panel visibility to optimize the workspace.

Agentforce + Right Panel

When only a right-side panel exists, the Agentforce panel is introduced on the opposite side.
This avoids overcrowding and maintains balance in the layout, preserving usability while ensuring consistent access to AI functionality.

 

Agentforce Only

In builders without existing panels, the Agentforce panel operates as a fully flexible floating container.
Users can position, dock, or move the panel freely, enabling maximum adaptability across unconstrained environments.

 

Minimized State for Persistent Access

The Agentforce panel can be minimized without being dismissed, allowing users to temporarily reclaim workspace while maintaining quick access.

This supports continuous workflows where AI assistance is needed intermittently rather than constantly visible.

Across all configurations, the model ensures that the Agentforce panel remains accessible, non-intrusive, and adaptable—decoupling interaction behavior from rigid layout constraints.

 
 

Solution Evaluation

I validated the toggled floating panel model with builder PMs, designers, and engineers to ensure it works across diverse builder systems.

The model was confirmed to:

  • Be feasible within existing platform constraints

  • Support a broad range of builder use cases

  • Maintain flexibility without disrupting workflows

This validation demonstrated that the model can scale across builders while remaining implementable and consistent.