HSBC Pictograms
UX, UI and Illustration - HSBC
TL;DR
As part of HSBC’s North Star redesign, our team led the creation of a comprehensive pictogram system to represent complex financial products across the mobile app visually. After delivering the initial set, Stuart Oakley, a great designer, and I worked with the Global Brand team to refine and expand the system.
Together, we built a unified, scalable library of 236 pictograms, blending metaphor-driven design, strict visual logic, and cross-team alignment to help users navigate abstract financial services with clarity and confidence.
-
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. -
A: Initially, we had to create a large set of pictograms in a short time, and we 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.
-
I’m proud of how we turned a complex and abstract design challenge into a scalable, unified pictogram system used across HSBC’s global platforms. We designed everything from the ground up and did so in a relatively short time to meet expectations from multiple fronts, including the Global Brand team, stakeholders, and product owners.
Designing a scalable, cohesive pictogram set for abstract financial services
When HSBC’s mobile app underwent a major redesign as part of the North Star initiative, the visual language needed to evolve in tandem with it. This included not just updated icons and illustrations, but the introduction of a brand-new asset type: a comprehensive set of pictograms designed to represent specific products and services within the app experience.
While pictograms might seem like simple supporting visuals at first glance, this project proved to be far more complex. These weren’t generic symbols; they had to capture the essence of abstract, often nuanced financial services. The challenge was to create visuals that were not only clear and intuitive but also cohesive, scalable, and aligned with HSBC’s broader brand direction.
Starting from Scratch
With the North Star app launch approaching, there was an urgent need to introduce a new visual asset type: pictograms that could represent a wide range of financial products. We started with a set of around 50, aiming for a unified visual language that could scale as the product evolved.
These pictograms weren’t just functional add-ons; they had to communicate specific, often abstract financial services like “Borrow more or extend your term” or “Mortgage for non-UK residents.” Each design needed to strike a balance between metaphor and simplicity.
Scaling Up
Over time, the requests kept coming. As the product offerings expanded, so did the need for visual representation. The set grew past 100 pictograms, and with that growth came new complexity. I developed a system of reusable parts and structural logic, reapplying elements like angles, shapes, and silhouettes to keep the set coherent.
But then came a shift: the Global Brand team had also started working on a pictogram system of their own, and we decided to merge efforts. From that point on, the work became highly collaborative and much more detailed.
Creating a System Together
To align with the Brand team, we re-evaluated the existing pictograms and introduced new design principles. Together, we defined how to handle:
This process meant revisiting earlier designs, refining them to meet the new criteria, and rethinking how we visualised certain services. Some pictograms came together quickly, others took dozens of iterations — particularly when representing people or interactions between objects.
Some pictograms came together easier than others. For example, how we represented humans in the new style was something that took a lot of consideration. Hundreds of variants were produced before we decided on a style that satisfied all our criteria.
Modifiers, Matrixes, and Meaning
As the system matured, we introduced the idea of modifiers, base pictograms that could adapt into multiple variants by combining them with additional elements. This approach helped us avoid duplication, reduce visual noise, and maintain consistency across the expanding library.
A good example is the “House” symbol, which acted as a visual anchor for various mortgage-related services. By pairing it with different icons such as percentage, rotation, or star markers, we could differentiate between products like fixed-rate mortgages, remortgaging, or premium offers, all while retaining visual unity.
To manage everything at scale, we created a detailed planning matrix that helped us track progress, usage, and requests across the entire pictogram set. It became an essential tool for organising our work, especially as the number of pictograms grew and more teams got involved.
The matrix allowed us to monitor which pictograms were in concept, in progress, under review, or approved, while also mapping them to their respective products and services. This visibility was especially important for keeping stakeholders informed.
As the project expanded, collaboration between the Global Brand and North Star teams made clear communication and alignment even more critical. The matrix gave everyone a shared reference point and helped avoid duplication or misalignment across different workstreams.
Managing the sign-off process became just as important as the design work itself. Each pictogram had to satisfy multiple requirements and pass through rounds of feedback. The matrix helped us streamline that process, keeping things clear, coordinated, and moving forward.
From Monochrome
to Colour
Once the full monochrome set was approved, we began producing colour variants. Thanks to the consistent tone mapping, we didn’t need to redraw anything, just apply the expanded grey palette across the brand colour spectrum.
Each pictogram retained its structure and readability while gaining more personality in colour. By the end of the process, we had produced 118 monochrome pictograms and 236 in total, including colour variants.
Exploring Motion
We also explored how pictograms could support motion and microinteractions, especially in contexts like onboarding and product feedback.
To test how flexible and adaptable the pictogram system really was, we used the Motion Toolkit I created, applying its principles to animate a selection of pictograms. This helped us validate the consistency of the visual language across movement and transitions, while also identifying opportunities for dynamic use in future product scenarios.
Reflections
This project pushed us to think in systems, metaphors, and micro-details all at once. What began as a focused design challenge evolved into a collaborative visual initiative that now supports HSBC’s mobile experiences across global markets.
We’re proud that the work helped bring clarity and approachability to complex financial services, and that the visual system we built continues to scale with the product.
Please see the entire set below.
Visual Design
Erman Kutlu
Stuart Oakley
Global Brand
In collaboration with
Sarah Burgess and the HSBC Brand Team
