Space Design System

Space Design System

Sprinklr is the World’s #1 Social Suite for the Enterprises,
See it’s new design language 👇

Sprinklr is the World’s #1 Social Suite for the Enterprises, see it’s new design language.

Space Cover

As the Sprinklr team grew, it became increasingly important to maintain a consistent style and visual language across all areas of the product. With nearly over a dozen products, it was clear that we needed more systematic ways to guide and leverage our collective efforts.

The initial outcome was to have a collection of reusable components, guided by clear principles, that can be combined together to create as simple and as complex experiences, as needed.


Lead Product Designer | Sprinklr
Research, Information Architecture, Interaction, Visual design & testing

Team of 6 designers & 20+ developers

Apr 2017 - Feb 2018


The Problem

After looking at Jira and Zendesk support tickets & one on one stakeholder interviews it was clear that Sprinklr needed a new design language in order to make the platform consistent, intuitive and delightful.


of Support tickets on Jira are UI related and are due to inconsistent user experience.


of the clients complain that the platform is overloaded with information and looks obsolete.

BUSINESS GOAL: Reduce user support tickets | Decrease training cost


1. A Design System
The primary solution was to come up with a design system that was guided by principles and best practices. Also, to keep with documented at each step to ensure consistency and efficiency of work.

2. Personalization
To solve the problem of complexity it was important to eliminate any unnecessary elements. To achieve that the platform was made persona specific.


1. Getting everyone onboard
A Design System is not a one-man project and if you want it to succeed you need everyone on board. The more integrated you want it the more disciplines you need at the table.

 2. Planning & Priority
Failing to plan is planning to fail. We constantly toggle between working on our Design System and enhancing the application and planning and prioritizing our tasks is imperative.

3. Breaking this news to clients
Although, our clients wanted this change from a long long time. Yet, it was important to keep them involved and excited about the big changes we were planning. As a start, this project was done for our key partner clients only.


Fig: New engagement Dashboard module made using the space design system


The first step was to review every aspect of the product and try to list all important components on a paper, then group elements by their usages. For example, style group could be basic assets such as colors and fonts, and components group would include buttons, cards, tables, filters, and etc.
During this process, many inconsistencies emerged. Without worrying out them at that point, I documented everything in the form of screenshots.


Laying the foundation

This system is based largely on the principles of atomic design. The key idea behind this methodology being small, independent - atomic - parts, can be combined into larger molecular structures.


This foundation loosely defined our typography, colors, icons, spacing, navigation and information architecture. and proved essential for guiding our work in a unified direction. Reviewing our collective work at the end of each day, we began to see patterns emerge.

We course-corrected when necessary, and started defining our standardized components.


Bringing it all together

While creating these components, we collected them in a sketch master file, which we referred to throughout the design process. After a week or two, we began to see huge leaps in productivity by using the library when iterating on designs. One day, while putting together a last-minute prototype, our team was able to create nearly 50 screens within just a few hours by using the framework our library provided.

While the library was growing, we started organizing individual components into artboards containing similar items. These artboards were then organized by general category into Navigation, Marquees, Content, Image, and Speciality. Later we planned on to create an internal website to document the system that can be used by both the devs and designers.


Problems solved - Navigation and Filters

Out of all the problems solved I would like to showcase the primary two problems of Navigation and Filters.

Before - Navigation

1. Main Menu categories were ungrouped in a flat hierarchy.

2. Menu names were not self-explanatory. 

3. The current menu didnot reflect the power of a cloud package in the right way

1. Main Menu categories were ungrouped in a flat hierarchy.

 2. Menu names were not self-explanatory. 

 3. The current menu didnot reflect the power of a cloud package in the right way

After - Navigation

1. Menu items are grouped into cloud solutions to reflect the true value of different products. Cloud grouping caters to the needs of a group of marketing personas.

2. Each module has a short description for user's better understanding. Also, is also helpful when a new module is added.

3. Frequently used modules are grouped at the top for quick navigation.

4. Keyboard shortcuts were made available for power users.

Prototype of the new space navigation

Before - Filters

1. The platform had 3 different kinds of filter experiences for a user.

2. Both vertical and horizontal scroll made it difficult for the user to apply filters.

3. The massive filter bar was a cognitive overload.

4. Research showed that users used a set of common filters and wanted to save them for future re-use.

After - Filters

1. After studying users filtering pattern - Dynamic quick filters were introduced.

2. Quick filters are a combination of filter values commonly used by the users based on their persona.

3. A contextual filter component was introduced to overcome the problems of vertical and horizontal scroll.

4. Progressive disclosure was used to reduce cognitive overload and make the filter menu easy to use.

Prototype of the new space filters


We need to ship our product on a multitude of platforms and devices. Modules and features used on mobile are limited. But, Keeping designs synchronized takes significant effort, often requiring the same work to be repeated across all of these platforms. 

With a design system in place, each piece is part of a greater whole and should contribute positively to the system at scale.


Testing & feedback

Testing was conducted during the discovery phase to identify the biggest pain points in the current version. During the redesign: Testing was done at every milestone of the project. Invision prototypes were shared with stakeholders to get early feedback. After numerous surveys and user pilots, we launched the platform in June 2017 for our partner clients.


Numerous hours of brainstorming, careful planning, sketching, designing and developing has brought the results desired for the Sprinklr platform. We were proud to present the new face of the product to our clients. The final result of the Space design system a platform is a light, minimalistic, and an intuitive product personalized for each user persona to help them achieve everything they hoped for.


Project Learnings

Collaboration is key
The more eyes on a design, the more it’s exposed to varying opinions, experience, and critique — and this can only ultimately improve it. Or at the very least, test it.

Process in essential
For a project that is vast, it gives you a roadmap to navigate through what can be a foggy route. This is especially useful when you’re starting out.


Let's Connect

Feel free to reach out for collaborations or just a friendly hello 😀

Feel free to reach out for collaborations or just a friendly hello 😀

Feel free to reach out for collaborations or just a friendly hello 😀