Adobe Express equips small businesses with powerful tools to create exceptional marketing materials and engaging content, enabling them to launch and grow their brands effectively. In this project, we’ve developed a dynamic motion design system that enhances the user experience by making complex editing tasks simple and intuitive. By integrating animation into our product features, we aim to not only showcase the capabilities of Adobe Express but also to engage users visually, guiding them through their creative journey with clarity and creativity.
Backed by both qualitative and quantitative insights we demonstrated that animation significantly outperforms static imagery, with user research reinforcing the value of seeing features in action.
These animations primarily support top-of-funnel surfaces, such as the Hybrid landing page, Quick Action page, and various feature-focused setting a new benchmark for engagement and creative expression.
I created over 40 custom animations bringing the brand essence to life in an engaging way. These animations celebrate diversity, inclusivity by thoughtfully representing a wide range of ages, races, genders, and sexual orientations—reflecting who Adobe Express is as a brand and supporting the mission of bring your small business ideas to life with Adobe Express; creativity for all.
The visuals are vibrant and expressive, adding a colorful layer that directly connects the visual aesthetic of each animation to the Express brand. Align all the visual content with Adobe’s emotional image, story, or principles.
Staying focused on the original intent of the user we avoided layering multiple features on an animation and we should only drill into the feature we're focusing on to better tell it's story. Avoid abstraction as much as possible. These should be simple and easy to understand, within seconds. E.g. if we're telling the story of Resize for social media, the additional aspects - icons, color, and badges- of the animation will be focused on resizing for sizes relevant to Facebook,Instagram and Tik Tok.
Ask yourself, what kind of content is displayed on a specific channel, or format, and curate your video or imagery with the above in mind.
Each piece fits its intended use case meaningfully— for instance, using looping GIFs or culturally resonant icons like the DODGE dog to foster connection.
These decisions enhance the impact of our content on relevant channels, making formats feel authentic.
These animations are among the 1st things someone see's on click of a link from Google, so it's critical that the content connects back to the users original intent, in this case to remove the background from an image, and the story needs to be told within the 1st 3 seconds of someone landing on the page. The animations are generally 10 seconds long.
Motion gives us the ability to story tell, to grab attention, creating focus, and to give better context through an animated story. While While not building Disney level animations, we are referencing a number of the principles documented in The Illusion of Life from Disney Animation. By leading with these principles we ensured user interactions felt intuitive and realistic example, the hand cursor was consistently used with smooth and flowing arcs to convey hover, click, or grab actions, enhancing interactivity.
To create realistic, engaging and structured animations set we meticulously organized badges, UI Elements, Project overviews to ensure we never break the system and can scale to other animation types, ensuring teamwide accessibility and continuity in production.
.webp)
