Global financial group

As Design System Lead for Europe at a multinational banking institution based in Spain, I split my time between hands-on work growing their design system, and more organizational aspects, defining and implementing processes.

ROLES

UX design
UI design

santander-hero-alt

Challenges

Besides the usual hands-on work of creating new and improving current components, variants, and patterns, the role’s main responsibilities included coordinating design initiatives with teams in four countries across Europe to ensure a consistent and efficient design strategy across these international teams. Supporting the core European design teams was also key, focusing on maintaining design coherence and streamlining processes for improved productivity.

In addition, the role involved working closely with business stakeholders, design leads, and the global design system team to establish governance and support strategies. This collaboration was critical for the evolution of the design system, ensuring it aligned with current business needs and future advancements in online banking technology.

santander-ds-interactions

Map of interactions with different stakeholders.

The approach

In addressing the challenges of the role, my approach was to serve as a facilitator, fostering communication and collaboration among teams to develop a unified design language for an improved user experience.

I actively engaged with team peers and design leads, contributing to the definition of key solutions:

  • A governance model to help users understand the process to follow when improving existing components or creating new ones.
  • A support strategy tailored to users’ needs, incorporating synchronous and asynchronous communication channels, office hours, and support sessions.
  • An improvement roadmap, based on the results of empathy workshops conducted with designers and other users of the design system.

Overall, my primary focus was to help the design teams improve their workflows, pushing the boundaries of the design system and actively participating in its ongoing evolution.

santander-governance-model

Governance model covering both design and development phases.

Results

To improve design efficiency, speed, and consistency across teams, I achieved:

  • Simplified libraries by 35% and reduced components by 7% through restructuring files.
  • Introduced variables to support multimodal libraries, make better use of design tokens, and establish design patterns.
  • Implemented design system talks and office hours to provide on-demand, in-depth support for complex issues.
  • Tracked design system metrics, to understand its use by designers and act accordingly.
  • Championed accessibility and improved the design system to help product teams meet WCAG requirements.
santander-metrics

Usage metrics taken from FIgma for different libraries and versions.

santander-a11y-audit

Accessibility matrix of color contrast audit.

Note: Due to contractual restrictions, I can’t disclose detailed information about this project.