Booking.com
Animation Foundation
DESIGNER
Ruixin J. Zhang
ROLES
Sr. Designer
Ruixin J. Zhang
Sr. Designer
Animation serves as a potent tool for expressing our brand and crafting captivating user experiences. Its potential lies in its ability to provide feedback, capture attention, and enhance usability. Thoughtfully designed animations have the power to infuse life into our UI elements, seamlessly guide users across screens, facilitate their progress through complex workflows, and create lasting impressions throughout their product journey.
Animation is a powerful design tool that goes beyond aesthetics—it plays a critical role in shaping how users perceive and interact with our brand. Thoughtfully applied motion can bring digital experiences to life by making interactions feel intuitive, seamless, and human. Animation provides meaningful feedback, helping users understand system status, progress, or the result of an action. It can guide attention to important elements, highlight changes, and reduce cognitive load by visually connecting steps in a process. Beyond functionality, animation also contributes to brand expression, reinforcing tone and personality in ways that static visuals cannot. When done well, it enhances usability, builds trust, and creates delightful moments that leave users with a lasting impression of quality and care.
Animations should never be treated as decorative add-ons; they must be intentionally designed as part of the overall user experience. Thoughtfully crafted motion has the power to infuse life into UI elements, making interactions feel more natural, fluid, and human. By design, animations guide users seamlessly across screens, orienting them within complex digital environments and reducing the friction of transitions. They facilitate progress through intricate workflows by providing clear feedback, confirming actions, and highlighting the next steps, which helps users stay focused and confident.
Animation should be done collaboratively. During the beta period, we aim to collaborate with more designers. After launch, as part of the design system, DL and DS will be responsive for updates and changes. There’s a wide range of animation tools available, and increasingly our design tools are supporting animation and interaction use cases. We recommend using the following tools. Figma can handle most transition states between containers and screens. You can quickly create interactive prototypes and simple transitions are easy to implement. Animation can be best used for complex animations such as unique icon animations and design language illustration animations. Using the Lottie library, After Effects can export animations ready for code. This is not suitable for interactive prototypes. The community will be mainly for testing, collaborating, getting inspired, learning about use cases and gathering feedback.