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.

Cover@3x
OVERVIEW

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 of 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 standards, that can be assembled together to quickly build any number of consistent experiences.

ROLE & DURATION

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

Team of 6 designers & 20+ developers

Apr 2016 - Jan 2017

CLIENT
CLient@2x

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.

44percent@2x
20percent@2x

BUSINESS GOAL
Reduce user support tickets  |  Decrease training costs

Solution

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 achive that the platform was made persona specific.

Challenges

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 parter clients only.

Cover2@3x

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

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.

What_space@2x
Personality@2x
Space_System@2x

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 create an internal website to document the system that can be used by both the dev’s 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 shorts have been 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 congnitive overload.

4. Research showed that users used a set 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 congitive overload and make the filter menu easy to use.

Prototype of the new space filters

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.

Impact

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 the hoped for.

Impact@3x
Stats2@2x
Stats1@2x

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.

MORE PROJECTS

Let's Connect

Get in touch for any full-time opportunities, or a friendly hello 😀
pratibhajoshi009@gmail.com

Get in touch for any full-time opportunities, or a friendly hello 😀
pratibhajoshi009@gmail.com