Project Goal:

My goal is to create Interactive animated Icons for a yet to be launched product from Adobe. These Icons are designed from the principles of Spectrum 2 and will be used in the interface of the product. The motion should be purposeful and should not be distracting from user workspace.

Approach:

First, I identified the product's types of interaction and the animation format to be used. Later, I began exploring the .JSON format for the icon animations, though the product team isn't sure which format to use, GIF or Lottie. If it's GIF the animation would be a single transition with no loop. But if it's Lottie, the FPS should be accurate to the transition loop. After many discussions we got to a decision to experiment with the Lottie first.

Challenges:

• Creating variations for particular icons which are in the design system and no space for modification of the Icon itself.
• Exporting the animation to the suitable format of web without increasing the load time when there are multiple icon aniamtions in a page.
• Presenting the icon animations in such a way that product team and others can interact with them and share their feedback on it.

Outcome:

The final animations are as shown above. The product team loved it and I've got the opportunity to get feedback from other Motion Designers from different teams which was helpful and motivating with their inputs. These Icons are implemented in the prototype for testing.

Project Goal:

The idea of this project is to design an updated loading screen to align with all the Adobe Products and Spectrum redesign. My Responsibility is to create different concepts of branded loaders for the web and mobile products to be consistent across products with their design system. Our team has come up with 3 different concepts for loading screens and brand loaders for which I've animated using After effects and exported using Lottie.

Concept 1:

This is a simple concept of Product Mnemonic animating before loading the actual interface. This has no set of guidelines on how to animate and I've the liberty to use any motion principle that represents the magic of Adobe with the animation.

Keeping in mind of the visibility of the loading screen, as some products are dark theme by default and some are light theme, I have to be careful on choosing the direction of the motion and emphasis the Mnemonic.

The animation is as shown below. There are multiple ways to animate this, but to keep it simple and emphasis the Mnemonic I have added the product's color as glow behind the Icon to separate it from the dark background.

Concept 2:

This concept is based on the new Adobe marketing campaign, using Adobe logo and turning it to product Mnemonic. It's the way of showing the other side of the Adobe and for every product's loading screen the Mnemonic appears to be transforming from the Adobe logo.

The final animation is as shown below. The challenging part of this animation is transition from sharp corners to rounded corners, but from the feedback of a senior Motion Designer at Adobe, I got to know as a designer we need not to show every little transition. The viewer must see the animation as magic and supposed to wonder how the transition is made. That's the best thing I've learnt from a colleague at Adobe.

Concept 3:

Concept 3 is inspired from the new spectrum redesign and the colors are from the new spectrum gradient theme. This is the most loved concept by all the team, so far.

The final animation is as shown below. I've really enjoyed doing this animation as it needed to be a collaborative design to change colors and Icons in sync with the Product's design system. The Icons represents the functionality of the product, where for the Aftereffects tool, it's all about capture, image and video that transforms from basic elements of spectrum on loop.

Conclusion:

Working as a UX Motion Designer on Adobe’s Brand Team was an inspiring experience that pushed me to explore creative boundaries and technical challenges. The icon and loading screen animations required both precision and flexibility, blending Spectrum Design Guidelines with Adobe's brand identity while ensuring compatibility across platforms. These projects not only helped me to hone my animation skills in Lottie and After Effects but also deepened my understanding of how thoughtful motion design can enhance user experience. Receiving positive feedback from other motion designers at Adobe was incredibly encouraging, reinforcing the value of user-centered, visually cohesive design within a global brand.

Next Steps

To build on this work, my next steps include conducting usability testing to measure the impact of these animations on user satisfaction and engagement across Adobe products. Additionally, I aim to further refine animation techniques by experimenting with other lightweight formats that maintain quality without impacting load time, particularly for web applications. Finally, I plan to document best practices for icon and loading animations within Adobe’s design system, contributing to a scalable resource that other teams can utilize for consistency across future projects. This ongoing exploration of functional, branded motion will continue to inform my approach as I evolve in my career.