How We Brought Kinetics to Salesforce’s New Global Navigation
A case study about scaling motion patterns from design system to product.
The Salesforce Kinetics System is an end-to-end motion design identity for Salesforce and its products. It provides a foundational set of artifacts for designers and developers to incorporate motion into their products.
In the What You Need to Know About the New Salesforce Kinetics System blog post, I shared why and how a systemized approach to motion design is crucial for Salesforce. But a question lingers: How would teams use these Kinetics System artifacts in the day-to-day process of design and development. Let’s look at a case study to demonstrate the possibilities.
We love design systems at Salesforce. Our layer-cake approach to scaling our UI and enabling our teams has paved the way for a family of design systems. The Kinetics System works closely with this family, including Lightning Design System, which supports Salesforce’s platform and product clouds; and Website Experience Subsystem (WES), which supports Salesforce’s digital experiences for Salesforce.com, Trailhead, and AppExchange.
Teams can take advantage of design system components that come with out-of-the-box animations supported by Salesforce Kinetics System principles, personality definitions, choreography best practices, styling hooks that enable reuse of patterns, a library of scalable patterns, learning modules, and motion tools. With these resources, users maintain consistency in their UI language more efficiently across multiple products.
Implementing Salesforce Kinetics
WES is a fairly new system at Salesforce adopted by websites such as Salesforce.com, Trailhead, and AppExchange. We had the opportunity to introduce Kinetics into WES during planning. We worked closely with the WES design and development team to release Kinetics in the ongoing primitives component work. Kinetics artifacts such as principles, personality, and scalable patterns were our cornerstones. The Kinetics component work we had already designed for the Lightning Design System provided a great reference for scaling and incorporating the existing patterns into the new component designs in WES.
With the primitive component Kinetics in the works, we were looking for an efficient method in which teams might successfully adopt this library into their product designs. The Digital Experience Strategy team had planned the release of a new global navigation experience on the landing page. Early adoption of a new design system comes with its own set of uncertainties and questions. During our collaborations with the team, it was clear that a hybrid approach to using the pattern library was needed to support the timely development of the navigation experience.
The navigation experience was to be built using a combination of primitive components such as buttons and icons, but required a customized build of a double panel, or a navigation drawer, that uses a secondary navigation as part of its main panel design. The primary navigation panel includes menu items that, upon hover, would open more items in the secondary navigation panel.
Scaling of Kinetic Patterns to Custom Design Flows
Phase 1: Discovery and Ideation
In the first phase of our design process, the Digital Experience Strategy team (which included designers from Fantasy, the agency working on the visual UI experience) reviewed a storyboard of the motion UI that they wanted to visualize. We began by bookmarking the component primitives that already come with Kinetics and can be integrated directly. We then identified the existing Kinetics patterns that could be scaled and reused in the new navigation designs to ensure consistency of the motion UI standards.
Phase 2 : Motion Concept Review
Our teams met during the Design Systems office hours for reviews and feedback cycles at each phase of the process. Fantasy followed our established Kinetics guidelines for choreography, styling hook values, implementation, accessibility, and the Kinetics library of pattern prototypes to come up with their first set of motion concepts for the custom panel navigation design. The motion concepts consisted of variations of the existing patterns that may better fit a custom navigation experience.
During reviews, we looked for consistency and opportunities for refinement. Consistency in the Kinetics direction and the scaling of patterns (e.g. large-scale transitions and micro-interactions like hover, click, and active states) helps to ensure the UI motion identity feels harmonious. We made recommendations for how to leverage styling hooks for animation effects. Styling hooks help with consistency and make it possible to choreograph sequences more efficiently. Currently, the kinetics styling hook values are for reference only. In the future, the styling hooks will be available via the design systems. We also flagged any accessibility issues.
Here’s an example of how styling hooks are used in the native panel component:
.kinetic-panels {— kx-panel__speed: var( — kx-duration-long);— kx-panel__easing: var( — kx-ease-out);}
Phase 3: Motion Prototype
We narrowed down the motion UI that would go to production. Fantasy then created a prototype of the global navigation motion UI to demonstrate the interaction behavior. In the subsequent review cycle, our teams focused on fine-tuning the interactions and investigating what the production code might entail. The team created a “spotlight pattern” similar to the existing Kinetics spotlight pattern but used custom implementation methods that combined JavaScript and CSS. This hybrid approach helped integrate the motion interaction better with the Salesforce.com production environment.
One of the key movements we brought forward was a cascading effect that would load the individual menu items inside of the panel. In a dual panel experience, the 1:1 translation of this effect did not seem to scale well and caused the latency of the experience to feel slower.
When we looked at the speed, acceleration, and sequencing behavior, it was apparent we needed a quicker overlap between the loading of the items — meaning a quicker acceleration and a shorter distance from where the items begin their initial fade-in. This movement called for intricate tweaking and was best demonstrated using the “inspect element” feature at the browser level.
Being able to collaborate with the product team on Fantasy’s coded prototype meant we could make micro adjustments and deliver a better motion experience.
In the next step, the Digital Experience Strategy team moved the prototype code into their development environment and continued making adjustments based on the QA feedback. The new global navigation experience in Salesforce.com is now live.
Conclusion
The Salesforce Kinetics System is in its early stages of adoption. Our enablement process has provided insights on how we can streamline the implementation experience for custom motion. We created several resources to help:
- The Salesforce Kinetic Systems module is now available on Trailhead. Learn basics about choreographing motion UI.
- Our Motion Pattern Creation module provides a detailed look into how teams might create custom motion UI for their products.
- The Kinetics Principles and Guidelines documentation and Kinetics Pattern Prototypes are now available on the Lightning Design System site.
We aim to roll out Kinetics within the component blueprints of our family of design systems in the future. Soon, our styling hook values will also be available as a part of the design systems at Salesforce.
More posts from the Design Systems team:
Acknowledgements: This massive initiative would not be possible without the help of our stakeholders across our products. A big shout out to everyone who has contributed in our process — The Digital Experience Strategy team and Fantasy’s consistent collaboration with us. A huge thank you to Nancy Niu & Alan Weibel, whose partnerships have enabled our work with WES. Also, I want to call out some key players who have played crucial roles in defining the Kinetics System- DouG Molidor, the motion engineer who can work a magic with the system, James Brush our go to consultant and motion luminary, Angie Elko and Joel Sass our enablers, the team of motion designers at Punchcut whose partnership accelerated our process, Donielle Berg and Kim Flournoy our very knowledgeable accessibility partners, Abigail Sigler our dynamic detail oriented mobile partner, and the team of Design Systems & Product designers and developers whose involvement helps us scale our efforts every step of the way. A big thank you to the Relationship Design team — Nic Dimond and Kelly Thomas for their contribution to the Kinetics System Modules on Trailhead, as well as our editorial rockstar Hsiao-Ching Chou
Salesforce Design is dedicated to elevating design and advocating for its power to create trusted relationships with users, customers, partners, and the community. We share knowledge and best practices that build social and business value. We call this next evolution of design Relationship Design. Join our Design Trailblazers community, become a certified UX designer, certified strategy designer, or work with us!
