Linkedin  

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 the 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 has now made UX motion design a top priority in their design systems expansion.
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 foregoing UX motion opportunities.

Objective - 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.

Result - After the final presentation of the completed UX motion library to leadership, the presentation was well received and now engineering and design resources have been allocated towards building UX motion as part of the design systems initative.
PROCESS 
PROPOSAL
Demonsrtate value of the intiative and show the value of UX motion. Motion can be leveraged.
AUDIT
Look at all the states of the application and see the opportunities for UX motion design.
DESIGN
Create UX animations throughout the app to improve usability.
TEMPLATIZE
Document all animation in a way that streamlines implementations and reduces deltas between proposal and build.
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



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

The result of this presentation was the approval to move forward and create the UX motion library for Linkedin design systems.
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 proposal (gesture confirmation, spatial relationship, and motion affordance)
DESIGN 
Below are a number of motion comp examples from the final UX motion library. I created all motion designs shown here.
404 brand expression motion
Launch hiding latency motion
Hiding latency motion
Interaction sequence motion (gesture confirmation, spatial relationship, motion affordance) 
Interaction sequence (gesture confirmation, spatial relationship, motion affordance) 
Pull to refresh motion affordance
Interaction sequence (gesture confirmation, spatial relationship, motion affordance) 
Spatial relationship motion (absence of relationship implying informational separation of footer nav) 
404 brand expression motion
User-engagement (gesture confirmation, motion affordance) 
Interaction sequence (gesture confirmation, spatial relationship, motion affordance) 
Pull to refresh 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.

UX motion library document - Motion comp reference, description, timing specifications, implementation file
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.