HSBC Kinetic

Kinetic's brand identity was created by Grey London

Red glowing orbs float in a wave pattern to resemble a complex sea of transactions and decisions a business can face, brought into a calm flowing unison by Kinetic.

It's a novel idea for HSBC, and Grey had provided a few materials to bring their vision to life — rendered imagery, a video clip showing the orbs resolving into the HSBC logo, and marketing mockups showing banner ads and site takeover graphics.

When I joined the project, designers were trying to find ways of incorporating this brand imagery into the in-app experience.

Static renders made the app feel like an afterthought

While our stakeholders loved the creative provided by Grey, and the general direction of the in-app UX, they were not convinced with how the two sides were coming together in the app. Static renders were used in early designs and mockups to add some identity, but it felt bolted on. The app felt old fashioned and static when it should have a more free-flowing, kinetic feel to match its namesake.

Recreating the effect in After Effects

During one of our meetings I wondered how easy it would be to recreate the effect using an After Effects plugin. I recreated a dot grid and used an animated Perlin noise mask to create the undulating wave effect. I was then able to render out video tests and work them into an interactive prototype using Principle — simulating a landing screen and custom transition — to demo in our next design team meeting.

This went down incredibly well and I was encouraged to explore the effect further before sharing with key stakeholders.

I spent time experimenting with different parameters — the shape of the wave effect, camera positioning, animation speed — to further refine the demo. I also looked at different applications across the app, such as loading indicators and other UI effects.

We also experimented with adding personality to the waves, dubbed "frequencies" by our design lead. We wanted to see if different actions or products could be identified by the way the waveform reacted.

Building the effect natively in Metal

Once we had an aesthetic that worked well with our in-app UI, it was time to discuss implementation. I explored video effects (less dynamic, large file sizes) and was experimenting with exporting static transparent image layers for parallax animation. Luckily, the project was granted a budget to build the effect directly in iOS using Metal.

I partnered with a front-end developer and walked him through how I created the effect in After Effects. We researched game development techniques that used a similar approach — using a Perlin noise mask to generate a height map, commonly used in procedurally generated games.

He was able to recreate the effect natively in Metal, allowing different parameters to be adjusted in real time to change the animation speed and characteristics. We worked together to match the designs as closely as possible — an effect that runs natively at a high frame rate, with minimal impact on app download size.