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.
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.
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.
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.
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.
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.
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.
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
Case Study: Design a process to automate the renewal of memberships.
Sightbox Case StudyCase Study: Redesign the core application to satisfy the growing needs of our customers.
InQuicker Case Study
