HSBC Pictograms
UX, UI and Motion - HSBC
TL;DR
A motion design system built to bring consistency, clarity, and purpose to animation across HSBC’s digital platforms. From easing curves to animation durations, from documentation formats to sequencing patterns, this toolkit gives designers and developers a shared language to work with motion at scale. First of its kind at HSBC, and fully created by me.
-
A: As part of HSBC’s North Star initiative, a major visual overhaul of the mobile banking experience, I was tasked with designing a comprehensive set of pictograms. These weren’t your usual system icons or infographics; they needed to represent HSBC’s full range of products and services, many of which were highly abstract, finance-specific, and sometimes overlapping in purpose. Over time, this initial brief grew into a visual system of more than 120 pictograms, designed in collaboration with the Global Brand team.
-
A: Initially, I had to create a large set of pictograms in a short time, and I focused on building a consistent visual language early on; reusing elements where possible to keep things coherent. At the same time, new requests kept coming in for abstract services like “Borrow more” or “Mortgage for non-UK residents,” which made it increasingly challenging to balance simplicity with meaning.
Later in the process, we began collaborating with the Global Brand team to align on a shared visual direction. This introduced new considerations around angles, tones, and keylines, which meant revisiting and refining many of the existing designs to ensure they fit into a more unified system.
My Role
I led the creation of the motion toolkit from start to finish.
That included an internal audit to identify gaps in how motion was being used across HSBC’s digital products, followed by extensive research into industry-leading systems like Google’s Material, IBM’s Carbon, and Adobe’s Spectrum.
I defined the motion principles, mapped out easing curves and durations, and built reusable patterns that align with our design system. I also created animated examples, developed a clear documentation method for handing motion off to developers, and designed everything in a way that makes motion approachable, even for non-motion designers.
The Challenge
At the time, motion across HSBC’s products was being implemented manually—built from scratch by development pods, with no shared guidance. There was no system in place to help designers define motion or for developers to build it consistently.
While tools like Lottie or Rive could offer a scalable solution, we weren’t there yet. Although After Effects provides more control, it wasn’t practical for everyday design teams. I needed to create a system that worked within real-world constraints—using Figma as the starting point—and still gave teams a reliable way to define, document, and deliver motion.
What It Covers
Motion building blocks
The foundation of the system: durations, easing values, and effects, designed to work together in a reusable way.
Component examples
Practical patterns for UI components like dropdowns, cards, modals, loaders, and banners, ready to plug into real products.
Sequencing & choreography
Load order and spatial flow rules to guide user focus and reinforce content hierarchy.
Documentation methods
Two spec formats: simple text for lightweight handoff, and visual chart specs for multi-step, choreographed motion.
Animated illustrations
Guidelines for animating branded graphics, with tips on layering, sequencing, and what should (or shouldn’t) move.
Accessibility support
Built-in support for reduced motion, common practices, and alternative animations for sensitive use cases.
Motion in Action
Onboarding, Logon and Success animations.
Utilities such as errors, loadings, spinners and notifications
Explore the full toolkit
The system includes a wide range of patterns—from component-level animations to branded illustration guidance and sequencing logic.
You can explore the full interactive toolkit, including motion specs, animated examples, and documentation templates, in Figma’s presentation mode: