WALMART CONNECT MOTION DESIGN SYSTEM
Role: Motion Designer
I joined the team at Walmart Connect in 2025 shortly after Walmart’s rebrand. Although much of the visual design system was already built out, the motion design system had little to no guidelines. I created animated icons, pictograms, project templates, transitions, and Zoom backgrounds that could be used across a variety of platforms and projects.
Icons
I created all 27 animated brand icon assets. I chose 6 to share below. These icons are used in Walmart Connect internal and external brand videos and were also built to be implemented into user interfaces as micro interactions. For icons that were similar, I used the same animation durations and ease curves to keep everything consistent (see the shopping cart and delivery truck).
Pictograms
Walmart Connect has 16 pictograms in its brand library. Similar to the icons, I animated all of the pictograms for internal and external brand videos. These were also built to be used in user interfaces if needed by exporting them as LOTTIE files.
Project Templates
Since some transitions rely heavily on the visual design of the current and next screens, I was tasked in creating some project templates. It was important to create these in a way that they could easily be utilized by all team members and implemented into a large variety of projects.
Template example
Project file
Implemented use case - see the case study here
This transition pack was created using the six Walmart Connect brand colors. The rounded rectangle shapes are consistent with the company’s visual brand guide. Each color’s rectangle size was determined by the usage of the respective color in the Walmart Connect brand. Each individual rectangle has the same ease curve as the others, but with a timed offset. The transitions below are just one of many examples of transition packs that I created for Walmart Connect.
Transitions
Slow Vertical Swipe
Duration: 3500 milliseconds
Rectangle ease curve: 0.33, 0.00, 0.34, 1.00
The slow vertical color swipe is used on large LED installations and information-heavy animated content.
Fast Vertical Swipe
Duration: 1500 milliseconds
Rectangle ease curve: 0.33, 0.00, 0.34, 1.00
This transition is used primarily on Walmart Connect sizzle reels as it quickly switches from one piece of content to another.
Fast Horizontal Swipe
Duration: 2000 milliseconds
Rectangle ease curve: 0.33, 0.00, 0.34, 1.00
This transition is used primarily on Walmart Connect sizzle reels as it quickly switches from one piece of content to another.
Zoom Backgrounds
I created 10 animated Zoom backgrounds for Walmart Connect to use across the company. These animations seamlessly loop and feature Walmart Connect’s new value proposition: Let’s spark sales.
Slow Horizontal Swipe
Duration: 4000 milliseconds
Rectangle ease curve: 0.33, 0.00, 0.34, 1.00
The horizontal transition is slightly longer than the vertical version in order to account for the increased distance across screen.
