Sprinklr Case Study: Hyperspace Design System

Hyperspace Design System

Project: Establishing design guidelines and new patterns and components while updating, maintaining, and governing our design system, Hyperspace.

Role: Lead Designer for Modern Care product on Sprinklr Platform and point of contact for the Hyperspace Design System.

sprinklr screenshots

Creating Sprinklr's Design System Guidelines & Standards

I lead in the creation of our Design System Guidelines and Standards documentation. It covers everything from designer onboarding, Figma best practices, file structure and organization, to design foundations such as typography, spacing, and component creation.

Here are some examples from the Design Guidelines document.

Naming Conventions and Layers

hyperspace design system best practices

How to use Tokens

hyperspace design system best practices

Component Structure & Documentation

hyperspace design system best practices

Elemental Spacing and Grid System Guidelines

hyperspace design system best practices

Hyperspace Design System Cleanup

Now that we had some agreed upon standards to guide us, a small team and I were ready to start updating and organizing Hyperspace. The foundational files of our design system Hyperspace, is made up of Base, Atomic, and Molecular components.

Part of the cleanup process included an extensive audit of all the existing components. The team and I did health checks on all the compontents, checking to see how well they stood up against our new standards. We creating notes (stickies) as well as status indicators on the table of contents pages to help us in our ongoing work.

Also included in this foundational project are the Design Guidelines and Application Shell templates files I lead design and creation of.

hyperspace design system

Base Components

hyperspace design system

Atomic Components

hyperspace design system

Molecular Components

hyperspace design system

Layouts & Application Shell Templates

One area the team needed alignment on was around the terminology of the various elements of our application. Depending on who you talked to you might hear different terms for the same UI element.

To help get the team on the same page I created page layout templates and an Application Shell starter file full of flexible platform components.

hyperspace design system
hyperspace design system

Adaptable Components (in Figma)

Not only did did we need responsive components that could adjust with variable card quantities, we also needed to quickly and easily swap the contents and branding. Here is an example of a responsive Stories component I created showcasing how we can swap the content and branding from Nike to Samsung using a plugin.

Responsive Charts and Graphs (in Figma)

The team needed fixed height graphing wigets that were fully responsive. Here is an example of a flexible and responsive bar chart I created. Notice how the content area automatically adjusts its height when the header text wraps and how the bar chart percentages stay consistent.

Complex Variants

Many of our most commonly used components were severly lacking in flexibility. Here is an example of me expanding on the capabilities of our simple input component.

Thanks for reading!

If you’d like to read more about my thoughts on design or my approach and process check out my other case studies.

Portfolio Home

Simplifying Vision Care for Contact Lens Wearers

Case Study: Design a process to automate the renewal of memberships.

Sightbox Case Study
sightbox app screenshot

Reinventing the Patient Experience

Case Study: Redesign the core application to satisfy the growing needs of our customers.

InQuicker Case Study
inquicker app