Sprinklr Case Study

Project Overview

In a 6-week sprint, I led the design of an AI-powered compliance feature for Brand Messaging.The goal: help content creators identify and fix brand non-compliant messaging before publishing . We translated complex brand rules into actionable, AI-assisted recommendations within the message creation flow.

Figma File

Leading the Build: From Vision to Execution

person Project Lead Designer

Led end to end the design

group Collaborator

Collaborated closely with PMs, engineers, researchers, over six weeks

lightbulb AI-First Thinker

Integrate AI-powered suggestions

palette Visual Design

Applied consistent visual design principles to create a cohesive interface.

The Problem: Why Was Publishing So Hard?

Content creators were running into the same issue repeatedly.
They spent hours writing social posts or ads, only to be told, “This doesn’t follow brand rules.”
The worst part? They didn’t know why, or how to fix it .
This caused delays, rework, and a lot of frustration.
We knew something had to change.

Existing Content Publisher only shows errors after users try to publish or save as draft

The Use Case That Guided Us

Use Case: As a content creator, I want to identify non-compliant elements so I can fix them and follow brand rules.

This use case became our north star.
We wanted creators to feel supported, not punished.
That meant turning brand rules into clear, helpful guidance.

Provided PRD

What the Old Flow Looked Like

Here’s how things worked before:

1. A user wrote a message

2. They clicked publish

3. They were told it broke brand rules

4. No clear reason why & suggestion

The New Flow: Clear, Smart, and Easy

I designed a new workflow that gives real-time feedback inside Sprinklr’s message editor that accommodate all PRD requirements and user needs.

1. A compliance score shows how many rules were passed

2. Users can click to expand and see what rules failed for each brand

3. Each failed rule highlights the problem in the message

4. AI suggestions give helpful edits for both text and visuals

5. With one click, users can apply the fix

6. Users are flexible to switch brands or channels

Final Screen

Design Process

Break this down into phases:

Phase 1: Research & Requirements

Worked with researchers to understand brand needs and pain points
Worked with product to define and understand how AI Comliance work
Worked with Devs to clarify the constraints

Phase 2: Wireframes

Created user journey based on PRD
Created low-fidelity mockups with different iteration
Created final design for testing

Phase 3: Testing & Feedback

Ran internal usability tests
Got feedback from creators and publishing teams
Iterated based on confusion points and edge cases

Notes

Iteration 1: Using Bottom Sheet

Iteration 2: Using the Preview Pane

Iteration 3: Using Third Pane

Iteration 4: Having as a Separated Pane

Final Design: After Testing and Feedbacks

The final design now has a clearer separation, better hierarchy, more prominent CTAs, and accommodates all PRD requirements and user needs such as AI-powered suggestions, channel-specific compliance, scores and more.

Let's Dive Deep into the Designs

The first 3 iterations were not the best fit for the project because:

They cover part of the preview
They require a click to switch back and forth
Different rule categories (Message Compliance vs Media Compliance)
PM originally didn't want a CTA to check compliances, but I suggest we include one for clarity since this feature is new and users may be unfamiliar with it
Also, a clearer CTA for AI-suggestion

List key improvements from my design that followed Sprinklr's Hyperspace Atomic Design System:

Clear rule breakdown (pass and fail)
Visual icons for success and failure
Rule-by-rule explanation (e.g. “Missing Royal Red color”)
AI-powered suggestions
Channel-specific compliance (LinkedIn, Facebook, etc.)

Begin with an empty state . Firstly, divide the Content area into sections based on the compliance rules for each Message and Media. Additionally, update the preview section to include a button for checking compliance .

Figma File

Empty State Screen

After you click the "Check Compliance" button , the system will show the compliance results for each message and media of the brand. It only takes 30 seconds to generate these results using machine learning. All channels compliance will be loaded at the same time.

Loading State Screen

Once the results are ready, the system will show the compliance results and compliant issues for each message and media . Each section will show the compliance score, and the number of rules passed. It will also highlight the issues in the message and media and show alert banner.

Loaded Screen with Errors

AI-powered View Suggestion feature will generate suggestions for each message and media based on the compliance rules. The system will provide 5 different suggesting options. Users can choose to replace the message or media with the suggested one. The system will also show the compliance score after applying the suggestion and hit refresh button.

Click View Suggestion

Generating Suggestions

Click Replace to Replace

Nudging User with Notifications and Click Refresh to Reload Compliance Score

Success Alert Banner will Show Up if All is Compliant

Same with Media

When all compliance rules are passed, View Suggestion Button will be removed. Channels error notifications will also be removed.

Successfully Compliant

All Channels are Compliant

Quick Publisher is a modal that allows users to create and publish messages quickly. The AI Compliance feature will also be available in the Quick Publisher. The design will be similar to the Full Screen Publisher, but with a simplified layout.

Quick Publisher

Recommended Projects

Explore these projects for more insights and inspiration.

5 min read

Sprinklr AI+

Sprinklr's AI+ Design System.

Web Design E-commerce

View Case Study

6 min read

Endue Software

Healthcare deserves a better UX.

Dashboard Design Data Visualization