Animation

Overview

Animation is the use of motion and transformation to create dynamic and interactive visual effects. When used appropriately, animation can add visual appeal, improve engagement, and enhance user’s experience by providing feedback, guidance, context, and emotion, at the same time, reducing cognitive load by enhancing the tangibility and realism of the user experience. Animation can also be used to convey brand personality, which sets our digital experience from others.

---

Principles

When animation is considered for digital experience, it is required to follow the below principles.

1: Provide Value to User

Animation should serve a purpose and provides clear value to our user.

1.1: Accessibility

Animation itself should be accessible. When used appropriately, animation can provide alternative solutions for users with different abilities and preferences, which make the experience more accessible. WCAG 2.1 animation related accessibility requirements

1.2: Usability

Animation can be used to provide user with feedback, guidance, and additional context, which will make interactions with the our digital experience more engaging and intuitive

2: Expressive

Animation can evoke emotions. When used appropriately, animation can effectively bring our brand to life, and creates deeper emotional connection with our users through a dynamic and lively digital experience.

2.1: Brand Personality

Animation should reflect the brand personality and identity. As part of our digital experience, animation should reflect out brand and its values.

What do we want our user to feel about our brand? Respect, Trust, Proud, Innovative, Empowering, Modern, Adaptive, Diverse.

---

Animation Checklist

Designer

• Have a purpose. Understand the problem you are trying to solve;
• Use Amex branding assets and other approved illustration assets;
• User design system and brand color/typography;
• Animation should be simple and align with our brand personality;
• Movement of the animation should feel natural. For example, use appropriate easing curves;
• Animation should not be obtrusive and distract user from their task;
• Animation should provide feedback, guidance, context to user;
• Animation should be accessible;
• Animation should be consistent throughout the experience, such as style and timing.

Engineering

• Animation should be optimized for quick loading and smooth execution;
• Provide appropriate accessibility alternative text whenever necessary;
• Make sure animation can be controlled by system accessibility settings;
• Enable both light and dark mode whenever needed;
• Reuse any existing animation to keep consistency;

---

Resources

There are existing branding approved graphic elements and pre-defined color palette that we could reuse in animation.

• Brand approved graphic elements library
• Brand Elements
• Brand Illustration Guidelines