How to enhance the workflow of creating animation for web-based recruitment platform
Boram Jung - Product Designer of DIO
The most notable advantage of using the LottieFiles for After Effects plugin was the significant time savings. We were no longer bogged down by the lengthy rendering process.
DIO is an innovative platform that address traditional employment structure's limitations by facilitating part-time jobs for workers. It enables individuals employed at major companies like Naver, Kakao, Line, Coupang, and Woowa Bros. to undertake additional short-term projects, offering them extra income opportunities. This setup is to be the bridge between smaller businesses and startups struggling with the recruitment and skilled workers from larger tech firms. Essentially, DIO creates a dual working environment that benefits both employees seeking higher income and smaller companies needing skilled talent. fostering a win-win ecosystem for all.
Workflow of DIO before LottieFiles
Before we adopted LottieFiles, our experience with creating animations for DIO involved a mix of challenges and traditional methods. Transition to LottieFiles for animations marked a significant improvement in our content delivery and user engagement. Initially, we relied on GIF and MP4 files for animations, which faced challenges like slow download speeds and limited creative expression due to color representation issues. This negatively impacted the user experience.
The shift to LottieFiles, influenced by previous experiences, brought several benefits. It simplified the integration of animations into our workflow, offering more flexibility in customization and significantly smaller file sizes. This addressed our key challenges with traditional formats. Although we still use MP4 for complex videos and are in the process of converting existing files to Lottie animations, the ease of finding and customizing animations has been a major upgrade.
LottieFiles enhanced our ability to convey complex information engagingly, improving user understanding and experience. It's now a crucial tool in our strategy to deliver high-quality, understandable content, effectively handling the complexity and rules of our service. This transition has streamlined our workflow overall and enhanced the visual appeal and efficiency of our digital content. Here are some examples of places where we used Lottie animations.
Situation 1: Use an animated image on the notification screen to tell DIO's corporate users to wait for instructions after they post a job.
Situation 2: Add an animated image to welcome new crew members to DIO after they join.
Process of creating motion graphic images for DIO products using After Effects plugin (ft. LottieFiles)
Initial Process
Initially, our process for creating motion graphics was more traditional. We would create vector illustrations and then use Adobe After Effects to produce motion graphics. The primary output formats were MP4 or GIF files. This method, while effective, had its drawbacks. One significant challenge was the time-consuming nature of rendering each animation. If we needed to make any modifications, it would require a complete re-rendering of the animation, which was both time and resource-intensive.
Transition to LottieFiles
The turning point in our animation creation process came with the introduction of the LottieFiles plugin for After Effects. This tool allowed us to streamline our workflow significantly. We continued creating our vector illustrations and motion graphics in After Effects, but instead of rendering to MP4 or GIF, we started exporting the animations as JSON files using the LottieFiles plugin. This shift had a profound impact on our efficiency and flexibility.
The most notable advantage of using the LottieFiles for After Effects plugin was the significant time savings. We were no longer bogged down by the lengthy rendering process. More importantly, if we needed to make adjustments to the animations, we could do so without the need for a complete re-render. This flexibility allowed for quicker iterations and a more responsive design process.
Utilizing resources and color palette feature
While our primary approach is to handle motion image tasks directly, we sometimes encounter limitations in our design resources. In such instances, we turn to the vast library of LottieFiles. Here, we can find a range of free Lottie animations that can fit our current needs. Once we identify a suitable animation, we use the color palette feature of LottieFiles to adapt these animations to match the DIO brand and products. This feature enables us to transform the colors of existing animations, ensuring they seamlessly integrate with our product's aesthetic.
Overall, the evolution of our animation creation process, from traditional methods to the integration of LottieFiles, has significantly improved our efficiency and creative flexibility. It has enabled us to produce high-quality, engaging animations more quickly and align them more closely with our product's design requirements.
