MOTION DESIGN REFRESH
As part of Stripe’s motion design refresh, I worked on a series of projects focused on elevating consistency, clarity, and scalability across motion. This included designing and refining multiple layout transitions including lottie for web use, as well as building a flexible motion system using MOGRT templates for seamless use across teams.
The goal was to create a cohesive design language that could adapt across formats while maintaining visual precision and brand integrity. Below are some selected works showcasing these explorations.
As part of Stripe’s motion design refresh, I worked on a series of projects focused on elevating consistency, clarity, and scalability across motion. This included designing and refining multiple layout transitions including lottie for web use, as well as building a flexible motion system using MOGRT templates for seamless use across teams.
The goal was to create a cohesive design language that could adapt across formats while maintaining visual precision and brand integrity. Below are some selected works showcasing these explorations.
SERVICE:
DESIGN SYSTEMs | BRAND DESIGN
Design systems
1.standardizing layout properties
Stripe’s visuals both (static and motion) involve a high volume of production work. To improve efficiency at scale, the focus was on streamlining workflows while maintaining strong visual consistency across outputs.
I created a standard essential properties to improve efficiency and reduce inconsistencies. This allowed me to easily customize the product icon order, select which product to highlight, change color and make a variety of other adjustments through intuitive menus.
Stripe’s visuals both (static and motion) involve a high volume of production work. To improve efficiency at scale, the focus was on streamlining workflows while maintaining strong visual consistency across outputs.
I created a standard essential properties to improve efficiency and reduce inconsistencies. This allowed me to easily customize the product icon order, select which product to highlight, change color and make a variety of other adjustments through intuitive menus.
The tool below is a browser-based alternative to Adobe After Effects, designed for both designers and non-designers. It helps reduce production time by minimizing dependency on creative teams while offering pre-built capabilities similar to After Effects.
The tool below is a browser-based alternative to Adobe After Effects, designed for both designers and non-designers. It helps reduce production time by minimizing dependency on creative teams while offering pre-built capabilities similar to After Effects.
Results
The motion design systems I created improved production efficiency by 96%, enabling designers, video editors, and non-designers to create content variations independently while reducing creative bottlenecks.
The assets were used across social campaigns, out-of-home (OOH) advertising, and the Stripe website, including multiple sign-up experiences.
The motion design systems I created improved production efficiency by 96%, enabling designers, video editors, and non-designers to create content variations independently while reducing creative bottlenecks.
The assets were used across social campaigns, out-of-home (OOH) advertising, and the Stripe website, including multiple sign-up experiences.