Agent Console Builder

I led the redesign of Sprinklr's Agent Console Builder, a no-code tool that allows supervisors to build custom dashboards for customer service agents. This resulted in adoption by 7 new clients and established a new standard and design system for all creative builders across the platform.

Role

Product Designer

Timeframe

Nov 7, 2022 - Jan 10, 2023

Problem of accumulated design debt

The Agent Console Builder, a long-standing tool in Sprinklr's ecosystem, had accumulated significant design debt over time. Its outdated interface, unchanged for years, led to 🔻 low adoption rates and 😰 increased reliance on Sprinklr's internal teams for console customization.

Solution: Redesign the builder to make it easy to use and empower supervisors to build custom consoles independently

Design Goals

simplify + modernize

Empower users to intuitively customize the agent console layout to meet the requirements of different agent groups.

design for scale

Enable the creation of a flexible, contemporary agent desktop that integrates seamlessly with customer service workflows

Design Improvements

Simplifying the layout

Before

After

Bringing relevant tools upfront in default view

Before:

In the default state, the toolbar had a custom code editor by default. This was confusing and intimidating for non-technical users, creating an immediate barrier to entry.

After:

I designed the default view to consolidate all tools, with widget library as the default.

Bringing Widgets to Life: From Text List to Visual Catalog

Before:

The text-only widget list offered no context, requiring trial-and-error to identify the right components.

After:

The widget library became a visual catalog—each widget now has an icon and hover preview to improve discoverability and reduce guesswork.

New Interactions

  1. Drag and drop

I designed an intuitive drag-and-drop system for adding and rearranging widgets. This familiar interaction speeds up the console creation process.

  1. Drag and Rearrange

The new drag-and-rearrange feature empowers users to easily organize their console layout in real-time. This simple addition significantly enhances the builder's flexibility and user control.

  1. Easier Widget Exploration

I designed a full-screen widget library with comprehensive previews, allowing users to visually browse and categorize widgets. This visual approach makes exploration and customization more intuitive and enjoyable.

  1. Version History

Addressing a long-standing user need, I integrated a robust version history feature. Now, users can auto-save their work, view past versions, and clearly distinguish between live and draft versions, providing peace of mind and flexibility.

Impact

increased adoption → 7 new brands

The revamped Agent Console Builder has been adopted by 7 new clients since its release.

contribution to design system → 

5 builders updated

contribution to design system → 

5 builders updated
contribution to design system → 

5 builders updated

I designed several new components and patterns during this project, which have been used to update 5 other creative builders across the platform.

Takeaways

  1. Legacy Feature Auditing:

I learned to effectively audit legacy features and prioritize improvements by differentiating between must-haves and nice-to-haves.

  1. Building for Scale:

Working on a wider design initiative that affected all creative builders, I collaborated closely with the Design Systems Manager. This experience taught me how to create robust, scalable components and patterns. Through iterative refinement, I improved these components locally until they met approval standards for broader implementation.