DUBS Key Art Animation (App + Web Launch Visual System)

Project Overview

This project involved animating the core “DUBS world” key art used across the DUBS website and app during launch. The illustration was created by the Design Team, and my role was to translate it into a living, animated environment that felt playful, engaging, and performant across devices.

A critical requirement was that the animation load instantly — even on slower connections — while remaining visually rich and avoiding an obvious or repetitive loop.

Process & Collaboration

I collaborated closely with the Design and Development teams to determine how motion could enhance the illustration without compromising performance. Together, we evaluated animation length, file size constraints, rendering formats, and loading behavior across platforms.

The Design Team provided the base illustration and select 3D carousel elements, while I determined which characters and environmental elements to animate and how motion should be distributed across the scene.

Motion Design & Performance Optimization

To meet performance requirements, I designed the animation as a 2-second seamless loop with staggered motion timing to prevent visible repetition. Individual elements animate on different cycles — some completing within the full loop, others animating more quickly or pausing between cycles — creating a sense of continuous, organic motion.

The overall world rotation runs on a longer cycle, with environmental elements such as clouds rotating in opposing directions at different speeds. This layered timing approach adds depth and visual interest while keeping the file lightweight.

Multiple render variations and file formats were tested in collaboration with developers to identify the optimal balance between quality, size, and loading speed.

My Role

• Motion Design & Animation: Animated all characters and environmental elements within the key art
• Loop & Timing System Design: Created non-obvious looping motion within strict performance constraints
• Performance Optimization: Designed motion specifically for fast load times and lightweight delivery
• Cross-functional Collaboration: Worked closely with design and development teams to test and refine outputs

Outcome

The final animation became a core visual element of the DUBS app and website launch, successfully bringing the illustrated world to life while meeting strict performance requirements. The piece demonstrates how thoughtful motion systems can enhance brand presence without sacrificing usability or speed.

Key Takeaways

• Lightweight motion systems can still feel rich when timing and cycles are thoughtfully designed
• Staggered animation loops reduce visual repetition without increasing file size
• Early collaboration with developers leads to better-performing motion outcomes

Animation Details (Optional Deep Dive)
Short clips highlighting loop timing, micro-interactions, and performance-optimized motion used throughout the DUBS world.