The Challenge

Following a bold rebranding, the new visual identity featured expressive, high-fidelity animations. The core problem was that while the motion was visually stunning, it was created as "motion art," not "motion infrastructure," creating a significant bottleneck for scaling. This lack of systemization introduced inconsistency, increased implementation time, and hindered product team efficiency.

Motion with Meaning

We broke our motion philosophy into three key pillars:

• Expressive: Celebrate key moments. From completing a flow to reaching a milestone, we use animation to inject emotion and joy.

• Educational: Help users understand what’s happening—and what to do next. Motion guides without overwhelming, explains without words.

• Focused: Subtle micro-interactions draw attention to what matters, without distracting from the overall experience.

From Brand Animations to Motion Infrastructure

System Deliverables: Translated Design Studio’s animations into systematized motion tokens and principles; Created a motion repository with assets for each platform.

Implementation & Governance: Built reusable patterns and code snippets for efficient developer handoff; Created comprehensive documentation, including annotation toolkits and specs for designers.

Adoption & Training: Conducted training sessions and motion audits across product teams to ensure consistent implementation.

Impact

The transition to a codified motion language delivered immediate efficiencies across the product organization:

• Reduced implementation time and guesswork for engineers.

• Maintained consistency across all mobile and web platforms.

• Empowered product teams to innovate while staying strictly on-brand.

Motion System Project Team

Francisco Arias
Madona Morales
Camila Gonzalez
Ale Barone