CHALLENGE
A digital bank needed one visual language
A digital bank needed one visual language
By 2017, Commerzbank was expanding rapidly across mobile, online and business banking.
The interface landscape had become fragmented.
Icon styles varied. Illustrations had evolved independently. Assets were duplicated, incomplete or difficult to trace. Different teams and partners were solving similar problems in different ways.
The opportunity was to bring that complexity back into one coherent visual system.
Not more assets. Better alignment between them.
APPROACH
Audit. Systemise. Scale
Audit. Systemise. Scale
Between 2017 and 2021, I worked with Neugelb Studios to refine and extend Commerzbank's iconography and illustration across its digital ecosystem.
Existing assets were reviewed, consolidated and rebuilt around shared rules for geometry, proportion, weight and character.
The system grew to more than 500 icons and 175 spot illustrations, supported by micro-animations, reusable libraries and guidelines for mobile, web and business applications.
The work sat within a broader transformation led by Commerzbank and Neugelb. Commerzbank credits Neugelb with the concept and design of its Banking App and a key role in ONE – the shared platform connecting digital and physical service channels. (p.11)
A visual toolkit designed to work across products, teams and time.
RESULT
A system that became part of the infrastructure
A system that became part of the infrastructure
The wider shift was visible in both perception and behaviour.
Banking App downloads doubled over the same period.
The visual system also proved resilient.
Many of the icons and illustrations created between 2017 and 2021 remain in active use across commerzbank.de, the Banking App, photoTAN and Corporate Banking App to this date.
The value was not in making every screen look the same.
It was in giving continued change a shared visual foundation.
It was in giving continued change a shared visual foundation.
TYPOGRAPHY
Commerzbank already used Gotham throughout its identity.
Rather than introduce a separate visual character, the icon system was designed around the proportions and weight of Gotham Book and Medium – helping typography and iconography work as one interface language.
Three scales supported different levels of information:
24 px
Reduced detail for compact interface use.
Reduced detail for compact interface use.
48 px
Greater definition for navigation and larger UI applications.
Greater definition for navigation and larger UI applications.
96 px
A more expressive format that could extend into spot illustration, print and signage.
A more expressive format that could extend into spot illustration, print and signage.
The sizes were related rather than simply enlarged.
That allowed the same visual grammar to move from functional interface symbols to more expressive communication without becoming a different style.
SUMMARY
From 2017–2021, I developed Commerzbank’s icon and illustration system with Neugelb Studios, working closely with Brand, UX and Development teams.
The system connected mobile banking, commerzbank.de, online and corporate banking, internal applications and Service Terminals through one reusable visual language.
KEY OUTPUTS
- 500+ icons across 3 sizes and 2 styles / 3,000+ production assets
- 175+ spot illustrations with light and dark variants / 350+ assets
- 50+ micro-animations for onboarding, interaction and system feedback
- Shared libraries for Figma, Sketch, Adobe CC and PowerPoint
Built as a system rather than a collection of assets, the work could be maintained, extended and reused across products and teams.
