Lottie Icon Animations

Motion Design
2021
Lottie Icon Animations

Partnership

I partnered with the Capital One’s Enterprise Website Team to help them animate the icons on the top navigation bar.

Top navigation bar

Brainstorm

First step was to ideate with the team on what type of animation would best fit the product and work for the brand.

Brainstorming animation ideas on Slack

Setup

After we landed on a decent set of ideas, I broke the icons down in illustrator and rebuilt them so that they can be rigged and animated as needed.

Icon breakdown for rigging

Feedback

I went through three versions of different animations for each icon and shared with the team for feedback.

Socializing icon animations

Critiquing icon animations

Delivery

We eventually landed on an animation that worked best for each icon. See icons on the Capital One website

Final icon animations

Partner Feedback

Ryan has been a flexible partner and designer, and has smoothly transitioned working across multiple projects, teams, and partners. I worked with him closely on the Bank homepage, a crucial page for Bank + Site (Enterprise) Design. He provided key insight and skills for that page, and contributed to two new shared components by making animations and guiding our overall interaction and motion work within those components. The shared components are now being used on other pages and will be used by other teams, and the animations within them really helped elevate them, both for users in helping guide them through the interactions and providing moments of delight, but also for the system as a whole. -Samantha King (Design Lead on the Capital One Bank Website)


Back