How We Brought Kinetics to Salesforce’s New Global Navigation

A case study about scaling motion patterns from design system to product.

Kinetics in Motion Series

Illustration showing the back of a person sitting at a desk, working on a computer. There is a plant in the left background and several binders in the right background.
Illustration of an animator creating a design, using a motion software. Image by Good Studio.

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.

Example of the animation that occurs on Salesforce.com. In the background is a typical landing page, with an Astro illustration. As the cursor hovers over a navigation list on the left, various secondary panels appear.
Kinetics custom built into the double panel navigation experience on Salesforce.com.

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.

Sample views of the Kinetics panels on desktop, tablet, and mobile views.
An example of the UI mockup of the global navigation flow in Salesforce.com

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.

There are four columns of frame-by-frame views that demonstrate how the motion works.
A frame by frame breakdown of the proposed panel navigation experience displaying custom Panel transitions

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.

Three columns showing the evolution of the navigation experience.
1. The panel item interaction as seen in the initial mockup. 2. Item interaction as seen in the native component. 3. Item interaction as seen in the final navigation experience.
Kinetics Styling Hook Values as seen in the Implementing Kinetics section of the Lightning Design Systems Site

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);}
Animation shows example of a prototype. The motion comes in from the right and the panel shows a cascading list of items.
Kinetics prototype of the primitive panel component in Lightning Design System.

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.

Animation shows a navigation list and a spotlight as the cursor hovers over each word.
The spotlight on hover Kinetics pattern is custom for Salesforce.com and uses CSS and JavaScript.

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.

Sample animation that shows how the panels expand and cascade.
1. Panel transition as seen in the native component. 2. Panel interaction as seen in the navigation prototype.

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.

Animation that shows a panel of code on the right and the motion on the page on the left.
Micro tweaking was done via the “inspect element” feature at the browser level to demonstrate the changes for a faster feeling cascade effect of the panel items.

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.

Example of the animation that occurs on Salesforce.com. In the background is a typical landing page, with an Astro illustration. As the cursor hovers over a navigation list on the left, various secondary panels appear.
Custom Kinetics built into the double panel navigation experience on Salesforce.com.

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:

  1. The Salesforce Kinetic Systems module is now available on Trailhead. Learn basics about choreographing motion UI.
  2. Our Motion Pattern Creation module provides a detailed look into how teams might create custom motion UI for their products.
  3. 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.

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!

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store