Animation

Because I watched too many cartoons.

As the web grows more and more interactive, animation is going to become an increasingly important part of the product designer's job. Developers, too. I started experimenting with the tools because I anticipated a future where those skills would be essential, and I wanted to have a seat at that table.

"Floating Emojis"
Lottie JSON. Chainlift, 2021.

Early Days

"How hard could it be?"

As it turns out, extremely.

At first, I struggled. I mean, it was truly excruciating. Turns out that getting a degree in English doesn't make you an expert in animation. It did give me black-belt research skills, though. So when I set out to learn, I learned fast.
‍

first attempt

I was not what you'd call "gifted."

Growing up, I loved watching Flash cartoons, and I'd even tried making my own once. I'd forgotten why I gave up until 15 years later when After Effects crashed on me for the first time. "Oh yeah," I thought. "That's why."

final version

But my skills improved with time.

Luckily, I've discovered I'm one of those people who, when they can't figure something out, will fight tooth and nail to see it through no matter the cost. As a result, I finally started to feel comfortable. Oh, and remember this little mascot. He'll show up again.

(Before & After) "Marketing Ninja at Work"Lottie JSON. Layman's Marketing, 2020.

I made digital marketing feel friendly and simple, not intimidating and complicated.

And all it took was a cartoon ninja.

Problem

Our clients needed advertising, but it felt risky and complicated.

They were confused by the dense tech jargon that PPC experts use. But they need to use it to explain what they do, right? I wasn't so sure about that. So I set out to make it feel more accessible.

Solution

I tested ways to simplify it using our branding and messaging.

I made a few ads then showed them to a focus group of people who hadn't heard of the company. Then, I asked them to write down what they thought we did on a piece of paper.

Results

The winning idea led to 4x more traffic and a 75% lower CPA.

From the tests, "Marketing Ninjas in the Wild" was the clear winner. 90% of responses accurately described our value prop. Over time, the new creative direction led to these fantastic results.

"Marketing Ninja Cheering"Lottie JSON. Layman's Marketing, 2020.

Then at Chainlift, I specialized as a Product Designer and reassessed the role of animation in my work.

As I developed Chainlift's brand guidelines in detail, I established 4 essential rules for animation.

These rules helped ensure that moving or interactive elements would always maintain brand consistency and limit unnecessary motion. It wasn't enough for an animation to look cool, after all. It had to serve a concrete, definitive purpose. For every instance, I asked what it would add to the product. Would it serve a distinct function? Or would it merely be decorative?

"Fluid Chainlift Badge"Lottie JSON. Chainlift, 2021

Roller Coasters always progress left-to-right

Every detail must connote the feeling of forward motion, so elements must always progress from left to right.

"Services Wheel"Lottie JSON. Chainlift, 2021

Designs should mimic theme park rides

This module was inspired by a Ferris wheel. Just as the spokes of a Ferris wheel connect at the center, the apps are implied to connect at Chainlift.

"Loading Coaster"Lottie JSON. Chainlift, 2021

Animation should be thematically relevant

This graphic would work on a loading screen, because it implies a short wait that will end soon.

"Fluffy Clouds"Javascript Mesh. Chainlift, 2021

Textures and abstracts must match the theme too

These gentle shapes move slowly and reference textures of clouds, cotton candy, or soft-serve ice cream. A loose association is fine, as long as there's an association.

Animation

Now, I use animation to breathe life into my work.