We had never worked with a creative group that developed animations, so we were a bit hesitant in the beginning. However, that quickly changed after our first two meetings when Matt gave us comfort in that he and his team could create exactly what we were looking for (and within the quick timeframe we were running against). From the beginning to the very end, we felt informed and excited about our project. It was an absolute joy to work with this group and we would highly recommend them to anyone looking to create more engaging content.
- Jenna Koenig (Marketing Specialist at Palmer Donavin)
The Brand
Palmer Donavin is a Midwest custom door manufacturing company that produces high-end entry doors.
The Problem
In one word…Covid. Covid has caused many businesses to shift how they communicate with their clients. Palmer Donavin was no exception. Previous to Covid, they would invite contractors and suppliers to tour their factory floor to get a better idea of capabilities and processes. An extremely important part of their sales process was basically put on indefinite hold.
The Plan
When looking for ways to now communicate with their audience, the Palmer Donavin team decided to create a web page where people could see their capabilities, their factory, and what’s involved in their door creation process. When looking at some examples, they found inspiration in a site that had a really smooth and effective looping animation. It looked amazing, but to do that as a GIF would have led to a bloated page size that made it impossible to load. Enter… Lottie!
Lottie is a new style of web animation that converts animation that we’d traditionally make for videos into code for the web. Developed by Airbnb, Lottie essentially creates low-data code-based gifs that look wayyyy better and use less data.
Our task for this project was to illustrate and animate 7 Lottie animation loops + a loading loop. One loop for each step of the Palmer Donavin process.
Something we’ve never done before, and only 4-5 weeks until launch day. ???? Pretty typical of many of the projects we take on but this one would need a bit of exploration immediately.
The Approach
With this being our first project using Lottie, there was a pretty extensive exploration process to get everything working perfectly before we went into production. Initially, there’s a lot of breaking with a little bit of panic, but after dozens of tests, we proudly created our first Lottie animation.
Before starting though, we needed to fully understand their process to figure out where the breakpoints were. We needed to understand exactly what happened at each station so we could quickly and accurately depict that. To do that, we used a sort of script, not one that’s read out loud, but one that we used internally.
The Work
There are limitations that come along with Lottie. Such as we could ONLY use vector shapes to create our illustrations. While we have done many projects that were vector only in the past, it was a challenge finding workarounds for certain elements.
With about 2 weeks to go until launch day, we dove into animating our client-approved illustrations. Something that we haven’t seen much in our short time working with Lottie was character animation. This was a challenge and took a bit of an R&D process just to get those to look perfect with the help of a few plugins.
Results
Delivered on schedule, this project for Palmer Donavin was a perfect example of creating animation and telling stories in the best medium possible. That’s not always a simple screen and using technology to help stories is more important now than it’s ever been before.