CHALLENGE
Commerzbank's digital transformation relied on multiple agencies, service providers, and in-house teams. Over time, this led to a fragmented approach to icons and illustrations, affecting both internal systems and client-facing touch points.
PAIN POINTS
- Lack of brand alignment
- No centralized repository or clear process for requesting new designs
- Duplicates of the same assets in inconsistent styles
- Missing source files and unclear asset origins
- Unmanaged intellectual property rights (IP, licenses, copyright)
SOLUTION
I conducted a comprehensive audit of existing assets, consolidating icons and illustrations into a unified framework. Through collaboration with stakeholders, I established a custom iconography and illustration style that aligned with the brand, addressed technical constraints and ensured consistency.
RESULTS
- A cohesive icon and illustration library aligned with the brand identity
- Integration with Commerzbank’s brand portal, accessible to third-party providers
- Clear guidelines and approval processes for creating new assets
- Proper IP management to protect against misuse, such as phishing attempts
- Enhanced client trust through consistent UI / UX and brand appearance.
- Cost savings by reducing the need for ad-hoc design work
TYPOGRAPHY
Commerzbank already utilsed Gotham across its brand ecosystem. To ensure visual harmony, the icon system was constructed to complement the most commonly used Gotham weights – Book and Medium.
The icon set was developed with three sizes to serve different use cases:
24 px and 48 px versions were optimised for user interfaces, offering clear readability and reduced detailing at smaller scale.
A 96 px version was designed as a versatile base for spot illustration, print applications and signage.
SUMMARY
Over two years (four part-time), I developed Commerzbank’s scalable icon and illustration system in close collaboration with Brand, UX, and Development teams. The work ensured a unified visual language across all platforms — mobile app, website, online banking (internal and customer-facing), and Service Terminals.
KEY OUTCOMES:
- 500+ icons in 3 sizes (24, 48, 96 px) and 2 styles (outline, solid) — 3,000+ assets
- 175+ spot illustrations (light + dark mode = 350+ assets) built from the icon system
- 50+ micro-animations for onboarding and system feedback
- Fully integrated libraries for Figma, Sketch, Adobe CC, and PowerPoint
This framework streamlined production, strengthened brand consistency, and supported a cost-effective approach to scalable design.
