The Client
Embark Veterinary specializes in comprehensive DNA testing for dogs. They are the official DNA test for the Westminster Kennel Club Dog Show. Embark was in the process of redesigning their branding and website when they engaged me to do some animation work.
The Project
Embark tasked me to work with their UX lead to bring in some movement to their designs through subtle animation of background and UI elements.
Software
Sketch
I worked with the UX lead through Sketch to view layouts, properties and access all the necessary assets.
Illustrator
Once the SVG assets were downloaded from Sketch, I would prepare them in Illustrator for After Effects animation.
After Effects
All of the animation explorations happened in AE. For reviews, I would output example animations and walkthroughs as .mp4s.
LottieFiles
This was the final output file for the Developers to implement. From LottieFiles, the devs could pull .json files or GIFs based on their need and ease of use.
Design Layout
To put these animations into context, I'm including the desktop layouts done by the Embark UX and design team. In terms of animation, it was important for me to see how my motion work would affect the surrounding elements on the page. Also, these animations would carry through onto mobile as well. This was one of the discussion points and reasons we opted to work with LottieFiles to output animation as code for the dev team.
Below is the static layout with the animation notes we landed on after our initial calls.
Animation Exploration
The Chromies
These Chromosomes designs, nicknamed "Chromies", were meant to be subtle background details that would be initiated as the use scrolls down the page. Here we have the isolated animations, followed by the animations in place with the other page elements.
Animations with page elements
Results We can Trust Icons
Here we have two sets of icon animations that were done. The first one won't be used since the illustration style had changed while we were animating. The second set is the icon design that Embark had finalized.
Breed Report
For this section I wanted to show how the content to the right of the phone would interact in addition to the phone animation. I was looking to extend the motion techniques to the copy and button interactions. I've included a cursor to demonstrate user interactions.