About
Satori ("Enlightened") is a design system for Shift's web, desktop, and mobile SaaS applications, used to make secure video review and collaboration seamless. The design system now spans across twelve key product features and two color themes.
THE CHALLENGE
The product team works across 5 time zones; teams are lean and need to maximize where time is spent. Engineers spend 40% of their time coding components that exist in other areas of the application while designers and PMs spend 30% of their time answering implementation questions or validating the same elements repeatedly across different features.
MY ROLE
I partnered with Business, Product, and Engineering Leaders to implement the design system, raise the visual and interaction design quality across products, drive resource efficiency, and improve cross-functional collaboration with engineering to scale output. The result is a well-documented system that anyone on the Product Team can refer to for product decisions.
The Why
The objective was to create a shared visual language and increase efficiencies across design and engineering teams with the goal of empowering all team members to focus on opportunities and solutions rather than components.
A 10,000 foot view of the entire product family
With hundreds of product screens, twelve key feature areas, desktop, mobile and Apple TV apps, scale across all product areas, required a systems view of the product family. I envisioned how the components and tokens would scale across themes and features.
The Presentation: Stakeholder Buy-In
Orgs with a comprehensive design system empower product squads to focus on solutions that are systematic vs reaction-based and strategy-driven vs. surface-driven.
I created a vision for our design system and presented this to the Product Team. The goal of this presentation was to inspire full buy-in from product leaders and engineers.
After the presentation, three engineers volunteered to be transferred to a new design systems engineering squad. The CEO gave the go-ahead for us to prioritize the initiative for the next six months.
System Architecture
At its foundation, Satori informs key guidelines such as accessibility, color, iconography, motion, spacing, themes and typography.
It is comprised of eight key component types (inputs, data displays, feedback, surfaces, navigation, layout, data grid, date time) which each include unique components.
Finally those components join together to form patterns such as the application frame, dialogs, forms, etc.
Each component is built with multiple variants and prototyped to include interaction states like default, focus and hover. This ensures engineers have an accurate representation of interaction states when viewing screens in Figma's preview mode. We also include how the component should look when the Light Theme tokens are applied.
Use cases for each component are documented to ensure anyone on the team knows where and how to use each variant.
An example of each variant within a single card component:
Patterns
Patterns - groupings of related components - are documented in detail to reference foundational tokens they inherit.
Prototypes
Previewing the Projects view in Figma's preview mode with Interactive Components enabled.
Via Design Tokens, each component in the design system was initially themed for three product skins: Dark, Light, and Ultra Dark. The product team ultimately decided to proceed with just Dark and Light.
The color themes were applied across features to shed light on any areas where new variables may be needed.
After much iteration and refinement, we narrowed down the Light and Dark themes to 25 color tokens which allowed for the variances between themes.
All Foundation styles like spacing, border radii, shadows, and fonts were organized into a separate Global theme.
Code
These tokens were shared between design and engineering via a JSON file
Advanced prototypes and interaction states were explored via Protopie to begin defining an interaction language.
Interaction
Accessibility
Conversations and considerations for improved accessibility began to occur around items such as focus states, tab order, etc. These guidelines were built into documentation. Each component is tested for accessibility before being codified.
The Future
We are now in the stage of implementation and maintenance on the Satori Design System. Engineering made the decision to use Google's MUI React library as a development base. The engineers are building on top of MUI to add some new components and stylizing default components to adhere to our brand
New component additions will be added when a component is used across more than one feature in Shift.
As the Shift suite of products continues to scale, we we will continue to scale our system while freeing the rest of the team to focus on strategy. Our ongoing goal is to continue adding documentation wherever possible to ensure everyone on the team can make informed decisions.
.jpg)
