Bayer Design System: Global Coherence, Local Flexibility

The Challenge: A Global Digital Ecosystem

Bayer needed to transform its digital ecosystem to address a complex reality: over 80 markets, each with its own regulations, languages, and cultural sensitivities.

The goal was to create a global platform capable of generating corporate and product websites, adaptable to each local context, maximizing operational efficiency and team autonomy.

Solution: A System to Evolve, Integrate, and Grow

At Runroom, we took on the responsibility of defining and implementing the visual and experience design of the entire platform, as well as the architecture, governance, and operations of the Design System that makes it possible.

Our team, consisting of a Design Team Lead and four Product Designers specializing in Design Systems, works continuously with Bayer's product and technology teams to build a scalable, agnostic, and dynamic design infrastructure.

The Design System is built in Figma and implemented using React and Next.js, connected to a headless Drupal backend. A system designed to evolve, integrate, and sustain the growth of the digital product across all markets.

How We Work: Strategic Design and Operational Execution

The team combines strategic design and operational execution through various workflows:

• Squad tickets: collaboration with frontend and backend in two or three-week sprints.
• Design maintenance: continuous updating and documentation of the system.
• Design support: support to agencies, accessibility review, and documentation.
• Onboardings: training for local teams and agencies.
• Theme requests: customization of visual themes by brand or product line.
• Continuous research: observing the real use of the system to detect frictions and opportunities.

This model allows the product to evolve continuously, supporting different markets through documentation, direct support, and the creation of themes that enhance the system's flexibility.

Since launch, the platform has already been deployed in over 40 markets, progressing gradually and sustainably to validate, learn, and adapt to local realities before each new implementation.

Guillermo Laseca, Design Lead

The Balance Between Robustness and Flexibility

One of the biggest challenges of the project has been finding the right balance between robustness and adaptability. A system that is too rigid limits local expression; one that is too flexible can compromise product consistency, generating ad hoc developments, higher costs, and loss of efficiency.

Through constant collaboration with Bayer's technical team and Element, we are expanding the system's customization without compromising its stability or capacity for evolution.

A Modular City

Designing this system has been like planning a modular city:

• The foundations (principles, tokens, and base components) ensure stability.
• Urban rules (governance, documentation, and processes) ensure coherence.
• Each neighborhood (market or brand) can adapt to its context without breaking the common structure.

In our case, this modularity materializes through an agnostic and stable core, upon which themes are applied to express different brand identities without compromising the product's integrity.

A design system brings order to chaos.

It is not a component repository, but a shared language that connects people, tools, and processes. Like any living organism, it evolves with the organization, learns from its use, and redefines itself with each iteration.

At Bayer, this design system not only accelerates the creation of new sites but also reduces demands from each local market, speeding up the design phases of new sites by more than 50%, boosting local autonomy, and consolidating a shared digital culture.

Learnings About Design Systems

• DesignOps is key to sustaining and scaling a system of this magnitude.
• Constant feedback from markets and local agencies drives its evolution.Flexibility has a cost, and managing it strategically prevents product fragmentation.
• Adoption depends on clarity: a good system is one that is easy to understand, use, and maintain.
• Success in Design Systems is not a deliverable, but a living system that remains useful, coherent, and human.
• César Úbeda, CXO & Partner at Runroomsistema vivo que se mantiene útil, coherente y humano.

César Úbeda, CXO & Partner en Runroom