As I've worked in UX Design, I've looked for opportunities to add a little enjoyment to or interaction for the user. I've been able to use my illustration and animation skills to create supporting visuals that not only enhance the designs, but also help guide the user or ease situations where they may be asked to interact with a design. As animation becomes the norm for the web and mobile, I'm making sure I keep up to make the projects I work on really stand out.
Enough words! Let's get to it!
Quick Note on the This Page
Around 2009 I was lucky enough to be working at Chase when they began implementing ADA (Americans with Disabilities Act of 1990) very seriously. I understood very quickly that implementing ADA compliant elements into my design was not just good and fair to everyone, but that it was just good design.
One aspect I have implemented on this page is player controls and not using autoplay on everything I'm showing. For a person who is neurodivergent, these animations can be overwhelming if not worse.
Meijer Lottie Animations
As part of my role as the Lead Illustrator at Meijer, I created animations for use throughout the company. Some were used on their Point of Sale (POS), others within their apps or website. I used Lottie for most of the work so they were lightweight, crisp and could be scaled with no loss in visual fidelity.
Meijer Pharmacy is implementing a new scanning system using a customer's ID or the Meijer app. These animations were created to be displayed on the system for instructional purposes.
There were a few tricky elements to these animations, specifically around what Lottie allowed for export. The screen on the device shows the barcode from the ID or phone, which couldn't be created using traditional masks (not supported). It took some trial and error but I was able to make it seem like the scanner was actually showing what it saw. On top of that, 3D distortions are not supported so I did some traditional keyframe animation for the hands twisting. Not bad!
Employee scans ID internally
Customer scans ID at Drive-Through Scanner
Employee scans ID internally
Meijer Pharmacy also needed animations for their POS inside the store, specifically to show a transaction processing. I designed a looping animation that focused on items within Pharmacy that a customer might be purchasing.
Buying out the Pharmacy
Another area in need of animation was the self checkout POS system. When the customer completed their transaction, they are met with a bag quickly being packed and a receipt. It added a little fun but signified the completion of the transaction.
Don't forget your receipt!
Push It To The Limit
Not just a song from Scarface (great movie!), but how I felt while creating these Lottie animations for onetrust, a privacy and security company. This client wanted complex animations that I had to really plan out because Lottie does not support a lot of effects or other animation tools for export. These had to be light-weight, play smoothly and do some interesting stuff. Take a look!
These animations were displayed on the company website prior to an annual conference. The content was added by their dev team later within HTML. A lot of planning went into these animations due to their complexity and the fact that they needed to use only After Effects shape layers (Illustrator layers produce bitmap images when Lottie exports).
I'm just going to brag... that string animation was all keyframe animation. Not easy... but fun!
Gradient Sort
Automate
Simplify
Duplication
Centralize
PMI Lottie Header
Project Management Institute (PMI) was showcasing their Most Influential Projects for 2020 and wanted an animated header to show of a select few projects. I created a Lottie animation that called on external images so the file stayed light. This project was a precursor to the Make Reality project I worked on, also on this site!