CaixaBank Digital Motion System

Caixabank Digital Motion System provides guidelines, patterns and best practices to incorporate motion into the workflow of designers and developers through a consistent and functional identity. Motion can make products more usable and differentiated. CaixaBank Digital Motion System is defined by three principles that connect the user with the interface and the brand, highlighting the fundamental role of motion in CaixaBank's digital products. We build its movement based on six elements that define the experience to reflect the principles and personality in the interactions of the interface: halo effect, area, direction of the halo, direction and scaling of the components, rhythm and duration. We also kept in mind the choreography of the interface, which describes how the elements move and react to each other in terms of time and space to create a coherent and engaging experience. Accompanying the choreography, we emphasised certain actions and responses through the use of haptic and sound feedback. These types of responses have a dual functionality: highlighting the feedback at specific moments and improving accessibility. Finally, we produced comprehensive documentation for the moving components of our design system, focusing on the micro-interactions that make them unique and effective, and how they can be integrated with the best practices recommended in the Choreography section.