Icons & Illustration - Commerzbank

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.