Linkedin Design Systems: UX Motion Initiative

While working on Linkedin's UED team, I had the opportunity to lead and define their UX motion design initiative. In twelve weeks, I was able to audit, design, and templatize a motion library for LinkedIn design systems.

This experience was as formative and insightful as it was was challenging; Motion as it relates to UX is mostly uncharted territory and low-level resources on the subject matter are limited. Ultimately, my efforts were successful as Linkedin then made UX motion design a top priority in their design systems expansion.

"UX Motion is the regulatory mechanism to protect users from disorientation caused by interaction."

Overview

Team Independent initiative - UED Design Systems

Tools After Effects, C4D, Sketch, Webflow

Duration ‍Twelve weeks

Role UX Motion Designer

Problem

The LinkedIn mobile app contained static abrupt changes of the interface throughout the experience leaving room for a more guided/optimal user experience.

Objective

As Motion Design optimizes usability holistically, the objective was to build a UX motion library as a guide for designers and engineers to implement UX animations into the flagship mobile app.

Solution

Propose to build a UX motion library for LinkedIn design systems, audit the flagship mobile app for UX motion opportunities, design all the motion compositions showcasing UX value, and templatize the motion compositions to streamline implementation.

PROPOSAL

For approval to create the UX motion library, I was to present the true UX value of motion design as it related to design systems.

In my experience, there is a common misconception that UX motion design is merely a gloss layer with no functional value. The truth is, we can remove uncertainty, improve discoverability, hide latency, and create spatial and navigational relationships with UX motion design.‍

Specifically, we can leverage motion in UX using the following motion methods:

1. Gesture Confirmation

2. Hiding Latency

3. Motion Affordance

4. Spatial and Navigational Relationships

You can see my entire talk at LinkedIn here.

After coordinating with UED leadership, I was granted permission to present these ideas to the entire design and engineering org.

AUDIT

After receiving approval, I proceeded to audit every interaction in the Linkedin mobile app to document all possible UX motion opportunities. (On a spectrum of most feasible to more speculative and conceptual). ‍

Seeing Opportunity‍

Animation is change. Interaction creates change. Where these 2 phenomena overlap, there is opportunity.‍

After years of self study, I've created my own auditing technique for assessing UX motion in software applications. I teach this "interaction audit" method in my workshops and mentorship programs at tmprlux.com 

‍‍The secret to proper UX motion is assessing the difference between 2 states of an interaction and identifying the opportunities for UX motion methods (gesture confirmation, hiding latency, motion affordance, and spatial relationships) that arise during the change of those 2 states.

Interaction audit diagram example (identifying gesture confirmation, spatial relationship, and motion affordance)

Resulting UX motion design (implementing gesture confirmation, spatial relationship, and motion affordance)

TEMPLATIZE

The UX motion library deliverable was to serve as a set of instructions for dev to ultimately streamline implementation.

Therefore, in addition to the motion comp video references, I included a timing specifications document that mapped out all UI component property value changes over time.

RESULTS

The initiative proved successful; Linkedin has now allocated engineering and design resources towards UX motion systems expansion.

This was a long and uncharted journey and I'm very grateful to have had this opportunity; My team trusted and empowered me to introduce productive disruption to their mission.‍

I was given valuable insight into accessibility, company culture, and the types of design processes that are conducive for a truly impactful product.