Welcome to create.hsbc
Just so you know, you’ll need to log on or register to see this content.
HSBC in motion
The development of our motion system and the role it plays in strengthening our brand identity.
In this article you’ll find out how and why we’ve developed a motion system. You'll see how it strengthens our brand identity foundations, adds flexibility, and ultimately enhances our customer experiences with consistency. You’ll also:
- See how motion plays an important role in contemporary branding
- Find out how our design system has influenced our principles
- See examples of the new motion principles in action
Our brand doesn’t stand still. Literally.
We’re always looking for ways to develop and improve our brand identity to solve creative challenges across business lines, markets, and business segments. Developing a motion system that is compelling, consistent, and distinctively HSBC was the next logical step in our creative journey to become a digital-first, screen-based brand.
The world’s biggest and best-known brands always feature motion as a key ingredient in creative storytelling – think of how Apple and Google use movement to connect the experience on a watch, a phone, or a TV ad or a website in their own distinctive ways. The commonality in their movements is no mistake – they feature strong and simple principles to create exciting brand worlds that are easy to move through. In both those cases, motion plays a huge role in how viewers interact with them and the success of those intuitive experiences.
Opening up a world of opportunity
Our brand identity foundations were a great starting point for our motion system – the angularity of the hexagon and the sentiment of openness in our corporate purpose and customer promise gave inspired movements that we can own – opening, advancing, and emulating.
Opening
'Opening' is our signature motion principle. It allows our hexagon to grow and open to reveal things inside it. We always open up, and that brings our customers closer and invites them to step into our world to find their opportunity. 'Opening' can be applied across a range of situations from the hexagon devices to typography, photography, shapes and any combination in digital interfaces, videos and displays. It can also be used across a breadth of channels to deliver just the right brand signature and evoke an emotional response from the audience. We’re still refinining our guidance to define how motion can work with other our other brand foundations and sensorial devices like sound and haptics.
'Opening' was a great start, but it’s not a complete motion system. To make our brand identity distinctive we needed more motion principles as simple mechanics for directional movement. To figure this one out we considered what the next step in a user journey may be and how motion could help. Consider the analogue world; you walk up to a branch and the doors open automatically, then what?
Advancing
The motion system wasn’t created to simply make things wiggly and jiggly, rather it was designed to enhance experiences and help customers find their opportunity. Naturally, 'advancing' became a key motion principle. It was inspired by the angles of the hexagon – horizontal or diagonal.
Together, these principles of 'opening' and 'advancing' form the basis of our motion system; movements that are directly inspired by the existing brand identity foundations like the hexagons devices and our customer promise.
We know there are some spaces where there needs to be freedom when it comes to animation. So, we developed a third ‘intuitive’ principle that is driven by how the user would expect something to move. We call this motion principle 'emulating'.
Emulating
Take, for example, a skateboarder. If there is an illustration of a skateboarder, it’s logical to let it animate naturally as a skateboarder would. If there is a bell icon, we’d expect the bell to swing and ring in a naturally animated form. And even the brand’s Iconic Hexagon can interact with the world around it in an authentic and plausible way, for example being washed away by a wave.
This principle provides an opportunity for the brand to animate in a realistic and natural way, depending on the subject matter or scenario. This is useful in digital interactions where a common and impulsive way of users engaging makes more sense than it would if the opening or advancing motion rules were applied.
Injecting personality
To create flexibility across the motion system, we developed a suite of diverse expressions and characteristics that add dynamism to the core ideas of 'opening' and 'advancing'. These range from the sedate to the impactful, giving freedom to apply what feels right for the story being told.
We’ve also developed a simple equation that takes the variables (opening / advancing, expression and speed) and allows the designer the freedom to inject personality and character to the animation that’s being created.
Moving together
We’ve now got a comprehensive and easy to use motion system that brings our customer and colleague experiences to life. We’re delighted to see how the global creative community is embracing, exploring, and executing them. Motion is an exciting way to dial up our creative experiences in eye-catching ways that pays off our customer promise of opening up a world of opportunity.
The Motion Standard is now available on create.hsbc. For great examples of films using the new standards check out the World day for cultural diversity film.
Made in collaboration with Design Bridge and Partners.
Explore more
Brand identity
Strengthened, streamlined and simplified; our refreshed brand identity sets us up for success.
Create Design System
A design community working together to deliver connected products and experiences.
Accessible by design
Learn about HSBC’s approach to digital accessibility and what it means to us.