Sprinklr-AI Case Study

Project Overview

Sprinklr’s AI components were not designed as a whole. Modals and chat interactions felt disconnected, which led to an inconsistent experience for users. I helped build the Sprinklr AI+ Design System by creating a consistent design for modals, widgets, chat components, and loading animations.

As an architect-turned-product designer, I approached the Sprinklr AI+ Design System the same way I once approached a physical space: with a deep respect for structure, flow, and the human experience.

Figma File

My Role

person Project Designer

First team to join the AI+ Design System project.

group Contributor

Contributed to the design system by creating components and patterns.

Research & Requirements Gathering

I reviewed existing AI screens, components, user feedback, and Sprinklr brand guidelines to identify gaps. Setting up these guidelines will help improve brand consistency, reduce user confusion, and streamline workflows. By creating modular and reusable UI elements (like modals, widgets, and chat components), the design system minimizes the need for redundant design work. This accelerates development cycles, allowing Sprinklr to bring new features and products to market faster.

Figma File

Colors

Buttons

Icon Buttons

Modal: Standardize modal designs for AI-driven workflows

All components follow Sprinklr's unified atomic design system , ensuring consistency, maintainability, and scalability.

Figma File

Message Publisher

Newsletter

Modal Iteration 1: Initial Concept

My first approach was to create a modal that is simple and clean.

Design Focus

Basic modal layout with a clear title, message body, and primary/secondary buttons.
A straightforward structure to test basic interactions and hierarchy.

Visual Elements:

Simple color usage with placeholder tones.
Basic typography and standard button shapes.

Feedback & Learnings:

The initial modal was perceived as too static and lacked clear visual hierarchy.
Early user feedback highlighted the need for enhanced accessibility and clearer CTAs.

Modal Iteration 2: Enhanced Interaction & Visual Refinement

The second iteration is a refinement of the first iteration.

Design Focus

Refined layout spacing to distinguish title, content, and actions more clearly.
Added subtle shadow effects and rounded corners to enhance the visual appeal.

Visual Elements:

Updated color palette integrating Sprinklr’s AI brand hues.
Introduction of micro-interactions (e.g., button hover states, fade-in for the modal).

Feedback & Learnings:

Users appreciated the improved clarity and visual cues.
Adjustments were made based on developer feedback for smoother integration with the atomic components system.

Modal Iteration 3: Final Design

The final design is a combination of the previous iterations.

Modal: Use Cases

AI-Modals are used in different ways, so I created different use cases for them including Popup Modal, Lightbox Modal, and Bottom Sheet Modal.

Popup Modal

Lightbox Modal

Bottom Sheet Modal

AI-Chat: Standardizing AI-Chat for Scalable Workflows

All components follow Sprinklr’s unified atomic design system, ensuring consistency, maintainability, and scalability. AI chat components play a key role as the primary interaction method across the Sprinklr platform. I designed multiple sizes of AI chat components from small to large to support a range of use cases and screen layouts.

Figma File